:root {
  --color-bg: #f7f6f3;
  --color-text: #3B2109;
  --color-text-muted: #8A7B6B;
  --color-border: #edeae5;
  --color-button-text: #fff;
  --color-accent: #F06B1F;
  --color-chip-bg: rgba(255,255,255,0.25);

  --text-sm: 1rem;
  --text-xs: 0.875rem;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 4.5rem;
  --space-xl: 8rem;

  --radius-sm: 4px;
  --radius-pill: 999px;

  --blur-chip: 10px;

  --container: 1080px;
  --shadow-media-stroke: 0 0 0 1px rgba(0,0,0,0.08);
  --shadow-layered: rgba(42,51,70,0.033) 0 1px 1px -0.5px, rgba(42,51,70,0.044) 0 2px 2px -1px, rgba(42,51,70,0.044) 0 3px 3px -1.5px, rgba(42,51,70,0.033) 0 5px 5px -2.5px, rgba(42,51,70,0.033) 0 10px 10px -5px, rgba(42,51,70,0.033) 0 24px 24px -8px, rgba(0,0,0,0.028) 0 16px 8px, rgba(0,0,0,0.02) 0 32px 16px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:500 var(--text-sm)/1.5 system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-0.025em}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
h1,h2,h3{font-family:"PP Telegraf",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;text-wrap:balance}
p{color:var(--color-text-muted);text-wrap:pretty;max-width:40ch}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--color-text);outline-offset:4px}
::selection{background:#FB5822;color:#fff}

@font-face{
  font-family:"PP Telegraf";
  src:url("/landing/PPTelegraf-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:optional;
}

.container{width:min(100% - 2rem,var(--container));margin:0 auto}
.page{padding:2rem 0 0}

/* Header */
.site-header{padding:1.25rem 0 0}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.site-header__brand{display:inline-flex;align-items:center}
.site-header__brand img{display:block}
.site-nav{display:flex;align-items:center;gap:var(--space-sm)}
.site-nav a{font-size:var(--text-sm);color:var(--color-text-muted)}
.site-nav a.sign-in{display:inline-flex;align-items:center;padding:0.35rem 0.75rem;border:0;border-radius:var(--radius-sm);font-weight:600;color:#5F450D;background:#F1E7D0;transition:background 120ms ease,scale 120ms ease}
.sign-in:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,0.1)}
.sign-in:active{scale:0.96}

/* Sections */
.section{padding:0 0 var(--space-xl)}
.section--tight{padding-top:0}
.intro.section{padding-top:2rem}

/* Hero intro */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.intro__copy{grid-column:1/-1;display:grid;gap:var(--space-sm);width:60%}
.intro h1{font-size:clamp(2rem,5vw,2.5rem);line-height:1;letter-spacing:-0.03em}
.section-label-wrap h2{font-size:clamp(1.25rem,2.5vw,1.75rem);line-height:1.08;letter-spacing:-0.03em}
.h1-dark,.sec-dark,.card-dark{color:var(--color-text)}
.h1-muted,.sec-muted,.card-muted{color:var(--color-text-muted)}
.h1-icon{display:inline-block;vertical-align:-0.18em;transform:translateY(-4px)}
.h1-icon img{display:block;width:32px;height:32px;object-fit:contain}
.eyebrow{display:inline-flex;width:fit-content;padding:0.2rem 0.6rem;border-radius:var(--radius-pill);font-size:12px;font-weight:600;color:var(--color-text-muted);background:rgba(138,123,107,0.15);text-transform:uppercase}
.intro p{font-size:1.125rem;color:var(--color-text-muted);max-width:30rem}
.intro__actions{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0.75rem 1.25rem;border:0;border-radius:var(--radius-sm);background:#FFAE00;color:#5F450D;font:inherit;font-weight:600;cursor:pointer;transition:opacity 160ms ease,scale 160ms ease}
.button:hover,.button:focus-visible{box-shadow:inset 0 0 0 999px rgba(0,0,0,0.1)}
.button:active{scale:0.96}
.button--ghost{background:#F1E7D0;color:#5F450D}
.button--ghost:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,0.1)}
/* Hero media */
.hero-media{padding-bottom:var(--space-xl)}
.hero-placeholder{width:100%;overflow:hidden;border-radius:var(--radius-sm)}

/* Section heading */
.section-label-wrap{display:grid;gap:var(--space-sm);margin-bottom:var(--space-md);width:60%}

/* Feature cards */
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.icon-card{display:grid;border-radius:var(--radius-sm);background:transparent;position:relative;transition:box-shadow 0.12s ease}
.icon-card::before{content:'';position:absolute;inset:auto 0 0 0;height:25%;border-radius:inherit;background:linear-gradient(to top,rgba(255,255,255,0.5),rgba(255,255,255,0));opacity:0;transition:opacity 0.2s ease;pointer-events:none}
.icon-card::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-media-stroke);pointer-events:none}
.icon-card:hover{box-shadow:var(--shadow-layered)}
.icon-card:hover::before{opacity:1}
.icon-card__img{width:100%;overflow:hidden;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.icon-card__text{padding:1rem 1.25rem 1.5rem}
.icon-card h3{font-size:var(--text-sm);font-weight:600;line-height:1.4}

/* Detail blocks */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start}
.detail[hidden]{display:none}
.detail+.detail{padding-top:var(--space-xl)}
.detail[hidden]+.detail{padding-top:0}
.detail--reverse .detail__text{order:2}
.detail--reverse .detail__media{order:1}
.detail__icon{color:var(--color-accent);margin-bottom:var(--space-sm)}
.detail__text{display:grid;gap:var(--space-sm)}
.detail__text h2{font-size:clamp(1.25rem,2.5vw,1.75rem);line-height:1.08;letter-spacing:-0.03em}
.detail__text p{font-size:var(--text-sm);margin-top:var(--space-sm)}
.det-dark{color:var(--color-text)}
.det-muted{color:var(--color-text-muted)}
.detail__media{overflow:hidden;border-radius:var(--radius-sm)}

/* Check list */
.check-list{display:grid;gap:0.35rem;margin-top:var(--space-sm)}
.check-list li{display:flex;align-items:flex-start;gap:0.5rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.check-list li::before{content:'';flex-shrink:0;width:16px;height:16px;margin-top:2px;background:var(--color-text-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")center/contain no-repeat}

/* CTA card */
.cta-card{border-radius:8px;padding:5rem 2rem;display:flex;justify-content:center;align-items:center;background:url('/landing/cta.png')center/cover no-repeat}

/* CTA v2 — split 2-col: image + brown text panel */
.cta-card--split{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:none;overflow:hidden}
.cta-split__media{min-height:24rem;overflow:hidden}
.cta-split__media img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.cta-split__body{background:var(--color-text);color:var(--color-button-text);padding:4rem 3rem;display:grid;gap:var(--space-md);align-content:center;text-align:left}
.cta-split__body .cta-group{margin-bottom:0}
.cta-card--split .cta-split__body h2{color:var(--color-button-text)}
.cta-split__body .cta-chip{color:var(--color-button-text);background:rgba(255,255,255,0.16)}
.cta-split__body .cta-button{justify-self:start}
.cta-split__body .cta-button:hover{box-shadow:inset 0 0 0 999px rgba(59,33,9,0.08)}
.cta-split__body .cta-trust{font-size:var(--text-sm);color:rgba(255,255,255,0.6)}
.cta-split__body .cta-sub{font-size:var(--text-sm);color:rgba(255,255,255,0.78);margin:0}
.cta-card__inner{text-align:center;max-width:34rem;display:grid;gap:1.25rem;place-items:center}
.cta-group{display:grid;gap:1rem;margin-bottom:1.5rem}
.cta-card h2{font-size:clamp(2rem,5vw,2.5rem);color:var(--color-text);margin:0;line-height:1;letter-spacing:-0.03em}
.cta-chips{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.cta-chip{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--color-chip-bg);color:var(--color-text);font-size:var(--text-xs);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-backdrop-filter:blur(var(--blur-chip));backdrop-filter:blur(var(--blur-chip));display:inline-flex;align-items:center;gap:0.4rem}
.cta-chip__check{flex-shrink:0}
.cta-button{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0.75rem 1.25rem;border:0;border-radius:var(--radius-sm);background:#FFAE00;color:#5F450D;font:inherit;font-weight:600;cursor:pointer;justify-self:center;transition:opacity 160ms ease,scale 160ms ease}
.cta-button:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,0.1)}
.cta-button:active{scale:0.96}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start}
.faq-head h2{font-size:clamp(1.25rem,2.5vw,1.75rem);line-height:1.08;letter-spacing:-0.03em}
.faq-list{border-top:1px solid var(--color-border)}
.faq{border-bottom:1px solid var(--color-border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) 0;cursor:pointer;list-style:none;font-family:"PP Telegraf",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:var(--text-sm);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;color:var(--color-text-muted);font-size:1.25rem;line-height:1;transition:transform 160ms ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{max-width:56ch;padding-bottom:var(--space-sm)}

/* Footer */
.site-footer{background:var(--color-text);padding:3rem 0 1.5rem}
.footer-hatch{width:min(100% - 2rem,var(--container));margin:0 auto}
.site-footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);padding-top:1.5rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.site-footer__links{display:flex;align-items:center;gap:var(--space-md)}
.site-footer__links a{color:var(--color-text-muted)}
.site-footer__links a:hover{opacity:0.75}
.site-footer__legal{display:grid;gap:0.25rem}

/* Images — shared media styles */
.hero-placeholder img,
.icon-card__img img,
.detail__media img,
.footer-hatch img{width:100%;height:auto;display:block;outline:1px solid rgba(0,0,0,.08)}

/* ── Reveal (scroll animations) ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Nav — first */
.site-header{animation:fadeInUp .4s cubic-bezier(.23,1,.32,1) 0s both}

/* Hero — starts on paint */
.eyebrow{animation:fadeInUp .4s cubic-bezier(.23,1,.32,1) .1s both}
.intro h1{animation:fadeInUp .4s cubic-bezier(.23,1,.32,1) .16s both}
.intro__actions{animation:fadeInUp .4s cubic-bezier(.23,1,.32,1) .22s both}
.hero-media{animation:fadeInUp .4s cubic-bezier(.23,1,.32,1) .32s both}

/* Scroll sections — triggered by .reveal.is-visible (only hidden when JS active) */
.js .reveal .section-label-wrap,
.js .reveal .icon-card{opacity:0;animation:fadeInUp .45s cubic-bezier(.23,1,.32,1) both;animation-play-state:paused}

.js .reveal.is-visible .section-label-wrap,
.js .reveal.is-visible .icon-card{animation-play-state:running}

/* Features — heading then cards */
.reveal.is-visible .section-label-wrap{animation-delay:0s}
.reveal.is-visible .icon-card:nth-child(1){animation-delay:.25s}
.reveal.is-visible .icon-card:nth-child(2){animation-delay:.5s}
.reveal.is-visible .icon-card:nth-child(3){animation-delay:.75s}

/* Details — each block cascades internally: media → text */
.js .reveal .detail__media,
.js .reveal .detail__text{opacity:0;animation:fadeInUp .45s cubic-bezier(.23,1,.32,1) both;animation-play-state:paused}
.js .reveal.is-visible .detail__media,
.js .reveal.is-visible .detail__text{animation-play-state:running}
.js .reveal .detail{opacity:1} /* detail container itself has no animation */
.reveal.is-visible .detail:nth-child(1) .detail__media{animation-delay:0s}
.reveal.is-visible .detail:nth-child(1) .detail__text{animation-delay:.08s}
.reveal.is-visible .detail:nth-child(2) .detail__media{animation-delay:.2s}
.reveal.is-visible .detail:nth-child(2) .detail__text{animation-delay:.28s}
.reveal.is-visible .detail:nth-child(3) .detail__media{animation-delay:.4s}
.reveal.is-visible .detail:nth-child(3) .detail__text{animation-delay:.48s}

/* CTA — heading, chips, button */
.reveal.is-visible .cta-card h2{animation:fadeInUp .45s cubic-bezier(.23,1,.32,1) 0s both}
.reveal.is-visible .cta-chips{animation:fadeInUp .45s cubic-bezier(.23,1,.32,1) .12s both}
.reveal.is-visible .cta-button{animation:fadeInUp .45s cubic-bezier(.23,1,.32,1) .24s both}

@media(max-width:768px){
  .grid,.cols-3{grid-template-columns:1fr}
  .intro__copy{width:100%}
  .intro h1{font-size:1.8rem}
  .detail{grid-template-columns:1fr;gap:var(--space-md)}
  .detail--reverse .detail__text{order:1}
  .detail--reverse .detail__media{order:2}
  .cta-card--split{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr;gap:var(--space-md)}
  .cta-split__media{min-height:14rem}
}
@media(max-width:480px){
  .site-footer__inner{flex-direction:column;align-items:start}
}

/* Reduced-motion note: entrance animations are intentionally kept per product
   decision. The reveal system never hides content without JS. */