:root{--paper:#F7F4EC;--surface:#FFFFFF;--ink:#16201A;--sub:#656860;--line:#E8E1D2;--chip:#E6EEDF;--green:#2F6A47;--green-ink:#1F4A30;--night:#16201A;--rust:#C8401C;--blue:#3B6FD4;--maxw:1680px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.02}
p{margin:0}
a{color:var(--green-ink);text-decoration:none}
a:hover{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.eyebrow{font-size:13.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in oklab,var(--sub) 74%,var(--ink) 26%)}
.lede{font-size:19px;line-height:1.5;color:var(--sub)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(247,244,236,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;height:78px;display:flex;align-items:center;gap:48px}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);flex-shrink:0}
.wordmark{font-family:Figtree,"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;letter-spacing:.17em;font-size:17px;line-height:1.05;color:var(--ink)}
.tagline{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:14.5px;color:var(--sub);margin-top:12px}
.mark:hover{text-decoration:none;color:var(--ink)}
.mark-badge{width:30px;height:30px;border-radius:22%;background:var(--green);display:grid;place-items:center;flex-shrink:0}
.mark-glyph{height:38px;width:auto;display:block;flex-shrink:0}
.mark-text{display:flex;flex-direction:column;gap:1px}
.mark-tag{font-family:Figtree,"Plus Jakarta Sans",system-ui,sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.115em;text-transform:uppercase;color:var(--sub);white-space:nowrap}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{font-size:14px;font-weight:600;color:var(--ink);opacity:.78}
.nav a.btn-primary{color:#fff;opacity:1}
.nav a.btn-primary:hover{color:#fff;opacity:1}
.nav a:hover{opacity:1;text-decoration:none;color:var(--green-ink)}
.nav a.on{opacity:1;color:var(--green-ink)}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-primary,.btn-primary:link,.btn-primary:visited{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-ink);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.btn-light{background:#fff;color:var(--green-ink)}
.btn-light:hover{color:var(--green-ink);text-decoration:none;background:#f2efe6}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn-outline-light:hover{border-color:#fff;color:#fff;text-decoration:none}
.btn-sm{height:38px;padding:0 15px;font-size:13.5px}

/* generic section */
.sec{padding:96px 0}
.sec-head{max-width:760px}
.sec-head h2{margin-top:14px}
.sec-head .lede{margin-top:16px}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.grid{display:grid;gap:20px}

/* footer */
.site-foot{border-top:1px solid var(--line);background:#F2EEE4;padding:64px 0 40px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px}
.foot-col h4{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:14px;color:var(--ink);opacity:.8}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--sub)}
.foot-bottom .spacer{margin-left:auto}
.foot-bottom a{color:var(--sub);text-decoration:none;border-bottom:1px solid transparent}
.foot-bottom a:hover{color:var(--ink);border-bottom-color:var(--line)}
.powered{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-bottom:0!important}
.powered img{height:15px;width:auto;display:block;position:relative;top:-.5px}
.powered:hover img{opacity:.85}

/* phone frame for screenshots */
.phone{border-radius:34px;border:9px solid #1b201c;background:#1b201c;box-shadow:0 30px 70px -30px rgba(22,32,26,.6);overflow:hidden;width:100%}
/* height:auto is load-bearing — without it an <img> that carries width/height
   attributes for layout stability renders at its raw pixel height and the
   screenshot stretches into a ribbon */
.phone img{display:block;width:100%;height:auto;border-radius:26px}
.phone image-slot{display:block;width:100%;aspect-ratio:1080/2400;border-radius:26px;background:#FBF9F3;overflow:hidden}

/* screen plate for wide app shots */
.plate{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.plate-bar{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px;background:#FBF9F3}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.plate-title{font-size:11.5px;font-weight:700;color:var(--sub);margin-left:6px}

/* "App Experience Center" costs the nav about 80px over the old "Experience",
   and the row has to stay whole down to the 1240px drawer. The tagline under
   the wordmark is the widest thing in the mark, so it goes first, and the nav
   closes up a little behind it. */
@media (max-width:1400px){
  .site-head .mark-tag{display:none}
  .nav{gap:17px}
}
@media (max-width:1100px){.wrap,.head-in{padding:0 32px}}
@media (max-width:860px){.wrap,.head-in{padding:0 20px}.sec{padding:64px 0}}
.site-foot .mark-glyph{height:46px}
.site-foot .wordmark{font-size:19px}
.site-foot .mark-tag{font-size:9.5px}
.storerow{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.storerow.center{justify-content:center}
.storebtn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:11px 16px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;line-height:1.25}
.storebtn:hover{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.storebtn b{display:block;font-size:14px;font-weight:800}
.storebtn span{display:block}

/* ── mobile navigation ──────────────────────────────────────────────────
   A checkbox drawer: no JS, so it works on any page that carries the
   markup. The toggle and its label are hidden above 1040px, where the
   full nav row is visible. */
.nav-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.nav-btn{display:none;margin-left:auto;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.nav-btn:hover{border-color:var(--ink)}
.nav-btn .bars{display:block;width:19px;height:13px;position:relative}
.nav-btn .bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.nav-btn .bars i:nth-child(1){top:0}
.nav-btn .bars i:nth-child(2){top:5.5px}
.nav-btn .bars i:nth-child(3){top:11px}
.nav-scrim{display:none;position:fixed;inset:0;z-index:60;background:rgba(22,32,26,.42);opacity:0;transition:opacity .24s ease}

/* 1264, not 1040: the row carries eight items and the longest of them is
   "App Experience Center", which needs 1241px exactly. Breaking at 1240 left
   no margin at all for a font substitution to eat, so the drawer takes over
   a little earlier — 1280 laptops still get the whole row. */
@media (max-width:1264px){
  /* backdrop-filter would make .site-head the containing block for the
     position:fixed drawer, trapping it inside the 78px header */
  .site-head{backdrop-filter:none;background:var(--paper)}
  /* above the drawer, so the X stays visible and tappable while it is open */
  .nav-btn{display:inline-flex;position:relative;z-index:80}
  .nav{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(320px,86vw);margin:0;
       display:flex;flex-direction:column;align-items:stretch;gap:0;
       background:var(--surface);border-left:1px solid var(--line);
       box-shadow:-30px 0 60px -40px rgba(22,32,26,.5);
       padding:88px 22px 28px;overflow-y:auto;
       transform:translateX(101%);transition:transform .28s cubic-bezier(.4,0,.2,1);
       visibility:hidden}
  .nav a{font-size:16px;padding:14px 4px;border-bottom:1px solid var(--line);opacity:1}
  .nav a.btn-primary{margin-top:22px;border-bottom:0;justify-content:center;height:48px;font-size:15px}
  .nav a.btn-primary:hover{color:#fff}
  .nav-toggle:checked~.nav{transform:none;visibility:visible}
  .nav-toggle:checked~.nav-scrim{display:block;opacity:1}
  .nav-toggle:checked~.nav-btn .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle:checked~.nav-btn .bars i:nth-child(2){opacity:0}
  .nav-toggle:checked~.nav-btn .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .nav-toggle:focus-visible~.nav-btn{outline:2px solid var(--green);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.nav,.nav-btn .bars i,.nav-scrim{transition:none}}

@media (max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:420px){.foot-grid{grid-template-columns:1fr}.foot-bottom{gap:12px}.foot-bottom .spacer{display:none}}