/* BrandFlow OS, the marketing site (brandflowos.com), in the app's own language: docs/design/DESIGN.md.
   One accent (the logo's blue and its ramp), neutrals for structure, Geist, soft rectangles (10 controls, 16 cards,
   20 large surfaces), the app's real screens doing the decorating. Built by tools/dev/marketing-build.py. */
@font-face{font-family:"Geist";src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#101418; --muted:#616875; --faint:#8b929d; --line:#e5e7eb; --line2:#d3d7dd;
  --brand:#4266E3; --brand-dark:#2B3CE2; --grad:linear-gradient(139deg,#5C86E2 0%,#4266E3 50%,#2B3CE2 100%);
  /* the app's frame in its default display, hybrid (public/app.css, html[data-frame="ink"]): the navigation in ink on a
     light page; the island is a deep navy lit from the logo's corner, and the logo ramp is lifted a step on it */
  --frame:#12151b; --frame-ink:#f2f4f7; --frame-muted:#b3bac6; --frame-faint:#79818e; --frame-line:rgba(255,255,255,.08);
  --frame-hover:rgba(255,255,255,.07); --frame-field:rgba(255,255,255,.07); --frame-field-line:rgba(255,255,255,.1);
  --frame-paint:radial-gradient(60% 160% at 0% 0%,rgba(92,134,226,.22),transparent 60%),linear-gradient(100deg,#171c2a 0%,#11141c 50%,#0e1017 100%);
  --frame-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px -18px rgba(16,20,40,.55);
  --grad-lift:linear-gradient(139deg,#a9c0f7 0%,#86a3f2 50%,#7390ef 100%);
  --r-s:10px; --r-m:16px; --r-l:20px;
  --ease:cubic-bezier(.23,1,.32,1);
  --shot-shadow:0 1px 0 rgba(16,20,24,.04),0 24px 48px -24px rgba(16,20,24,.28),0 48px 96px -48px rgba(43,60,226,.18);
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
:lang(zh){--font:"Geist","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--card);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(zh) body{line-height:1.75;letter-spacing:.01em}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.025em;text-wrap:balance}
:lang(zh) :is(h1,h2,h3){letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere}   /* breaks at <wbr> and punctuation, never inside a word */
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-s)}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* the logo: the monogram, "Brand" in ink and "Flow" in the ramp, the "OS" badge (marketing/brand-lockup.html) */
.lockup{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:750;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.lockup svg{width:28px;height:28px;flex:none}
.lockup .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.osver{display:inline-block;border:1.4px solid var(--faint);border-radius:6px;padding:0 5px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.06em;line-height:1.55}

/* buttons: soft rectangles, the ramp on the one primary action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-s);border:1px solid var(--line2);background:var(--card);color:var(--ink);font:600 15.5px/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
.btn:hover{border-color:#b9bfc8}
.btn:active{transform:scale(.97)}
.btn.primary{border:0;background:var(--grad);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -12px rgba(43,60,226,.65)}
.btn.primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 30px -12px rgba(43,60,226,.75)}
.btn.small{min-height:38px;padding:0 14px;font-size:14.5px}
.btn svg{width:16px;height:16px}
.tlink{font-weight:600;text-decoration:none;color:var(--ink);border-bottom:1.5px solid rgba(66,102,227,.35);padding-bottom:1px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.tlink:hover{border-color:var(--brand);color:var(--brand)}

/* header and foot: the app's navigation in hybrid, an ink ISLAND floating on the light page 10 px from its edges (the
   app's sidebar and the shops' desktop bar, docs/design/DESIGN.md §5); its inside lines up with the page's 1 200 px */
:is(.top,.foot){width:min(1224px,100% - 20px);margin-inline:auto;border-radius:var(--r-l);background:var(--frame-paint);box-shadow:var(--frame-shadow);color:var(--frame-ink)}
:is(.top,.foot) .wrap{width:auto;margin:0;padding-inline:12px}
@media(max-width:640px){:is(.top,.foot) .wrap{padding-inline:6px}}
:is(.top,.foot) .lockup{color:var(--frame-ink)}
:is(.top,.foot) .lockup .grad{background:var(--grad-lift);-webkit-background-clip:text;background-clip:text}
:is(.top,.foot) .osver{border-color:var(--frame-faint);color:var(--frame-faint)}
.top{position:sticky;top:10px;z-index:50;margin-top:10px;transition:box-shadow .25s var(--ease)}
.top.moved{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 40px -16px rgba(16,20,40,.6)}
.top-in{display:flex;align-items:center;gap:20px;height:60px}
.nav{display:flex;gap:2px}
.nav a{padding:7px 12px;border-radius:var(--r-s);font-size:15px;font-weight:500;color:var(--frame-muted);text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:var(--frame-hover);color:var(--frame-ink)}
.top-end{margin-left:auto;display:flex;align-items:center;gap:12px}
/* the languages: a menu that holds eight as well as three, each language under its own name; a plain list in the phone menu */
.langs{position:relative}
.langs summary{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border:1px solid var(--frame-field-line);border-radius:var(--r-s);background:var(--frame-field);font-size:13.5px;font-weight:600;color:var(--frame-muted);cursor:pointer;list-style:none;user-select:none;transition:color .15s,border-color .15s}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover,.langs[open] summary{color:var(--frame-ink);border-color:rgba(255,255,255,.22)}
.langs summary svg{width:15px;height:15px;flex:none}
.langs summary svg:last-child{width:14px;height:14px;transition:transform .2s var(--ease)}
.langs[open] summary svg:last-child{transform:rotate(180deg)}
.langs-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:176px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 18px 40px -18px rgba(16,20,24,.28);transform-origin:top right;transition:opacity .16s var(--ease),transform .16s var(--ease)}
@starting-style{.langs[open] .langs-pop{opacity:0;transform:translateY(-4px) scale(.98)}}
.langs-pop a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:var(--r-s);font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none}
.langs-pop a:hover{background:var(--bg)}
.langs-pop a[aria-current]{font-weight:650}
.langs-pop a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.langs-list{display:flex;flex-wrap:wrap;gap:4px 18px}
.langs-list a{font-size:15px;font-weight:500;color:var(--frame-muted);text-decoration:none;padding:4px 0}
.langs-list a[aria-current]{color:var(--frame-ink);font-weight:650}
@media(prefers-reduced-motion:reduce){.langs-pop,.langs summary svg:last-child{transition:none}}
.login{padding:7px 10px;border-radius:var(--r-s);font-size:15px;font-weight:600;color:var(--frame-ink);text-decoration:none;transition:background .15s var(--ease)}
.login:hover{background:var(--frame-hover)}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--frame-field-line);border-radius:var(--r-s);background:var(--frame-field);color:var(--frame-ink);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:20px;height:20px}
.menu{display:none}
@media(max-width:920px){
  .nav,.top-end{display:none}
  .burger{display:inline-flex}
  .menu{display:block;max-height:0;overflow:hidden;transition:max-height .35s var(--ease);border-top:1px solid transparent}
  .menu.open{max-height:640px;border-top-color:var(--frame-line)}   /* room for eight languages on three lines */
  .menu-in{display:flex;flex-direction:column;padding-block:8px 18px}
  .menu-in > a:not(.btn){padding:13px 0;font-size:17px;font-weight:600;color:var(--frame-ink);text-decoration:none;border-bottom:1px solid var(--frame-line)}
  .menu-in .langs-list{margin:14px 0 16px}
  .menu-in .btn{margin-top:4px}
}

/* sections */
.sec{padding:112px 0}
.sec.tint{background:var(--bg)}
@media(max-width:760px){.sec{padding:76px 0}}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--brand);letter-spacing:.01em;margin-bottom:18px}
.kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad)}
.h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;max-width:18ch}
:lang(zh) .h2{line-height:1.25;max-width:20em}
.lead{margin-top:18px;font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:60ch}
.sec-head{margin-bottom:56px}

/* hero: the words on the left, the brand's desk on the right (the app in its default display, hybrid), the till in a
   phone over it on the RIGHT, so the menu and the first figures on the left stay in sight (his word of 22 October 2026) */
.hero{padding:72px 0 0;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--bg) 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em;max-width:13ch}
:lang(zh) .hero h1{line-height:1.2;letter-spacing:0;max-width:11em;font-size:clamp(34px,4.4vw,56px)}
.hero .lead{margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:18px;font-size:14.5px;color:var(--muted)}
.hero-art{position:relative;padding:8px 0 88px}
.shot{border-radius:var(--r-m);overflow:hidden;background:var(--card);box-shadow:var(--shot-shadow);border:1px solid rgba(16,20,24,.08)}
.hero-art .shot{width:118%;max-width:none}
.phone{position:absolute;right:0;bottom:24px;width:31%;min-width:150px;max-width:220px;border-radius:30px;padding:7px;background:var(--frame);box-shadow:0 30px 60px -24px rgba(16,20,24,.5)}
.phone img{border-radius:24px}
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero h1{max-width:16ch}
  .hero-art{padding-bottom:56px}
  .hero-art .shot{width:100%}
  .phone{right:-8px;bottom:0;width:30%}
}
@media(max-width:560px){.phone{display:none}.hero-art{padding-bottom:40px}}

/* facts under the hero */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:8px}
.fact{padding:22px 24px 26px 0}
.fact + .fact{padding-left:24px;border-left:1px solid var(--line)}
.fact b{display:block;font-size:15.5px;font-weight:650;text-wrap:balance}
.fact span{display:block;margin-top:4px;font-size:14.5px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){padding-left:0;border-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}.fact,.fact + .fact{padding-left:0;border-left:0}.fact + .fact{border-top:1px solid var(--line)}}

/* both sides of the counter */
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:32px 32px 0;display:flex;flex-direction:column;overflow:hidden}
.side h3{font-size:24px;line-height:1.2}
.side .who{font-size:13.5px;font-weight:600;color:var(--brand);margin-bottom:10px}
.side p{margin-top:10px;color:var(--muted)}
.ticks{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.22em;width:18px;height:18px;border-radius:50%;background:rgba(66,102,227,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.3 5.2-5.2' fill='none' stroke='%234266E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.side .shot{margin-top:auto;border-radius:12px 12px 0 0;border-bottom:0;box-shadow:0 -1px 0 rgba(16,20,24,.04),0 18px 40px -18px rgba(16,20,24,.25);transform:translateY(1px)}
@media(max-width:900px){.sides{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.side{padding:24px 20px 0}}

/* every trade: the set-up's question, a ring's characteristics over it */
.trade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.trade-list{margin-top:28px;display:grid;gap:14px}
.trade-list div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px}
.trade-list b{font-weight:650}
.trade-list span{color:var(--muted)}
.trade-art{position:relative;padding:0 0 120px 0}
.trade-art .back{width:100%}
.trade-art .front{position:absolute;right:-24px;bottom:0;width:72%}
@media(max-width:980px){.trade{grid-template-columns:minmax(0,1fr);gap:40px}.trade-art .front{right:0}}
@media(max-width:520px){.trade-list div{grid-template-columns:minmax(0,1fr);gap:2px}.trade-art{padding-bottom:0}.trade-art .front{position:static;width:100%;margin-top:16px}}

/* the work, one screen at a time */
.feat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:center}
.feat + .feat{margin-top:120px}
.feat.flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.feat.flip .feat-text{order:2}
.feat h3{font-size:clamp(26px,2.6vw,34px);line-height:1.12}
:lang(zh) .feat h3{line-height:1.3}
.feat-text p{margin-top:14px;color:var(--muted)}
@media(max-width:980px){.feat,.feat.flip{grid-template-columns:minmax(0,1fr);gap:32px}.feat.flip .feat-text{order:0}.feat + .feat{margin-top:88px}}

/* and the rest: plain rows, no cards */
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin-top:96px}
.more-item{padding:22px 0 26px;border-top:1px solid var(--line2)}
.more-item b{display:block;font-size:17px;font-weight:650}
.more-item span{display:block;margin-top:6px;font-size:15.5px;color:var(--muted);line-height:1.55}
@media(max-width:900px){.more{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media(max-width:560px){.more{grid-template-columns:minmax(0,1fr)}}

/* on the move: the app's ink, two phones */
.ink{background:var(--frame);color:var(--frame-ink)}
.ink .kicker{color:#9db2f5}
.ink .lead{color:var(--frame-muted)}
.move{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.move .ticks li::before{background-color:rgba(124,150,240,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.3 5.2-5.2' fill='none' stroke='%239db2f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.move .ticks li{color:var(--frame-ink)}
.phones{display:flex;justify-content:center;gap:28px;align-items:flex-start}
.phones .phone{position:static;width:46%;max-width:270px;min-width:0;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.phones .phone:last-child{margin-top:56px}
@media(max-width:980px){.move{grid-template-columns:minmax(0,1fr);gap:48px}}

/* prices */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 28px}
.plan.best{border:1.5px solid var(--brand);box-shadow:0 24px 48px -28px rgba(43,60,226,.45)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan h3{font-size:20px}
.badge{font-size:12.5px;font-weight:650;color:#fff;background:var(--grad);border-radius:6px;padding:3px 8px;line-height:1.3}
.plan .for{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5;min-height:3em}
.price{margin-top:22px;display:flex;align-items:baseline;gap:6px}
.price b{font-size:40px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:15px}
.plan .ticks{margin:22px 0 26px}
.plan .btn{margin-top:auto}
.plan-note{margin-top:22px;font-size:14.5px;color:var(--muted);max-width:80ch}
.shops{margin-top:56px;display:grid;grid-template-columns:minmax(0,4fr) repeat(2,minmax(0,3fr));gap:20px;align-items:stretch}
.shops-head h3{font-size:22px}
.shops-head p{margin-top:8px;color:var(--muted);font-size:15.5px}
.shop-plan{border:1px solid var(--line);border-radius:var(--r-m);padding:22px 24px;background:var(--card);display:flex;flex-direction:column;gap:6px}
.shop-plan b{font-size:16px}
.shop-plan .price{margin-top:4px}
.shop-plan .price b{font-size:28px;color:var(--ink)}
.shop-plan p{font-size:14.5px;color:var(--muted)}
.shop-plan .tlink{margin-top:auto;align-self:flex-start;font-size:15px}
@media(max-width:980px){.plans{grid-template-columns:minmax(0,1fr)}.plan .for{min-height:0}.shops{grid-template-columns:minmax(0,1fr)}}

/* questions */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
.qa{border-top:1px solid var(--line2)}
.qa details{border-bottom:1px solid var(--line2)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:18px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:22px;height:22px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 9l5 5 5-5' fill='none' stroke='%23616875' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(180deg)}
.qa details p{padding:0 40px 24px 0;color:var(--muted)}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr);gap:32px}}

/* the last call */
.end{padding:0 0 112px}
.end-box{border-radius:var(--r-l);padding:64px 56px;background:radial-gradient(60% 120% at 0% 0%,rgba(92,134,226,.22),transparent 60%),linear-gradient(160deg,#171c2a 0%,#11141c 46%,#0e1017 100%);color:var(--frame-ink);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.end-box::after{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(66,102,227,.45),transparent);pointer-events:none}
.end-box h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;max-width:20ch}
:lang(zh) .end-box h2{line-height:1.3}
.end-box p{margin-top:12px;color:var(--frame-muted)}
.end-box .cta-row{margin-top:0;position:relative;z-index:1}
.end-box .btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
@media(max-width:820px){.end-box{grid-template-columns:minmax(0,1fr);padding:44px 28px}}

/* foot */
.foot{margin-bottom:10px;padding:24px 0;font-size:14.5px;color:var(--frame-muted)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--frame-ink)}
.foot .langs{margin-left:auto}
.foot .langs-pop{top:auto;bottom:calc(100% + 8px);transform-origin:bottom right}
@media(max-width:640px){.foot .langs{margin-left:0}}

/* arrival: a short rise, once; nothing moves for those who asked for less motion */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rise{opacity:1;transform:none;transition:none}.btn,.menu{transition:none}}
@media print{.top,.menu,.end{display:none}}