/* ONLYAPPS studio site. Tokens = design/tokens.md (M3 neutral roles from seed #1F5FD6, material-color-utilities).
   App accent roles (--ap, --on-ap, --apc, --on-apc) are injected per page from app.json. */
/* Roboto Flex (SIL OFL 1.1, static/OFL-RobotoFlex.txt), latin subset, self-hosted: no third-party requests */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url(roboto-flex-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --surface:#FBF8FD; --on-surface:#1B1B1F; --on-surface-variant:#45464F;
  --outline:#757780; --outline-variant:#C5C6D0;
  --sc-lowest:#FFFFFF; --sc-low:#F5F3F7; --sc:#EFEDF1; --sc-high:#E9E7EC; --sc-highest:#E4E2E6;
  --inverse-surface:#303034; --inverse-on-surface:#F2F0F4;
  --bezel:#1B1B1F;
  --ap:#2158C3; --on-ap:#FFFFFF; --apc:#DAE2FF; --on-apc:#0040A0;
  --font:"Roboto Flex",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:999px;
  --pad:clamp(20px,5vw,48px); --max:1200px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --surface:#131316; --on-surface:#E4E2E6; --on-surface-variant:#C5C6D0;
  --outline:#8F909A; --outline-variant:#45464F;
  --sc-lowest:#0D0E11; --sc-low:#1B1B1F; --sc:#1F1F23; --sc-high:#292A2D; --sc-highest:#343438;
  --inverse-surface:#E4E2E6; --inverse-on-surface:#303034;
  --bezel:#000000;
  --ap:#B2C5FF; --on-ap:#002C72; --apc:#0040A0; --on-apc:#DAE2FF;
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --surface:#131316; --on-surface:#E4E2E6; --on-surface-variant:#C5C6D0;
  --outline:#8F909A; --outline-variant:#45464F;
  --sc-lowest:#0D0E11; --sc-low:#1B1B1F; --sc:#1F1F23; --sc-high:#292A2D; --sc-highest:#343438;
  --inverse-surface:#E4E2E6; --inverse-on-surface:#303034;
  --bezel:#000000;
  --ap:#B2C5FF; --on-ap:#002C72; --apc:#0040A0; --on-apc:#DAE2FF;
}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--on-surface);font-family:var(--font);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--on-surface);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--inverse-surface);color:var(--inverse-on-surface);
  padding:12px 16px;border-radius:var(--r-sm);font-weight:500}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type scale (M3): display / headline / title / body / label */
.display{font-size:clamp(36px,5.4vw,60px);line-height:1.08;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.headline{font-size:clamp(28px,3.4vw,40px);line-height:1.15;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.headline-s{font-size:24px;line-height:32px;font-weight:500}
.title-l{font-size:22px;line-height:28px;font-weight:500}
.title-m{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.01em}
.lede{font-size:clamp(18px,1.6vw,20px);line-height:1.5;color:var(--on-surface-variant);max-width:36em;text-wrap:pretty}
.body-s{font-size:13px;line-height:20px;color:var(--on-surface-variant)}
.muted{color:var(--on-surface-variant)}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid transparent}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:8px}
.wordmark{font-weight:640;font-size:20px;letter-spacing:.06em;text-decoration:none;padding:12px 0;
  font-variation-settings:"wdth" 100,"opsz" 20}
.nav{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-full);
  font-size:15px;font-weight:500;text-decoration:none;color:var(--on-surface-variant)}
.nav a:hover{background:var(--sc-high);color:var(--on-surface)}
.nav a[aria-current=page]{color:var(--on-surface);background:var(--sc-high)}
@media (max-width:420px){.nav a{padding:0 10px;font-size:14px}.wordmark{font-size:18px}}

/* sections */
main{display:block}
.sec{padding-block:clamp(56px,8vw,112px)}
.sec + .sec{padding-top:0}
.sec-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,48px);max-width:44em}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;
  border-radius:var(--r-full);font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;
  border:1px solid transparent;transition:background-color .2s,box-shadow .2s}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-filled{background:var(--inverse-surface);color:var(--inverse-on-surface)}
.btn-filled:hover{box-shadow:0 1px 3px rgba(0,0,0,.25)}
.btn-app{background:var(--ap);color:var(--on-ap)}
.btn-app:hover{box-shadow:0 1px 3px rgba(0,0,0,.25)}
.btn-outlined{border-color:var(--outline);color:var(--on-surface)}
.btn-outlined:hover{background:var(--sc-high)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:500;text-decoration:none}
.link-arrow svg{width:20px;height:20px;fill:currentColor}
.link-arrow:hover span{text-decoration:underline}
.soon{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:var(--r-full);
  background:var(--apc);color:var(--on-apc);font-weight:500;font-size:15px}
.badge{display:inline-block;line-height:0;padding:12px;margin:-12px}
.badge img{height:56px;width:auto}

/* chip (M3 assist chip, read-only) */
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid currentColor;font-size:14px;font-weight:500;line-height:1}
.chip-dot{width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px}

/* phone frame + stage */
.phone{width:var(--w,280px);aspect-ratio:9/20;background:var(--bezel);border-radius:calc(var(--w,280px)*.12);
  padding:calc(var(--w,280px)*.028);box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 32px -12px rgba(0,0,0,.28)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--w,280px)*.095)}
.stage{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--sc-high);
  display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(32px,5vw,56px);height:var(--h,560px)}
.stage-app{background:var(--apc)}
/* plate = top part of a phone rising from the bottom of a panel */
.plate{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--sc-high);
  display:flex;justify-content:center;align-items:flex-end;padding:clamp(28px,4vw,48px) 24px 0}
.plate .shot{width:var(--w,260px);background:var(--bezel);padding:calc(var(--w,260px)*.03) calc(var(--w,260px)*.03) 0;
  border-radius:calc(var(--w,260px)*.12) calc(var(--w,260px)*.12) 0 0}
.plate .shot img{border-radius:calc(var(--w,260px)*.095) calc(var(--w,260px)*.095) 0 0;width:100%}

/* hero */
.hero{display:grid;gap:clamp(32px,5vw,64px);align-items:center;grid-template-columns:1fr;padding-block:clamp(32px,6vw,80px)}
.hero .lede{margin-top:20px}
@media (min-width:900px){.hero{grid-template-columns:7fr 5fr}}
.hero .stage{--h:clamp(420px,46vw,600px)}
.hero .phone{--w:clamp(240px,24vw,300px)}

/* app card */
.cards{display:grid;gap:24px}
@media (min-width:900px){.cards.many{grid-template-columns:1fr 1fr}}
.card{display:grid;border-radius:var(--r-xl);overflow:hidden;background:var(--apc);color:var(--on-apc)}
.card-body{padding:clamp(24px,4vw,48px);display:grid;gap:16px;align-content:start}
.card-id{display:flex;align-items:center;gap:16px}
.card-id img{width:64px;height:64px;border-radius:16px}
.card .lede{color:inherit;opacity:.92}
.card .btns{margin-top:8px}
.card .plate{background:transparent;border-radius:0;padding-top:0}
.card .plate .shot{--w:220px}
@media (min-width:760px){.cards:not(.many) .card{grid-template-columns:1.2fr 1fr}
  .cards:not(.many) .card .plate{padding-top:48px}}
.after-cards{margin-top:20px}

/* steps (how we build) */
.steps{display:grid;gap:0;counter-reset:s}
.steps li{position:relative;padding:0 0 28px 64px;min-height:56px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--sc-high);font-weight:600;font-size:16px}
.steps li::after{content:"";position:absolute;left:19.5px;top:48px;bottom:8px;width:1px;background:var(--outline-variant)}
.steps li:last-child::after{display:none}
.steps p{margin-top:4px;color:var(--on-surface-variant)}
@media (min-width:900px){
  .steps.row{grid-template-columns:repeat(5,1fr);gap:24px}
  .steps.row li{padding:60px 0 0 0}
  .steps.row li::after{left:52px;right:-12px;top:20px;bottom:auto;width:auto;height:1px}
}
.principles{display:grid;gap:16px;margin-top:clamp(40px,6vw,72px)}
@media (min-width:760px){.principles ul{grid-template-columns:repeat(3,1fr)}}
.principles ul{display:grid;gap:16px}
.principles li{background:var(--sc-low);border-radius:var(--r-lg);padding:24px;display:grid;gap:8px;align-content:start}
.principles p{color:var(--on-surface-variant)}

/* contact tiles */
.tiles{display:grid;gap:16px}
@media (min-width:760px){.tiles{grid-template-columns:1fr 1fr}.tile-one{grid-column:1/-1;max-width:640px}}
.tile{background:var(--sc-low);border-radius:var(--r-lg);padding:24px;display:grid;gap:10px;align-content:start}
.tile p{color:var(--on-surface-variant)}
.tile a.mail{font-size:18px;font-weight:500;overflow-wrap:anywhere;color:var(--on-surface);min-height:32px;display:inline-block}

/* app page */
.app-id{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.app-id img{width:56px;height:56px;border-radius:14px}
.crumb{font-size:14px;color:var(--on-surface-variant);display:flex;gap:8px;align-items:center;min-height:48px}
.crumb a{color:inherit}
.facts{display:grid;gap:10px;margin-top:28px}
.check{display:flex;gap:12px;align-items:flex-start}
.check svg{width:24px;height:24px;fill:var(--ap);flex:none;margin-top:0}
.features{display:grid;gap:clamp(48px,7vw,96px)}
.feature{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
@media (min-width:900px){.feature{grid-template-columns:1fr 1fr}.feature:nth-child(even) .plate{order:-1}}
.feature .plate{--w:clamp(220px,22vw,260px);height:clamp(340px,34vw,420px);align-items:flex-start}
.feature ul{display:grid;gap:14px;margin-top:20px}
.feature li{color:var(--on-surface-variant)}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;margin:-4px;scrollbar-width:thin}
.strip figure{flex:none;width:clamp(180px,16vw,200px);scroll-snap-align:start}
.strip img{border-radius:20px;border:1px solid var(--outline-variant);background:var(--sc)}
.strip figcaption{margin-top:12px;font-size:14px;line-height:20px;font-weight:500}
.plans{display:grid;gap:16px}
@media (min-width:760px){.plans{grid-template-columns:1fr 1fr}}
.plan{border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);display:grid;gap:12px;align-content:start;background:var(--sc-low);border:1px solid var(--outline-variant)}
.plan.pro{background:var(--apc);color:var(--on-apc);border-color:transparent}
.plan p{font-size:17px}
.notes{display:grid;gap:12px;margin-top:28px;max-width:44em}
.notes li{color:var(--on-surface-variant)}
.faq{border-top:1px solid var(--outline-variant);max-width:52em}
.faq details{border-bottom:1px solid var(--outline-variant)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:64px;padding:12px 0;font-size:18px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:24px;height:24px;fill:currentColor;flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .a{padding:0 0 20px;color:var(--on-surface-variant);max-width:44em}
.faq .a a{color:var(--on-surface)}
.two{display:grid;gap:16px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr}}
.panel{background:var(--sc-low);border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);display:grid;gap:16px;align-content:start}
.panel ul{display:grid;gap:12px}
.panel li{color:var(--on-surface-variant)}
.links-inline{display:flex;flex-wrap:wrap;gap:4px 20px}
.links-inline a{display:inline-flex;align-items:center;min-height:44px}

/* document pages */
.doc{max-width:760px;padding-block:clamp(40px,7vw,96px)}
.doc h1{margin-bottom:16px}
.doc .lede{margin-bottom:8px}
.doc h2{margin:clamp(40px,5vw,56px) 0 12px}
.doc p + p{margin-top:16px}
.doc .prose p{color:var(--on-surface-variant);font-size:17px}
.doc .tiles{margin-top:32px}
.doc .tile h2{margin:0}
.doc .principles{margin-top:16px}
@media (min-width:760px){.doc .principles ul{grid-template-columns:1fr}}
.org{display:grid;gap:4px}
.list-links{display:grid;border-top:1px solid var(--outline-variant)}
.list-links a{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--outline-variant);text-decoration:none;font-weight:500}
.list-links a svg{width:20px;height:20px;fill:currentColor}
.list-links a:hover span{text-decoration:underline}

/* footer */
.foot{margin-top:clamp(56px,8vw,112px);border-top:1px solid var(--outline-variant);background:var(--sc-low)}
.foot .wrap{padding-block:40px 48px;display:grid;gap:20px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 4px;margin-left:-12px}
.foot nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;text-decoration:none;font-weight:500;font-size:15px}
.foot nav a:hover{text-decoration:underline}
.foot .wordmark{font-size:18px;padding:0}
.foot .tm{max-width:60em}
.app-tm{margin-top:clamp(40px,6vw,64px);max-width:60em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}