/*!
Stylesheet: Codekyt Apps — apps.codekyt.com
Description: Design system for the Codekyt Apps subdomain — deep navy heroes with warm cream
body sections, sunset orange accents, Sora display type. Generated pages come from build_site.py.
*/

:root{
  --navy:#08162b;
  --navy-2:#10233d;
  --navy-3:#183758;
  --cream:#f8f2e7;
  --cream-2:#fffaf0;
  --paper:#fffdf8;
  --ink:#10223a;
  --muted:#68717b;
  --orange:#cb612b;
  --orange-2:#e48749;
  --coral:#ef7854;
  --sage:#6e8c68;
  --gold:#e4ad50;
  --red:#a84735;
  --line:rgba(16,34,58,.13);
  --radius:26px;
  --shadow:0 24px 70px rgba(8,22,43,.13);
  --ease:cubic-bezier(.22,.8,.25,1);
}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
h1,h2,h3{font-family:"Sora",sans-serif;line-height:1.08;letter-spacing:-.04em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* ===== Layout & utilities ===== */
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
.narrow{max-width:820px}
.section{padding:120px 0}
.ui-icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:inline-block;color:var(--orange);font:700 12px/1 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.eyebrow.light{color:#f3b17f}
.category{color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}

/* ===== Reveal engine ===== */
.reveal,[data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in,[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(2){transition-delay:.1s}
[data-stagger].in>*:nth-child(3){transition-delay:.2s}
[data-stagger].in>*:nth-child(4){transition-delay:.3s}
[data-stagger].in>*:nth-child(5){transition-delay:.4s}
[data-stagger].in>*:nth-child(6){transition-delay:.5s}

/* ===== Header & navigation ===== */
.site-header{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:.3s}
.site-header.scrolled{background:rgba(8,22,43,.92);backdrop-filter:blur(16px);box-shadow:0 1px rgba(255,255,255,.08)}
.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:7px}
.brand img{height:27px;width:auto;display:block}
.brand small{font:700 9px/1 "Inter",sans-serif;letter-spacing:.2em;color:#f3b17f;border-left:1px solid rgba(255,255,255,.3);padding-left:10px;margin-left:3px}
.desktop-nav{display:flex;align-items:center;gap:8px}
.desktop-nav a{padding:10px 16px;border-radius:12px;color:rgba(255,255,255,.76);font-size:14px;font-weight:600}
.desktop-nav>a:hover,.nav-item>a:hover{background:rgba(255,255,255,.08);color:#fff}
.menu-toggle{display:none;background:none;border:0;width:42px;height:42px}
.menu-toggle span{display:block;width:22px;border-top:2px solid #fff;margin:6px auto;transition:transform .3s ease}
.menu-open .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Apps dropdown */
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:5px}
.nav-item>a .ui-icon{width:14px;height:14px;stroke-width:2.2;transition:.25s}
.nav-item:hover>a .ui-icon,.nav-item.open>a .ui-icon{transform:rotate(180deg)}
.nav-drop{position:absolute;right:0;top:calc(100% + 13px);min-width:340px;background:var(--paper);border-radius:20px;padding:9px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-9px);transition:.25s}
.nav-drop:before{content:"";position:absolute;inset:-15px 0 auto;height:15px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-drop a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;color:var(--ink);transition:background .2s}
.nav-drop a:hover{background:var(--cream);color:var(--ink)}
.nav-drop .drop-icon{width:44px;flex:none}
.nav-drop .drop-icon svg{border-radius:12px}
.nav-drop b{display:block;font:600 15px/1.3 "Sora",sans-serif;letter-spacing:-.02em}
.nav-drop small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

/* ===== Buttons & links ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 23px;border-radius:14px;font:700 14px/1 "Inter",sans-serif;transition:.25s;border:1px solid transparent}
.btn .ui-icon,.text-link .ui-icon{width:18px}
.btn:hover{transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 14px 35px rgba(239,120,84,.27)}
.btn-cream{background:var(--cream-2);color:var(--ink)}
.btn-outline{border-color:var(--line);background:transparent}
.text-link{display:inline-flex;align-items:center;gap:9px;color:var(--orange);font-weight:700}
.store-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store-badge{display:inline-block;width:184px;border-radius:11px;border:1px solid rgba(255,255,255,.28);overflow:hidden;transition:.25s;line-height:0}
.store-badge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5);box-shadow:0 12px 28px rgba(8,22,43,.2)}
.store-badge svg{display:block;width:100%;height:auto}

/* ===== Home — hero ===== */
.home-hero{min-height:760px;background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:160px 0 90px}
.home-hero:after,.product-hero:after,.page-hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.25) .7px,transparent .7px);background-size:7px 7px;opacity:.05;pointer-events:none}
.hero-glow{position:absolute;border-radius:50%;filter:blur(110px)}
.glow-one{width:600px;height:600px;background:rgba(203,97,43,.22);left:-250px;top:-180px}
.glow-two{width:450px;height:450px;background:rgba(110,140,104,.15);right:-150px;bottom:-160px}
.home-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:80px;position:relative;z-index:2}
.hero-copy h1{font-size:clamp(54px,6vw,82px);margin:24px 0}
.hero-copy h1 span,.product-copy h1 span{color:#f3a56c}
.hero-copy p{max-width:560px;color:rgba(255,255,255,.67);font-size:19px;margin-bottom:35px}
.hero-art{height:530px;position:relative;display:grid;place-items:center}
.hero-art:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018)}
.hero-art:after{content:"";position:absolute;width:min(470px,84vw);height:min(470px,84vw);border-radius:50%;background:radial-gradient(circle,rgba(239,120,84,.5),rgba(228,173,80,.22) 45%,rgba(203,97,43,0) 72%);filter:blur(55px)}
.hero-art .phone{transform:rotate(5deg);z-index:2}
/* The hero photograph, masked into the ring set above. The inner shadow is what
   stops a bright photo edge cutting a hard disc out of the navy. */
.hero-photo{position:relative;z-index:2;width:min(400px,72vw);height:min(400px,72vw);border-radius:50%;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.5)}
.hero-photo:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 -70px 95px -45px rgba(8,22,43,.8)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.float-note{position:absolute;z-index:3;background:rgba(255,253,248,.94);color:var(--ink);border-radius:16px;padding:13px 18px;box-shadow:var(--shadow);font-size:13px}
.float-note b,.float-note span{display:block}
.float-note span{color:var(--muted);font-size:11px}
.note-a{left:0;top:27%}
.note-b{right:-15px;bottom:22%;display:flex;gap:9px;align-items:center;font-weight:700}
.note-b .ui-icon{color:var(--sage)}

/* ===== Phone frame ===== */
/* A thin dark device edge. Padding rather than a border, so the screenshot inside
   keeps its own slightly tighter radius. `will-change` is not a performance hint here:
   most of these phones are rotated, and without its own compositing layer the browser
   draws the rounded clip unantialiased, which stair-steps the corners. */
.phone{width:252px;height:436px;padding:3px;background:#343333;border-radius:24px;box-shadow:0 28px 70px rgba(0,0,0,.3);overflow:hidden;position:relative;flex:none;will-change:transform}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:21px}
/* On the navy heroes a black edge vanishes into the background, so the rail goes white. */
.product-hero .phone,.hero-art .phone{background:#fff}

/* ===== Section headings ===== */
.section-heading{max-width:650px}
.section-heading h2{font-size:clamp(40px,5vw,62px);margin:18px 0}
.section-heading p{color:var(--muted);font-size:18px}
.section-heading p a{color:var(--orange);font-weight:700}

/* ===== Home — app feature ===== */
.intro{background:var(--cream)}
.intro .section-heading{text-align:center;margin:0 auto 65px}
.app-feature{background:var(--paper);border-radius:34px;display:grid;grid-template-columns:1fr .8fr;min-height:570px;overflow:hidden;box-shadow:var(--shadow)}
/* Only from the second app onwards, so a one-app grid keeps its original spacing. */
.app-feature+.app-feature{margin-top:34px}
.app-feature-copy{padding:70px 35px}
.app-title-row{display:flex;gap:18px;align-items:center}
.app-icon{width:82px;flex:none;filter:drop-shadow(0 12px 20px rgba(130,64,25,.2))}
.app-icon svg{border-radius:20px}
.app-icon.large{width:114px}
.app-icon.medium{width:92px}
.app-title-row h3{font-size:30px;margin-top:4px}
.big-copy{font:600 clamp(28px,3.5vw,44px)/1.18 "Sora";letter-spacing:-.04em;margin:42px 0 20px}
.big-copy strong{color:var(--orange)}
.app-feature-copy>p:not(.big-copy){max-width:520px;color:var(--muted);font-size:17px}
.app-actions{margin-top:35px;display:flex;gap:25px;align-items:center;flex-wrap:wrap}
.app-feature-art{background:#e8d7bc;position:relative;display:grid;place-items:end center;padding-top:60px}
.app-feature-art .phone{transform:translateY(40px)}
.spice-dot{position:absolute;border-radius:50%}
.spice-green{width:80px;height:80px;background:var(--sage);top:52px;right:50px}
.spice-red{width:54px;height:54px;background:var(--red);bottom:60px;left:40px}
.spice-gold{width:38px;height:38px;background:var(--gold);top:140px;left:50px}

/* ===== Home — how we build ===== */
.principles{background:var(--cream-2);padding:105px 0}
.principles .section-heading{width:80%;max-width:none;margin-bottom:60px}
.principles .section-heading h2 span{color:var(--orange)}
.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.principle-grid>div{position:relative}
.principle-grid>div>span{position:absolute;right:0;top:0;color:#c6b8a5;font:600 12px "Sora"}
.principle-grid .ui-icon{color:var(--orange);width:29px;height:29px;margin-bottom:26px}
.principle-grid h3{font-size:21px;margin-bottom:12px}
.principle-grid p{color:var(--muted)}

/* ===== Home — our promise ===== */
.standards{background:#e8dcc9;padding:110px 0}
.standards-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:start}
.standards-copy h2{font-size:clamp(32px,3.6vw,46px);margin:18px 0}
.standards-copy p{color:#6d6151}
.standards-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:36px 44px}
.standards-list li{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:16px}
.standards-list .ui-icon{width:27px;height:27px;color:var(--orange);grid-row:span 2;margin-top:2px}
.standards-list b{font:600 17px/1.35 "Sora",sans-serif;letter-spacing:-.02em}
.standards-list span{color:#6d6151;font-size:15px}

/* ===== Closing CTA ===== */
.closing-cta{background:var(--navy);color:#fff;text-align:center;padding:115px 0;position:relative;overflow:hidden}
.closing-cta h2{font-size:clamp(42px,5vw,66px);margin:20px 0}
.closing-cta p{color:rgba(255,255,255,.62);margin-bottom:28px}
.closing-cta .store-badges{justify-content:center}
.closing-cta p a{color:#f3a56c;text-decoration:underline}

/* ===== Product — hero ===== */
.product-hero{background:var(--navy);color:#fff;min-height:820px;padding:150px 0 80px;position:relative;overflow:hidden}
.product-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:80px;position:relative;z-index:2}
.product-copy h1{font-size:clamp(50px,5.5vw,76px);margin:24px 0}
.product-copy h1 span{display:inline-block;font-size:.68em;line-height:1.15}
/* Sized to its own column, so each line of the title stays on one row. Capped at the clamp above. */
.fit-title{container-type:inline-size}
.fit-title h1{font-size:min(clamp(50px,5.5vw,76px),12.8cqi)}
.product-copy>p{color:rgba(255,255,255,.66);font-size:19px;max-width:510px;margin-bottom:30px}
.product-copy>.store-badges{margin-top:8px}
.product-copy>small{display:block;margin-top:12px;color:rgba(255,255,255,.43)}
.product-copy .app-icon{margin-bottom:28px}
.product-orb{position:absolute;width:650px;height:650px;border-radius:50%;background:rgba(203,97,43,.18);filter:blur(90px);right:-180px;top:-160px}
.phone-cluster{height:600px;display:flex;align-items:center;justify-content:center;gap:20px}
.phone-cluster .phone:first-child{transform:rotate(-7deg) translateY(-22px)}
.phone-cluster .phone:last-child{transform:rotate(7deg) translateY(38px)}
/* Hero reel: a looping screen recording in an iPhone frame. The screen is the button, so a tap
   anywhere on it pauses or plays; the glass icon shows while paused, and on hover/focus while playing. */
.hero-reel{position:relative;display:flex;align-items:center;justify-content:center;min-height:720px}
.hero-reel:before{content:"";position:absolute;width:min(540px,92vw);height:min(540px,92vw);border-radius:50%;background:radial-gradient(circle,rgba(239,120,84,.42),rgba(228,173,80,.17) 45%,rgba(203,97,43,0) 72%);filter:blur(60px)}
.iphone{position:relative;z-index:1;width:345px;padding:12px;border-radius:64px;background:linear-gradient(145deg,#4a4a4f,#1b1b1e 38%,#111113 62%,#3a3a3e);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 4px #0c0c0d,0 44px 90px rgba(0,0,0,.55)}
.iphone:before,.iphone:after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2e2e31,#58585d)}
.iphone:before{left:-3px;top:17%;height:5%;box-shadow:0 52px 0 0 #3d3d41,0 108px 0 0 #3d3d41}
.iphone:after{right:-3px;top:27%;height:12%;background:linear-gradient(270deg,#2e2e31,#58585d)}
.iphone-island{position:absolute;z-index:3;top:calc(12px + 1.4%);left:50%;width:31%;height:3.9%;border-radius:20px;background:#000;transform:translateX(-50%);pointer-events:none}
.reel-screen{position:relative;display:block;width:100%;aspect-ratio:402/874;border-radius:52px;overflow:hidden;background:#f6f8f1;isolation:isolate}
.reel-screen video{display:block;width:100%;height:100%;object-fit:cover}
.reel-toggle{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer;transition:background .25s;-webkit-tap-highlight-color:transparent}
.reel-toggle:focus-visible{outline:3px solid #f3a56c;outline-offset:3px}
.reel-icon{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(8,22,43,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 12px 30px rgba(8,22,43,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:scale(.88);transition:opacity .25s,transform .25s}
.reel-icon svg{width:26px;height:26px;fill:currentColor}
.reel-icon .i-play{display:none;margin-left:3px}
.hero-reel.is-paused .reel-icon .i-play{display:block}
.hero-reel.is-paused .reel-icon .i-pause{display:none}
.hero-reel.is-paused .reel-icon,.reel-toggle:hover .reel-icon,.reel-toggle:focus-visible .reel-icon{opacity:1;transform:none}
.hero-reel.is-paused .reel-toggle{background:rgba(8,22,43,.12)}
@media(max-width:900px){.hero-reel{min-height:0;padding:30px 0 10px}}
@media(max-width:640px){.hero-reel{padding:0;margin-top:-35px}.iphone{width:min(304px,80vw);padding:10px;border-radius:55px}.iphone-island{top:calc(10px + 1.4%)}.reel-screen{border-radius:45px}.reel-icon{width:58px;height:58px}}

/* ===== Product — statement ===== */
.statement{background:var(--cream-2)}
.split-copy{display:grid;grid-template-columns:2fr 3fr;gap:70px;align-items:center}
.split-art{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split-art img{display:block;width:100%;height:auto}
.split-copy h2{font-size:clamp(34px,3.9vw,52px);margin:20px 0 28px}
.split-copy h2 span{color:var(--orange)}
.split-copy p{color:var(--muted);font-size:18px;max-width:720px}

/* ===== Product — features ===== */
.features{background:var(--cream)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px}
.feature-grid article{background:var(--paper);border:1px solid rgba(16,34,58,.08);padding:35px;border-radius:22px;min-height:240px}
.feature-grid .ui-icon{color:var(--orange);width:31px;height:31px;margin-bottom:35px}
.feature-grid h3{font-size:21px;margin-bottom:13px}
.feature-grid p{color:var(--muted)}

/* ===== Product — home screen widget ===== */
.widget-showcase{background:var(--cream-2)}
.widget-stage{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center;margin-top:62px}
.widget-art{display:grid;place-items:center;position:relative}
.widget-art:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(79,70,229,.12);filter:blur(55px)}
.widget-art .phone{position:relative}
.widget-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:34px 44px}
.widget-points li{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:15px}
.widget-points .ui-icon{width:22px;height:22px;color:var(--orange);stroke-width:2.2;grid-row:span 2;margin-top:3px}
.widget-points b{font:600 17px/1.35 "Sora",sans-serif;letter-spacing:-.02em}
.widget-points span{color:var(--muted);font-size:15px}
/* The styling panel. A dark card because black is the background a new widget gets, and the
   swatches, ranges and toggles below are the configurator's own — keep them in step with it. */
.widget-style{margin-top:78px;background:var(--navy);color:#fff;border-radius:var(--radius);padding:54px 56px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.widget-style:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(203,97,43,.17);filter:blur(120px);right:-190px;top:-230px}
.widget-style-head{position:relative;max-width:640px;margin-bottom:46px}
.widget-style-head h3{font-size:clamp(26px,2.9vw,37px);margin:15px 0 13px;letter-spacing:-.02em}
.widget-style-head p{color:rgba(255,255,255,.62);font-size:16px}
.style-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:36px 60px}
.style-row b{display:block;font:700 11.5px/1 "Inter",sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#f3b17f;margin-bottom:17px}
.style-row small{display:block;color:rgba(255,255,255,.5);font-size:13.5px;margin-top:14px}
.style-row em{display:block;font:600 16px/1.4 "Sora",sans-serif;font-style:normal;letter-spacing:-.01em}
.swatches{display:flex;flex-wrap:wrap;gap:11px}
.swatches i{width:34px;height:34px;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.swatches i.wheel{background:conic-gradient(#ff5a5a,#ffd658,#36d47a,#58a8ff,#b07bff,#ff5a5a)}
.accents{display:flex;flex-wrap:wrap;gap:10px}
.accents i{width:27px;height:27px;border-radius:50%}
.range{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:9px}
.range:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);border-radius:99px;background:linear-gradient(90deg,var(--orange),#f3a56c)}
.range:after{content:"";position:absolute;top:50%;left:var(--fill);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.toggles{display:grid;gap:14px}
.toggles span{position:relative;padding-left:52px;font-size:15px;color:rgba(255,255,255,.82);line-height:1.45}
.toggles span:before{content:"";position:absolute;left:0;top:1px;width:38px;height:22px;border-radius:99px;background:var(--orange)}
.toggles span:after{content:"";position:absolute;left:19px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff}

/* ===== Product — dashboard ===== */
.insights{background:var(--paper)}
.insights-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}
.insights-art{display:grid;place-items:center;position:relative}
.insights-art:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(203,97,43,.09);filter:blur(50px)}
.insights-art .phone{transform:rotate(4deg);position:relative}
.insights-art.tilt-left .phone{transform:rotate(-4deg)}
.insights-copy h2{font-size:clamp(34px,4vw,52px);margin:18px 0}
.insights-copy>p{color:var(--muted);font-size:18px;max-width:600px}
.insight-list{list-style:none;margin-top:38px;display:grid;gap:26px}
.insight-list li{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:15px}
.insight-list .ui-icon{width:21px;height:21px;color:var(--sage);stroke-width:2.4;grid-row:span 2;margin-top:4px}
.insight-list b{font:600 17px/1.35 "Sora",sans-serif;letter-spacing:-.02em}
.insight-list span{color:var(--muted);font-size:15px}

/* ===== Product — screenshots ===== */
.screens{background:#e8dcc9;overflow:hidden}
.screen-gallery{display:flex;gap:35px;align-items:flex-start;margin-top:65px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:30px}
.screen-gallery figure{flex:none;width:252px;text-align:center;scroll-snap-align:center}
.screen-gallery .phone{margin:auto;box-shadow:0 25px 60px rgba(62,44,25,.2)}
.screen-gallery figure:nth-child(even){transform:translateY(45px)}
.screen-gallery figcaption{margin-top:25px}
.screen-gallery figcaption b,.screen-gallery figcaption span{display:block}
.screen-gallery figcaption span{color:var(--muted)}

/* ===== Product — plans ===== */
.plans{background:var(--cream-2)}
.plans .section-heading{text-align:center;margin:auto}
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);align-items:start;gap:24px;max-width:880px;margin:65px auto 0}
.plan-grid article{background:var(--paper);padding:38px;border:1px solid var(--line);border-radius:28px;position:relative}
/* Both badges have to share one row inside a plan card, which is narrower than the
   184px they take at full size — so they shrink to fit rather than wrap. */
.plan-grid .store-badges{flex-wrap:nowrap}
.plan-grid .store-badge{width:auto;flex:1 1 0;min-width:0;max-width:184px}
.plan-grid h3{font-size:44px;margin:9px 0 14px}
.plan-grid p{color:var(--muted)}
.plan-name{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800}
.plan-grid ul{list-style:none;margin:28px 0}
.plan-grid li{padding:9px 0;border-bottom:1px solid var(--line)}
.plan-grid li:before{content:"✓";color:var(--sage);font-weight:800;margin-right:10px}
.pro-card{background:var(--navy)!important;color:#fff;border:0!important;box-shadow:var(--shadow)}
.pro-card p{color:rgba(255,255,255,.62)}
.pro-card li{border-color:rgba(255,255,255,.1)}
.popular{position:absolute;right:25px;top:25px;background:var(--coral);padding:7px 10px;border-radius:8px;font-size:9px;font-weight:800;letter-spacing:.1em}

/* ===== Product — legal links ===== */
.product-links{background:var(--cream-2)}
.product-links .wrap{display:grid;grid-template-columns:repeat(2,1fr)}
.product-links a{padding:38px 28px;display:flex;align-items:center;gap:15px;border-right:1px solid var(--line)}
.product-links a:last-child{border:0}
.product-links a>.ui-icon:last-child{margin-left:auto}

/* ===== Page hero ===== */
.page-hero{background:var(--navy);color:#fff;min-height:620px;padding:170px 0 100px;position:relative}
.page-hero.compact{min-height:490px}
.page-hero h1{font-size:clamp(52px,6vw,78px);margin:22px 0}
.page-hero p{color:rgba(255,255,255,.65);font-size:19px;max-width:650px;margin-bottom:28px}
.page-hero .app-icon{margin-bottom:25px}

/* ===== FAQ accordion ===== */
.faq{background:var(--cream-2)}
.faq-layout{display:grid;grid-template-columns:.38fr .62fr;gap:80px}
.faq-aside{position:sticky;top:130px;height:max-content}
.faq-aside h2{font-size:42px;margin:20px 0 32px}
.accordion article{border-top:1px solid var(--line)}
.accordion article:last-child{border-bottom:1px solid var(--line)}
.accordion button{width:100%;border:0;background:none;color:var(--ink);padding:25px 0;display:flex;justify-content:space-between;text-align:left;font:600 18px "Sora";cursor:pointer}
.accordion button i{width:18px;height:18px;position:relative;flex:none}
.accordion button i:before,.accordion button i:after{content:"";position:absolute;inset:9px 0 auto;border-top:1.5px solid}
.accordion button i:after{transform:rotate(90deg);transition:.25s}
.accordion .answer{display:grid;grid-template-rows:0fr;transition:.3s}
.accordion .answer p{overflow:hidden;color:var(--muted);padding-right:50px}
.accordion article.open .answer{grid-template-rows:1fr}
.accordion article.open .answer p{padding-bottom:26px}
.accordion article.open button i:after{transform:none}
.accordion a{color:var(--orange);text-decoration:underline}

/* ===== Legal shortcuts ===== */
.legal-shortcuts{background:var(--cream);display:flex;justify-content:center;gap:40px;padding:30px;font-weight:700}

/* ===== Support — app addresses ===== */
.picker{background:var(--cream)}
.picker .section-heading{max-width:850px;margin:0 auto 55px}
.support-card{max-width:850px;margin:auto;background:var(--paper);padding:45px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;border-radius:28px;box-shadow:var(--shadow)}
.support-card+.support-card{margin-top:24px}
.support-card h2{font-size:31px;margin:5px 0}
.support-card p{color:var(--muted)}
.mail-link{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;padding:15px 21px;border-radius:14px;font:700 14px/1 "Inter",sans-serif;transition:.25s}
.mail-link:hover{background:var(--navy-3)}
.general-support{max-width:850px;margin:60px auto 0;border-top:1px solid var(--line);padding-top:50px;display:flex;gap:28px}
.general-support>.ui-icon{width:32px;height:32px;flex:none;margin-top:3px;color:var(--orange)}
.general-support h2{font-size:30px;margin:10px 0}
.general-support p{color:var(--muted)}
.general-support a{color:var(--orange);font-weight:700}

/* ===== Legal index ===== */
.legal-index{background:var(--cream-2)}
.legal-card{display:grid;grid-template-columns:70px 1fr auto;gap:30px;align-items:center;padding:55px 0;border-top:1px solid var(--line)}
.legal-card:last-child{border-bottom:1px solid var(--line)}
.legal-card>span{color:var(--orange);font:700 13px "Sora"}
.legal-card h2{font-size:40px;margin:13px 0}
.legal-card p{color:var(--muted);max-width:650px}
.legal-card>i{font-style:normal;font-size:32px;transition:.25s}
.legal-card:hover>i{transform:translateX(8px)}

/* ===== Legal document ===== */
.legal-hero{background:var(--navy);color:#fff;padding:165px 0 85px}
.legal-hero h1{font-size:clamp(46px,6vw,70px);margin:20px 0}
.legal-hero p{color:rgba(255,255,255,.62);font-size:19px}
.legal-wrap{max-width:1040px}
.legal-document{background:var(--cream-2);padding:80px 0 120px}
.legal-document>.wrap{display:grid;grid-template-columns:190px 1fr;gap:75px;align-items:start}
.legal-toc{position:sticky;top:115px;display:flex;flex-direction:column;gap:11px;font-size:13px}
.legal-toc b{font-family:"Sora";margin-bottom:8px}
.legal-toc a{color:var(--muted)}
.legal-document article{min-width:0}
.legal-document article>p:first-of-type{font-size:18px;color:var(--ink)}
.legal-date{display:inline-block;background:#eee3d2;border-radius:8px;padding:7px 10px;margin:0 7px 15px 0;font-size:12px;font-weight:700}
.legal-document h2{font-size:29px;margin:55px 0 18px;padding-top:20px;scroll-margin-top:95px}
.legal-document h3{font-size:21px;margin:36px 0 14px;scroll-margin-top:95px}
.legal-document p{color:#4f5b68;margin:13px 0}
.legal-document ul,.legal-document ol{padding-left:23px;color:#4f5b68;margin:15px 0}
.legal-document li{margin:8px 0}
.legal-document a{color:var(--orange);text-decoration:underline}
.legal-document hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.legal-document table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;background:var(--paper)}
.legal-document th,.legal-document td{text-align:left;vertical-align:top;padding:13px 14px;border:1px solid var(--line)}
/* Appendix A is one table per app. Left to itself each sizes its label column to its
   own longest label, so the tables disagree down the page — pin it instead. */
.legal-document th:first-child,.legal-document td:first-child{width:240px}
.legal-document code{background:#eee7dc;border-radius:4px;padding:2px 5px;font-size:12px;overflow-wrap:anywhere}

/* ===== Footer ===== */
.site-footer{background:#061224;color:#fff;padding:70px 0 25px}
.footer-main{display:flex;justify-content:space-between;align-items:center;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-main p{color:rgba(255,255,255,.48)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:25px;color:rgba(255,255,255,.42);font-size:13px}
.footer-bottom nav{display:flex;gap:25px}
.footer-bottom a:hover{color:#fff}

/* ===== Responsive ===== */
@media(max-width:900px){.section{padding:85px 0}.home-hero-grid,.product-grid{grid-template-columns:minmax(0,1fr);text-align:center}.hero-copy,.product-copy,.phone-cluster{min-width:0;width:100%}.hero-copy p,.product-copy>p{margin-left:auto;margin-right:auto}.product-copy .app-icon{margin-left:auto;margin-right:auto}.product-copy>.play-badge{margin-left:auto;margin-right:auto}.hero-art{height:500px}.home-hero{padding-bottom:30px}.app-feature{grid-template-columns:1fr}.app-feature-art{min-height:500px}.principle-grid,.feature-grid{grid-template-columns:1fr 1fr}.standards{padding:85px 0}.standards-grid{grid-template-columns:1fr;gap:48px}.insights-grid{grid-template-columns:1fr;gap:55px}.widget-stage{grid-template-columns:1fr;gap:50px}.widget-style{padding:44px 34px}.style-grid{grid-template-columns:1fr;gap:32px}.phone-cluster{height:570px}.product-hero{padding-bottom:40px}.split-copy{grid-template-columns:1fr;gap:45px}.split-art{max-width:520px;width:100%;margin:0 auto}.faq-layout{grid-template-columns:1fr}.faq-aside{position:static}.product-links .wrap{grid-template-columns:1fr}.product-links a{border-right:0;border-bottom:1px solid var(--line)}.legal-document>.wrap{grid-template-columns:1fr}.legal-toc{position:static;display:none}}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}.desktop-nav{position:fixed;inset:78px 0 auto;background:var(--navy);padding:20px;display:flex;flex-direction:column;transform:translateY(-140%);transition:.3s;z-index:-1}.desktop-nav a{width:100%;text-align:center;padding:15px}.menu-open .desktop-nav{transform:none}.menu-toggle{display:block}.nav-item{width:100%}.nav-item>a{justify-content:center}.nav-drop{position:static;min-width:0;display:none;opacity:1;visibility:visible;transform:none;background:rgba(255,255,255,.06);box-shadow:none;border-radius:14px;padding:7px;margin-bottom:6px}.nav-drop:before{display:none}.nav-item.open .nav-drop{display:block}.nav-drop a{color:#fff;text-align:left;padding:11px;gap:12px}.nav-drop a:hover{background:rgba(255,255,255,.09);color:#fff}.nav-drop small{color:rgba(255,255,255,.6)}.home-hero{padding-top:135px}.home-hero-grid{gap:25px}.hero-copy h1{font-size:48px}.hero-copy p{font-size:17px}.hero-art{transform:scale(.82);margin:-35px 0}.note-a{left:-15px}.note-b{right:-20px}.app-feature-copy{padding:35px 25px}.app-feature+.app-feature{margin-top:22px}.support-card+.support-card{margin-top:16px}.app-feature-art{min-height:430px}.app-feature-art .phone{transform:scale(.87) translateY(65px)}.principles .section-heading{width:100%}.principle-grid,.feature-grid{grid-template-columns:1fr;gap:35px}.standards-list{grid-template-columns:1fr;gap:30px}.widget-points{grid-template-columns:1fr;gap:28px}.widget-style{padding:36px 24px;margin-top:55px}.closing-cta h2{font-size:39px}.product-hero{padding-top:130px}.product-copy{max-width:calc(100vw - 32px);overflow-wrap:anywhere}.product-copy h1{font-size:34px}.product-copy>p{max-width:100%;font-size:17px}.phone-cluster{transform:scale(.68);transform-origin:top center;margin:-40px 0 -145px;height:600px}.statement h2,.section-heading h2{font-size:38px}.screen-gallery{margin-right:-16px;padding:0 30px 45px 0}.screen-gallery figure:nth-child(even){transform:none}.plan-grid{grid-template-columns:1fr}.plan-grid article{padding:35px 25px}.product-links a{padding:28px 10px}.page-hero{padding-top:145px;min-height:540px}.faq-layout{gap:45px}.support-card{grid-template-columns:auto 1fr;padding:28px 20px}.support-card .app-icon{width:67px}.support-card .mail-link{grid-column:1/-1;justify-content:center;font-size:13px;overflow-wrap:anywhere}.footer-main,.footer-bottom{display:block}.footer-main p{margin-top:18px}.footer-bottom nav{flex-wrap:wrap;margin-top:18px;gap:15px 22px}.legal-card{grid-template-columns:40px 1fr}.legal-card>i{display:none}.legal-card h2{font-size:29px}.legal-document{padding-top:50px}.legal-document table{display:block;overflow-x:auto}.legal-document th:first-child,.legal-document td:first-child{width:auto}.legal-document h2{font-size:25px}.legal-shortcuts{gap:20px;font-size:14px}}
/* Phones: screenshots stand upright, the tilts are a wide-screen flourish. The cluster keeps its stagger. */
@media(max-width:640px){.hero-art .phone,.insights-art .phone,.insights-art.tilt-left .phone{transform:none}.phone-cluster .phone:first-child{transform:translateY(-22px)}.phone-cluster .phone:last-child{transform:translateY(38px)}}
@media(max-width:900px){.product-copy>.store-badges{justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,[data-stagger]>*{opacity:1;transform:none;transition:none}.menu-toggle span{transition:none}}

/* ===== Sticky store bar (mobile) ===== */
/* The hero badges are the page's conversion point, and on a phone they are gone after
   one swipe — so they return as a bar under the fixed 78px header. Built by main.js and
   kept out of the tab order above the breakpoint by display:none. Its surface is the
   scrolled header's, so the two read as one piece of chrome. It starts at 61px, overlapping
   the header's empty bottom strip and stacked over it, so the badges sit closer to the logo.
   Hidden with opacity and visibility rather than by sliding it behind the header: at the
   top of the page the header has no background of its own until .scrolled, so a bar
   parked up there shows straight through it. */
.store-bar{display:none;position:fixed;inset:61px 0 auto;z-index:51;padding:9px 0;background:rgba(8,22,43,.92);backdrop-filter:blur(16px);box-shadow:0 1px rgba(255,255,255,.08);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.store-bar .store-badges{flex-wrap:nowrap;justify-content:center;gap:8px;margin:0}
.store-bar .store-badge{width:auto;flex:1 1 0;min-width:0;max-width:170px}
@media(max-width:640px){.store-bar{display:block}.store-bar.is-stuck{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}.menu-open .store-bar{opacity:0;visibility:hidden;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.store-bar{transition:none}}

/* ===== Feature cards — phone layout ===== */
/* The icon reads as a label for the heading, so on a phone it sits beside it and the
   copy spans underneath. The desktop min-height goes with it, or each card keeps the
   height its stacked version needed. */
@media(max-width:640px){.feature-grid article{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;min-height:0;padding:28px 24px}.feature-grid .ui-icon{width:26px;height:26px;margin-bottom:0}.feature-grid h3{margin-bottom:0}.feature-grid p{grid-column:1/-1;margin-top:12px}}

/* Under ~378px two 184px badges stop fitting side by side and one wraps to a row of its
   own. Let the hero pair share the row the way the sticky bar's clone does. */
@media(max-width:640px){.product-copy>.store-badges,.hero-copy>.store-badges{flex-wrap:nowrap}.product-copy>.store-badges .store-badge,.hero-copy>.store-badges .store-badge{width:auto;flex:1 1 0;min-width:0;max-width:184px}}

/* ===== Product hero — phone order ===== */
/* On a phone the store buttons come first, above the app icon, so the download is the
   first thing in the hero rather than the last. Ordering only — the markup keeps the
   icon-first reading order it has everywhere else. */
@media(max-width:640px){.product-copy{display:flex;flex-direction:column}.product-copy>.store-badges{order:-1;margin:0 0 30px}}

/* ===== Plan cards — phone ===== */
/* The Pro card's own badge pair is dropped on a phone: the sticky bar is on screen by
   the time anyone reaches the plans, so it would be the same two buttons twice. */
@media(max-width:640px){.plan-grid .store-badges{display:none}}