:root {
  --deep-forest: #1f4535;
  --forest-dark: #10251d;
  --alpine-water: #2f727a;
  --glacier-blue: #86b3c2;
  --granite: #7f878a;
  --snow: #f4f7f7;
  --sage: #a8bfaf;
  --slate-blue: #425d6c;
  --mist: #cbd4d5;
  --river-stone: #e6e5df;
  --redwood: #6f4938;
  --white: #ffffff;
  --shadow: 0 22px 70px rgba(16, 37, 29, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--deep-forest); background: var(--snow); line-height: 1.6; }
img { max-width: 100%; }
a { color: inherit; }
.site-header {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; padding: .7rem clamp(1rem, 4vw, 4rem);
  background: rgba(244,247,247,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(127,135,138,.22);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 12px; }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 1.12rem; }
.brand small { color: var(--slate-blue); margin-top: .22rem; }
.site-nav { display: flex; gap: clamp(.75rem, 2vw, 1.5rem); align-items: center; flex-wrap: wrap; font-size: .95rem; }
.site-nav a { text-decoration: none; color: var(--slate-blue); font-weight: 700; }
.site-nav a:hover { color: var(--alpine-water); }
.menu-toggle { display: none; border: 1px solid var(--mist); border-radius: 999px; padding: .55rem .9rem; background: var(--white); color: var(--deep-forest); font-weight: 800; }

.hero {
  min-height: 76vh; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(134,179,194,.45), transparent 29%),
    linear-gradient(135deg, var(--snow), #e8efec);
}
.hero h1, .page h1 {
  font-size: clamp(2.5rem, 6vw, 5.35rem); line-height: 1.02; letter-spacing: -.055em; margin: .45rem 0 1rem;
}
.hero h1 { max-width: 850px; }
.lead { font-size: clamp(1.08rem, 2vw, 1.34rem); max-width: 760px; color: var(--slate-blue); }
.eyebrow { color: var(--redwood); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.eyebrow.light { color: var(--glacier-blue); }
.availability {
  display: inline-flex; margin-top: .35rem; border-radius: 999px; padding: .38rem .75rem;
  background: rgba(47,114,122,.13); color: var(--alpine-water); font-size: .86rem; font-weight: 900;
}
.hero-actions, .store-buttons { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 1.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  padding: .9rem 1.25rem; font-weight: 800; text-decoration: none; border: 2px solid transparent;
}
.btn.primary { background: var(--alpine-water); color: var(--white); }
.btn.primary:hover { background: var(--deep-forest); }
.btn.secondary { border-color: var(--alpine-water); color: var(--alpine-water); background: transparent; }
.purchase-note { color: var(--slate-blue); font-weight: 700; font-size: .95rem; }
.hero-product { display: grid; justify-items: center; }
.hero-card, .product-card {
  width: min(100%, 390px); background: var(--white); border-radius: 2rem; padding: 2rem;
  text-align: center; box-shadow: var(--shadow); border: 1px solid rgba(127,135,138,.18);
}
.app-icon { width: min(210px, 60vw); border-radius: 28%; box-shadow: 0 18px 45px rgba(31, 69, 53, .24); }
.hero-card h2 { font-size: 2rem; margin-bottom: .2rem; }
.text-link { color: var(--alpine-water); font-weight: 900; text-decoration: none; }
.social-links { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.social-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .55rem .85rem;
  border-radius: 999px; border: 1px solid var(--mist); background: var(--white);
  text-decoration: none; font-weight: 800; color: var(--slate-blue);
}
.social-links a:hover { border-color: var(--alpine-water); color: var(--alpine-water); }

.feature-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 0; background: rgba(255,255,255,.4); border-block: 1px solid rgba(127,135,138,.18);
}
.feature-strip article { padding: 1.4rem clamp(1rem, 3vw, 2.5rem); background: var(--white); display: grid; gap: .2rem; }
.feature-strip strong { color: var(--deep-forest); }
.feature-strip span { color: var(--slate-blue); font-size: .92rem; }

.featured, .page { padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 5vw, 5rem); }
.section-title { text-align: center; max-width: 880px; margin: 0 auto 2.5rem; }
.section-title.left { text-align: left; margin-left: 0; }
.section-title h2, .follow-section h2 {
  font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; margin: .3rem 0 .8rem;
}
.section-title p { color: var(--slate-blue); }
.app-showcase {
  display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  max-width: 1180px; margin: 0 auto;
}
.phone-preview { background: linear-gradient(160deg, var(--deep-forest), var(--alpine-water)); border-radius: 2.5rem; padding: 1rem; box-shadow: var(--shadow); }
.phone-preview img { width: 100%; display: block; border-radius: 1.75rem; }
.app-details { background: var(--white); border-radius: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(127,135,138,.16); box-shadow: var(--shadow); }
.app-details h3 { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.1; margin-top: 0; }
.checks, .mini-checks { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.checks li, .mini-checks li { padding: .42rem 0 .42rem 1.8rem; position: relative; }
.checks li::before, .mini-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--alpine-water); font-weight: 900; }

.preview-row {
  padding: 0 clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem);
}
.preview-row figure { margin: 0; overflow: hidden; background: var(--white); border-radius: 1.5rem; box-shadow: var(--shadow); }
.preview-row img { width: 100%; display: block; max-height: 560px; object-fit: cover; object-position: top; }
.preview-row figcaption { padding: 1rem; font-weight: 800; color: var(--slate-blue); }

.philosophy {
  margin: 0 clamp(1rem, 5vw, 5rem) 4rem; padding: clamp(2rem, 5vw, 4rem);
  background: var(--deep-forest); color: var(--snow); border-radius: 2rem;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem;
}
.philosophy img { width: 120px; border-radius: 28%; }
.philosophy h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.1; margin: .2rem 0 .7rem; }
.philosophy p { color: #dfe8e4; max-width: 850px; }

.product-intro {
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  max-width: 1200px;
}
.tagline { font-weight: 900; color: var(--alpine-water); font-size: 1.2rem; }
.feature-panels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem;
}
.feature-panels article { background: var(--white); border-radius: 1.4rem; padding: 1.4rem; box-shadow: var(--shadow); }
.feature-panels h2 { margin-top: 0; }

.screenshots-section { margin-top: clamp(3rem, 6vw, 6rem); }
.compact-title h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.screenshot-card { margin: 0; background: var(--white); border: 1px solid rgba(127,135,138,.18); border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow); }
.screenshot-card img { width: 100%; height: 560px; object-fit: cover; object-position: top; display: block; background: #101817; }
.screenshot-card figcaption { display: grid; gap: .35rem; padding: 1rem; color: var(--slate-blue); }
.screenshot-card figcaption strong { color: var(--deep-forest); font-size: 1.05rem; }

.download-cta, .follow-section {
  margin-top: clamp(3rem, 6vw, 6rem); border-radius: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 1.5rem; background: var(--white); box-shadow: var(--shadow);
}
.download-cta img { width: 100px; border-radius: 25%; }
.download-cta div { flex: 1; }
.download-cta h2 { margin: 0; }
.follow-section { justify-content: space-between; background: linear-gradient(135deg, #e9efed, #dbe8e4); }
.follow-section .social-links { margin-top: 0; }
.support-follow { margin-top: 3rem; }

.narrow { max-width: 880px; margin: 0 auto; }
.contact-box { background: var(--white); border-radius: 1rem; padding: 1rem; border: 1px solid var(--mist); font-weight: 900; }
.contact-box a { color: var(--alpine-water); }
.legal h2 { margin-top: 2rem; }

.site-footer {
  padding: 2rem clamp(1rem, 5vw, 5rem); background: var(--deep-forest); color: var(--snow);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap;
}
.site-footer a { color: var(--snow); }
.footer-brand { display: flex; align-items: center; gap: .7rem; }
.footer-brand img { width: 48px; border-radius: 25%; }
.footer-brand span { display: grid; }
.footer-brand small { color: #dfe8e4; }
.site-footer .social-links a { background: transparent; border-color: rgba(255,255,255,.28); color: var(--snow); }

@media (max-width: 1000px) {
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .screenshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }
  .site-header { flex-wrap: wrap; }
  .site-nav { display: none; width: 100%; padding-top: .6rem; }
  .site-nav.open { display: flex; }
  .hero, .app-showcase, .product-intro { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .feature-panels { grid-template-columns: 1fr; }
  .philosophy { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .download-cta, .follow-section { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .feature-strip, .preview-row, .screenshot-grid { grid-template-columns: 1fr; }
  .screenshot-card img { height: auto; }
  .preview-row img { max-height: none; }
  .brand small { display: none; }
}


/* YouTube and instruction areas */
.btn.youtube {
  background: #b3261e;
  color: var(--white);
}
.btn.youtube:hover {
  background: #7f1d1d;
}
.social-links .youtube-link {
  border-color: rgba(179, 38, 30, .35);
  color: #9f241d;
}
.social-links .youtube-link:hover {
  border-color: #b3261e;
  color: #b3261e;
}
.site-footer .social-links .youtube-link {
  color: var(--snow);
  border-color: rgba(255,255,255,.28);
}
.tutorial-callout {
  margin: 0 clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  background: var(--white);
  border: 1px solid rgba(127,135,138,.18);
  border-radius: 2rem;
  box-shadow: var(--shadow);
}
.product-tutorial {
  margin-left: 0;
  margin-right: 0;
  margin-top: 3rem;
}
.tutorial-callout h2 {
  margin: .1rem 0 .35rem;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.12;
}
.tutorial-callout p {
  margin-top: 0;
  color: var(--slate-blue);
}
.tutorial-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b3261e;
  color: var(--white);
  font-size: 1.55rem;
  box-shadow: 0 12px 30px rgba(179,38,30,.22);
}
.support-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.support-options article {
  display: flex;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 1.4rem;
  background: var(--white);
  border: 1px solid rgba(127,135,138,.18);
  box-shadow: var(--shadow);
}
.support-options h2 {
  margin: 0 0 .35rem;
  font-size: 1.35rem;
}
.support-options p {
  color: var(--slate-blue);
}
.support-symbol {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(47,114,122,.12);
  color: var(--alpine-water);
  font-weight: 900;
}
@media (max-width: 820px) {
  .tutorial-callout {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .support-options {
    grid-template-columns: 1fr;
  }
}


/* Search-friendly explanatory content and FAQ */
.content-section,
.faq-section {
  margin-top: clamp(3rem, 6vw, 6rem);
}
.content-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.content-columns article {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(127,135,138,.18);
  border-radius: 1.4rem;
  box-shadow: var(--shadow);
}
.content-columns h3 {
  margin-top: 0;
  font-size: 1.35rem;
}
.content-columns p {
  color: var(--slate-blue);
}
.faq-list {
  display: grid;
  gap: .75rem;
  max-width: 980px;
}
.faq-list details {
  background: var(--white);
  border: 1px solid rgba(127,135,138,.2);
  border-radius: 1rem;
  padding: 0 1.1rem;
  box-shadow: 0 8px 24px rgba(16,37,29,.07);
}
.faq-list summary {
  cursor: pointer;
  padding: 1rem 2rem 1rem 0;
  font-weight: 900;
  color: var(--deep-forest);
  position: relative;
}
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: .75rem;
  font-size: 1.45rem;
  color: var(--alpine-water);
}
.faq-list details[open] summary::after {
  content: "–";
}
.faq-list details p {
  margin-top: 0;
  color: var(--slate-blue);
}
@media (max-width: 760px) {
  .content-columns {
    grid-template-columns: 1fr;
  }
}