/* Offo marketing site (www.offo.ai). Same palette and type as the app. */

@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/caveat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/caveat-latin-600-normal.woff2) format("woff2")}

:root{
  --paper:#F3F5F7; --dot:#CBD3DD; --ink:#1B2230; --ai:#4E3AA8; --ai-soft:#ECE8FA; --chrome:#FFFFFF;
  --line:#D9DFE7; --muted:#5E6878; --postit:#FFE680; --postit-glue:#F4D65A; --postit-ink:#3B3322;
  --font:"Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;
  --radius:20px;
  --shadow:0 14px 34px -18px rgba(20,30,50,.28);
  --ios-blue:#007AFF;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#14171D; --dot:#262C36; --ink:#E8ECF2; --ai:#C2B4FF; --ai-soft:#231E3B; --chrome:#1C2129;
    --line:#2E3542; --muted:#9AA4B4; --shadow:0 14px 34px -18px rgba(0,0,0,.6); --ios-blue:#0A84FF;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.55;
  background-image:radial-gradient(var(--dot) 1.1px,transparent 1.4px);background-size:26px 26px}
img,svg{display:block}
a{color:inherit}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left))}
.wrap-narrow{max-width:820px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.hand{font-family:var(--hand);font-weight:600;color:var(--ai);font-size:1.16em;line-height:.9;letter-spacing:0;white-space:nowrap}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ai);margin-bottom:14px}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:13px;border:1px solid var(--line);
  background:var(--chrome);color:var(--ink);font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-lg{min-height:56px;padding:14px 26px;font-size:18px;border-radius:15px}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{border-radius:9px}
/* Offo's name, written in its own hand. */
.wordmark{font-family:var(--hand);font-weight:600;font-size:36px;line-height:1;letter-spacing:.01em;color:var(--ai)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{text-decoration:none;color:var(--muted);font-size:16px}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--chrome);color:var(--ink);cursor:pointer;place-items:center}
.menu-btn svg{width:22px;height:22px}

/* ---------------------------------------------------------------- hero */
.hero{padding:64px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr);gap:56px;align-items:center}
/* The headline is sized to its column so "A notebook that" always fits on one line. */
.hero-copy{container-type:inline-size}
.hero h1{font-size:clamp(40px,4.2vw,60px);font-size:clamp(36px,13.4cqi,78px);line-height:1.02;letter-spacing:-.03em;margin-bottom:24px}
.h1-line{white-space:nowrap}
.hero h1 .hand{display:block;margin-top:.08em}
.lede{font-size:clamp(19px,1.6vw,22px);color:var(--muted);max-width:32em;margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.fine{font-size:15px;color:var(--muted);text-wrap:balance}

/* The iPad and the notebook page inside it. Everything in the screen is sized in cqw,
   so the picture scales as one piece. The page stays light in dark mode, like paper. */
.ipad{position:relative;background:#16181D;border-radius:clamp(22px,3vw,40px);padding:clamp(10px,1.35vw,17px);
  box-shadow:0 50px 90px -40px rgba(20,30,50,.55),0 0 0 1.5px #2A2E36 inset}
@media (prefers-color-scheme: dark){
  .ipad{box-shadow:0 50px 90px -40px rgba(0,0,0,.7),0 0 0 1px #3A404B,0 0 0 1.5px #2A2E36 inset}
}
.ipad::before{content:"";position:absolute;left:50%;top:clamp(4px,.6vw,7px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2E333C}
.screen{position:relative;aspect-ratio:4/3;border-radius:clamp(12px,1.9vw,24px);overflow:hidden;background:#F7F8FA;container-type:inline-size;
  color:#1B2230;font-family:var(--font);color-scheme:light}
.screen::before{content:"";position:absolute;inset:0;background:radial-gradient(#C6CFDA 7%,transparent 9%) 0 0/2.3cqw 2.3cqw}

.s-top{position:absolute;left:2.2cqw;right:2.2cqw;top:2.2cqw;display:flex;justify-content:space-between;align-items:center}
.s-pill{display:inline-flex;align-items:center;gap:1.1cqw;background:#fff;border:1px solid #D9DFE7;border-radius:1.8cqw;padding:1cqw 1.5cqw;font-size:1.65cqw;
  box-shadow:0 .6cqw 2cqw rgba(20,30,50,.1)}
.s-title{font-weight:700}
.s-grid{width:2cqw;height:2cqw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2230' stroke-width='2'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;margin-right:.6cqw}
.s-saved{color:#5E6878;font-size:1.45cqw}
.s-credits{display:inline-flex;align-items:center;gap:.7cqw;border:1px solid #D9DFE7;border-radius:5cqw;padding:.45cqw 1.1cqw}
.s-credits i{width:.9cqw;height:.9cqw;border-radius:50%;background:#4E3AA8}
.s-credits b{font-weight:400;font-variant-numeric:tabular-nums}

.sketch{position:absolute;left:3.5cqw;top:12.5cqw;width:44cqw;height:auto;overflow:visible}
.sketch .ink path{stroke:#1B2230;stroke-width:3.3;transition:stroke .45s ease}
.sketch .ink .pip{stroke-width:7}
.selected .sketch .ink path{stroke:#4E3AA8}
.lasso{fill:none;stroke:#4E3AA8;stroke-width:1.7;stroke-linecap:round;opacity:0}
.s-caption{position:absolute;left:9.5cqw;top:41.2cqw;font-family:var(--hand);font-size:3.4cqw;line-height:1;color:#1B2230;transition:color .45s ease}
.selected .s-caption{color:#4E3AA8}

.s-reply{position:absolute;left:51.5cqw;top:12cqw;width:44.5cqw;margin:0;font-family:var(--hand);font-size:2.8cqw;line-height:1.2;color:#4E3AA8;white-space:pre-wrap}
.s-stickies{position:absolute;left:52.5cqw;top:44cqw;display:flex;gap:3cqw}
.s-sticky{width:18.5cqw;min-height:14cqw;margin:0;padding:3.2cqw 1.7cqw 1.5cqw;font-family:var(--hand);font-size:2.35cqw;line-height:1.1;color:#3B3322;
  background:linear-gradient(#F4D65A 0 1.9cqw,#FFE680 1.9cqw);border-radius:1px 1px 3px 3px;transform:rotate(var(--r));
  box-shadow:0 .2cqw .2cqw rgba(40,30,0,.08),0 1.8cqw 3cqw -1.8cqw rgba(60,45,0,.45)}

.s-tools{position:absolute;left:50%;bottom:2.2cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1.1cqw;background:#fff;border:1px solid #D9DFE7;
  border-radius:2cqw;padding:.9cqw 1.3cqw;box-shadow:0 .8cqw 2.6cqw rgba(20,30,50,.12)}
.s-tools i{display:block;width:4.2cqw;height:4.2cqw;border-radius:1.1cqw;background-position:center;background-size:2.5cqw;background-repeat:no-repeat}
.t-pen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.6L16.5 4.1a2 2 0 0 1 2.8 0l.6.6a2 2 0 0 1 0 2.8L8.6 18.8z'/%3E%3C/svg%3E")}
.t-eraser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2230' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20h12M5.5 14.5l8-8a2 2 0 0 1 2.8 0l2.2 2.2a2 2 0 0 1 0 2.8L12 18H8.5z'/%3E%3C/svg%3E")}
.t-lasso{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2230' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='3 2.4'%3E%3Cpath d='M12 4c5 0 8 2.5 8 5.5S16.5 15 12 15s-8-2.5-8-5.5S7 4 12 4z'/%3E%3C/svg%3E")}
.s-tools .t-pen{background-color:#1B2230}
.lassoing .s-tools .t-pen,.selected .s-tools .t-pen{background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2230' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.6L16.5 4.1a2 2 0 0 1 2.8 0l.6.6a2 2 0 0 1 0 2.8L8.6 18.8z'/%3E%3C/svg%3E")}
.lassoing .s-tools .t-lasso,.selected .s-tools .t-lasso{background-color:#1B2230;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='3 2.4'%3E%3Cpath d='M12 4c5 0 8 2.5 8 5.5S16.5 15 12 15s-8-2.5-8-5.5S7 4 12 4z'/%3E%3C/svg%3E")}
.t-sep{width:1px;height:3cqw;background:#D9DFE7;margin:0 .4cqw}
.s-tools .t-dot{width:2.2cqw;height:2.2cqw;border-radius:50%;margin:0 .5cqw}
.t-ink{background:#1B2230 !important;box-shadow:0 0 0 .35cqw #fff,0 0 0 .6cqw #1B2230}
.t-blue{background:#2A5FB0 !important}
.t-red{background:#C0392B !important}

/* Animation states, switched on by script.js. Without JavaScript the finished page shows.
   While script.js loads, the page is kept blank (with a fallback in case it never arrives). */
.demo-js .screen:not(.ready) :is(.sketch,.s-caption,.s-reply,.s-stickies){visibility:hidden;animation:show-late 0s 2.5s forwards}
@keyframes show-late{to{visibility:visible}}
.anim .sketch .ink path{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.anim.drawn .sketch .ink path{stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset .5s ease-in-out calc(var(--d) * .28s),opacity 0s linear calc(var(--d) * .28s),stroke .45s ease}
.anim .s-caption{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.anim.captioned .s-caption{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);transition:clip-path .9s ease-out,-webkit-clip-path .9s ease-out,color .45s ease}
.anim.lassoing .lasso{opacity:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation:lasso .9s ease-in-out forwards}
.anim.selected .lasso{opacity:1;stroke-dasharray:.012 .009;stroke-dashoffset:0;animation:none}
@keyframes lasso{to{stroke-dashoffset:0}}
.s-reply .c{opacity:0}
.s-reply .c.on{opacity:1;animation:bleed .8s ease-out both}
@keyframes bleed{from{opacity:0;text-shadow:0 0 .7cqw currentColor}to{opacity:1;text-shadow:0 0 0 transparent}}
.s-reply.waiting::before{content:"…";position:absolute;left:0;top:0;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.anim .s-sticky{opacity:0;transform:rotate(var(--r)) translateY(-1.2cqw) scale(1.06)}
.anim .s-sticky.on{opacity:1;transform:rotate(var(--r));transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.fading .s-reply,.fading .s-stickies{opacity:0;transition:opacity .3s ease}

.demo-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:22px}
html:not(.demo-js) .demo-chips{display:none}
.demo-label{color:var(--muted);font-size:15px;margin-right:4px}
.chip{border:1px solid var(--line);background:var(--chrome);color:var(--ink);font:inherit;font-size:16px;padding:9px 16px;border-radius:999px;cursor:pointer;min-height:44px;
  transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ai)}
.chip[aria-pressed="true"]{background:#4E3AA8;border-color:#4E3AA8;color:#fff}

/* ---------------------------------------------------------------- sections */
.section{padding:104px 0}
.section-tint{background:var(--chrome);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:760px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(32px,3.7vw,50px)}
.section-lede{margin-top:16px;color:var(--muted);font-size:20px}
.card{background:var(--chrome);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.section-tint .card{background:var(--paper);box-shadow:none}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step-n{display:block;font-family:var(--hand);font-weight:600;font-size:48px;line-height:1;color:var(--ai);margin-bottom:12px}
.step h3,.mode h3,.feature h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--muted)}

.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mode p{color:var(--muted);margin-top:16px}
.mode-chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:16px;font-weight:700;background:var(--chrome)}
.mode-chip-primary{background:#4E3AA8;border-color:#4E3AA8;color:#fff}
.hand-quote{margin:18px 0 0;font-family:var(--hand);font-size:27px;line-height:1.2;color:var(--ai)}
.modes-foot{max-width:720px;margin:40px auto 0;text-align:center;color:var(--muted);font-size:19px}
.mini-sticky{display:inline-block;font-family:var(--hand);font-size:1.3em;line-height:1.1;color:var(--postit-ink);background:linear-gradient(var(--postit-glue) 0 5px,var(--postit) 5px);
  padding:5px 10px 3px;transform:rotate(-2deg);box-shadow:0 6px 12px -8px rgba(60,45,0,.5)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px}
.feature svg{width:48px;height:48px;padding:11px;border-radius:14px;background:var(--ai-soft);fill:none;stroke:var(--ai);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.feature p{color:var(--muted)}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:880px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column}
.plan h3{font-size:22px}
.price{margin:10px 0 18px;display:flex;align-items:baseline;gap:4px}
.amount{font-size:48px;font-weight:700;letter-spacing:-.03em}
.per{color:var(--muted)}
.plan ul{list-style:none;margin:0 0 28px;padding:0;flex:1}
.plan li{position:relative;padding-left:30px;margin:10px 0;color:var(--muted)}
.plan li b{color:var(--ink)}
.plan li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--ai-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E3AA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.section-tint .plan-featured{border:2px solid var(--ai);background:var(--chrome);box-shadow:var(--shadow)}
.plan-name .wordmark{font-size:44px}
.section-tint .plan-extra{border-style:dashed}
.plan-foot{color:var(--muted);font-size:15px;text-align:center;margin-top:10px}
.price-fine{text-align:center;color:var(--muted);font-size:15px;margin-top:22px}
/* Tilts use `rotate`, which the scroll-in's `transform` doesn't reset. */
.credit-note{max-width:680px;margin:36px auto 0;padding:26px 28px 24px;color:var(--postit-ink);font-size:17px;
  background:linear-gradient(var(--postit-glue) 0 14px,var(--postit) 14px);rotate:-.6deg;box-shadow:0 18px 30px -20px rgba(60,45,0,.55);border-radius:2px 2px 4px 4px}
.hand-inline{font-family:var(--hand);font-weight:600;font-size:1.55em;margin-right:6px}

/* ---------------------------------------------------------------- meet Offo */
.meet{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.meet h2,.install h2{font-size:clamp(32px,3.7vw,50px)}
.meet .section-lede,.install .section-lede{margin-top:16px}
.traits{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.traits li{display:flex;gap:16px;align-items:flex-start}
.traits svg,.install-steps li::before{flex:none;width:44px;height:44px;border-radius:13px;background:var(--ai-soft)}
.traits svg{padding:10px;fill:none;stroke:var(--ai);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.traits p,.install-steps p{color:var(--muted);padding-top:8px}
.traits b,.install-steps b{color:var(--ink)}
/* A note from Offo on a scrap of the notebook's paper (light in dark mode too, like the demo). */
.offo-note{position:relative;margin:0 12px;padding:52px 40px 34px;background:#F7F8FA;color:#4E3AA8;border-radius:6px;rotate:1.8deg;color-scheme:light;
  background-image:radial-gradient(#C6CFDA 1.1px,transparent 1.3px);background-size:22px 22px;box-shadow:0 34px 60px -30px rgba(20,30,50,.5),0 0 0 1px #D9DFE7}
.offo-note::before{content:"";position:absolute;top:-15px;left:50%;width:128px;height:32px;margin-left:-64px;background:rgba(255,230,128,.9);rotate:-3deg;
  box-shadow:0 2px 5px rgba(60,45,0,.15)}
.offo-note blockquote{margin:0;font-family:var(--hand);font-weight:600;font-size:clamp(28px,2.7vw,37px);line-height:1.12}
.offo-note figcaption{margin-top:18px;text-align:right;font-family:var(--hand);font-weight:600;font-size:32px;line-height:1}
.offo-note figcaption::before{content:"— "}
.uses{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;margin-top:72px}
.uses-label{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.uses ul{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;list-style:none;margin:0;padding:0}
.uses li{font-family:var(--hand);font-weight:600;font-size:23px;line-height:1.1;color:var(--postit-ink);padding:12px 14px 7px;border-radius:1px 1px 3px 3px;
  background:linear-gradient(var(--postit-glue) 0 6px,var(--postit) 6px);box-shadow:0 10px 16px -12px rgba(60,45,0,.55)}
.uses li:nth-child(3n+1){rotate:-2deg}
.uses li:nth-child(3n+2){rotate:1.5deg}
.uses li:nth-child(3n){rotate:-.5deg}

/* ---------------------------------------------------------------- install (PWA) */
.install{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:72px;align-items:center}
.install-steps{list-style:none;counter-reset:step;margin:34px 0 0;padding:0;display:grid;gap:18px}
.install-steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start}
.install-steps li::before{content:counter(step);display:grid;place-items:center;font-family:var(--hand);font-weight:600;font-size:28px;line-height:1;color:var(--ai)}
.ios-icon{display:inline-block;width:22px;height:22px;vertical-align:-4px;margin:0 1px;fill:none;stroke:var(--ios-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Safari's share sheet with Add to Home Screen circled, and Offo on the Home Screen. */
.install-art{position:relative;max-width:440px;width:100%;margin:0 auto;padding-bottom:6px;color-scheme:light}
.sheet{background:#fff;color:#1B2230;border-radius:22px;padding:18px 0 6px;font-size:17px;box-shadow:0 40px 80px -40px rgba(20,30,50,.5),0 0 0 1px #D9DFE7}
.sheet-head{display:flex;align-items:center;gap:12px;padding:0 20px 16px;border-bottom:1px solid #E6EAF0}
.sheet-head img{border-radius:10px}
.sheet-head b{display:block;font-size:17px;line-height:1.3}
.sheet-head span{display:block;font-size:14px;color:#5E6878}
.sheet-rows{list-style:none;margin:0;padding:0 10px}
.sheet-rows li{position:relative;display:flex;align-items:center;gap:12px;padding:14px 10px;border-bottom:1px solid #EEF1F5}
.sheet-rows li:last-child{border-bottom:0}
.sheet-rows .ri{width:24px;height:24px;margin-left:auto;fill:none;stroke:#1B2230;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sheet-hit{font-weight:700}
.sheet-note{margin-left:auto;font-family:var(--hand);font-weight:600;font-size:24px;line-height:1;color:#4E3AA8;white-space:nowrap;rotate:-5deg}
.sheet-note + .ri{margin-left:0}
.sheet-lasso{position:absolute;left:-16px;right:-16px;top:-12px;bottom:-12px;width:calc(100% + 32px);height:calc(100% + 24px);overflow:visible;pointer-events:none}
.sheet-lasso path{fill:none;stroke:#4E3AA8;stroke-width:2;stroke-linecap:round;stroke-dasharray:.012 .009}
.js .install-art .sheet-lasso path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .install-art.in .sheet-lasso path{animation:circle-it 1s ease-in-out .5s forwards}
@keyframes circle-it{0%{stroke-dasharray:1 1;stroke-dashoffset:1}99%{stroke-dasharray:1 1;stroke-dashoffset:0}100%{stroke-dasharray:.012 .009;stroke-dashoffset:0}}
.home-tile{display:flex;gap:16px;width:max-content;margin:22px -8px 0 auto;padding:18px 20px 12px;border-radius:24px;rotate:-2.5deg;position:relative;
  background:linear-gradient(140deg,#8A78E0,#4E3AA8 55%,#33256F);box-shadow:0 26px 50px -26px rgba(30,20,80,.6)}
.home-tile span{display:flex;flex-direction:column;align-items:center;gap:6px}
.app-blank::before{content:"";width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.28)}
.app-blank::after{content:"";width:34px;height:7px;border-radius:4px;background:rgba(255,255,255,.3);margin-top:3px}
.app-offo img{border-radius:14px;box-shadow:0 4px 10px rgba(20,10,60,.35)}
.app-offo small{font-size:13px;line-height:1;color:#fff}
.pwa-perks{list-style:none;margin:72px 0 0;padding:32px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.pwa-perks li{color:var(--muted);font-size:17px}
.pwa-perks b{display:block;color:var(--ink);font-size:19px;margin-bottom:4px}

.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:20px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:62ch}

.final{padding:40px 0 110px}
.final-inner{text-align:center;padding:72px 24px;border-radius:32px;background:var(--ai-soft);border:1px solid color-mix(in srgb,var(--ai) 25%,transparent)}
.final h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:14px}
.final p{color:var(--muted);font-size:20px;margin-bottom:28px}

.footer{border-top:1px solid var(--line);padding:30px 0 calc(30px + env(safe-area-inset-bottom))}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer nav a,.copyright{color:var(--muted);font-size:15px;text-decoration:none}
.footer nav a:hover{color:var(--ink)}

/* 404 page */
.lost{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px 20px;text-align:center}
.lost h1{font-size:clamp(34px,5vw,56px)}
.lost-note{font-family:var(--hand);font-weight:600;font-size:32px;line-height:1.1;color:var(--ai);rotate:-2deg}

/* Scroll-in. Only hides things once script.js has marked the page as able to reveal them. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
  .js .install-art .sheet-lasso path,.js .install-art.in .sheet-lasso path{stroke-dasharray:.012 .009;stroke-dashoffset:0;animation:none}
}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1060px){
  .hero{padding-top:44px}
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-copy{text-align:center;width:100%;max-width:720px;margin:0 auto}
  .lede{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .hero-demo{max-width:820px;width:100%;margin:0 auto}
  .features{grid-template-columns:repeat(2,1fr)}
  .meet,.install{grid-template-columns:1fr;gap:56px}
  .meet-copy,.install-copy{max-width:720px}
  .offo-note{max-width:560px;margin:0 auto;width:calc(100% - 24px)}
  .pwa-perks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 880px){
  .menu-btn{display:grid}
  .nav-links{display:none;position:absolute;left:0;right:0;top:70px;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 4px;font-size:18px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr}
  .modes{grid-template-columns:1fr}
}
@media (max-width: 640px){
  body{font-size:17px}
  .section{padding:72px 0}
  .features{grid-template-columns:1fr;gap:30px}
  .plans{grid-template-columns:1fr}
  .card{padding:24px}
  .offo-note{padding:46px 26px 28px}
  .pwa-perks{grid-template-columns:1fr;gap:20px}
  .home-tile{gap:12px;padding:14px 16px 10px;margin-right:0}
  .app-blank::before,.app-offo img{width:48px;height:48px;border-radius:12px}
  .app-blank:first-child{display:none}
  .nav-cta .btn-primary{padding:10px 14px}
  .final-inner{padding:52px 20px}
}