/* ================================================================ landing.css — Auraz ERP public landing page ---------------------------------------------------------------- Source of truth: landing/DESIGN.md (tokens, bans, motion rules). Approved references: landing/refs/01-nav, 02-hero, m1-hero-mobile. Scope: marketing front page only — never the internal ERP app. ================================================================ */ /* ── Tokens (DESIGN.md §2) ─────────────────────────────────────── */ :root{ --void:#050505; --obsidian:#0B0E13; --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.03); --hairline:rgba(255,255,255,.04); --bone:#F4F5F7; --muted:#9BA3AF; --red:#C7312E; --red-deep:#A22323; --red-soft:#E2574E; --green:#3FB984; --green-soft:#6FCFA4; /* "included" badge text (AA at small sizes) */ --blue-pro:#8B7BD8; /* premium/special accent, owner-directed purple */ --blue-pro-soft:#B3A6EA;/* premium accent text on dark */ --r-card:1.5rem; --r-inner:calc(1.5rem - .375rem); --r-input:10px; --font-display:'Cabinet Grotesk',sans-serif; --font-body:'Satoshi',sans-serif; --font-mono:'JetBrains Mono',monospace; --ease:cubic-bezier(.32,.72,0,1); /* z-scale (systemic layers only): overlay < nav (burger stays reachable) < grain */ --z-overlay:200; --z-nav:250; --z-grain:300; } /* ── Base ──────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} /* scroll-padding-top is what makes an anchor land ON its section instead of underneath the bar. The nav is position:fixed and its pill ends 94px down, so without this every "Pricing" or "Get an App" click buried the first 94px of the section - heading included - behind the bar it was clicked from. One declaration on the root covers every anchor on every page, including the mobile menu and any deep link arriving with a hash already in the URL. */ html{scroll-behavior:smooth;overflow-x:clip;color-scheme:dark;scroll-padding-top:108px} @media (max-width:767px){ html{scroll-padding-top:74px} } body{ background:var(--void); color:var(--bone); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; } img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer} a{color:inherit;text-decoration:none} ::selection{background:rgba(199,49,46,.35);color:#fff} .wrap{width:min(1400px,92vw);margin:0 auto} /* focus rings — red, visible, keyboard-only */ :focus-visible{outline:2px solid var(--red-soft);outline-offset:3px;border-radius:6px} .btn:focus-visible,.nav-cta:focus-visible{outline-offset:2px;border-radius:999px} /* ── Ambient depth: red bloom + grain (fixed layers, DESIGN.md §2/§6) ── */ .bloom{ position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(52% 44% at 74% 18%, rgba(199,49,46,.08), transparent 62%), radial-gradient(40% 36% at 12% 88%, rgba(199,49,46,.04), transparent 60%); } .grain{ position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } main{position:relative;z-index:1} /* ── Type ──────────────────────────────────────────────────────── */ .display{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02} .eyebrow{ font-family:var(--font-mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--red-soft);font-weight:500; } .sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:46ch} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} /* ── Brand mark: real logo on its white tile (red-on-white lockup) ── */ .mark{ width:34px;height:34px;border-radius:10px;flex-shrink:0;overflow:hidden; background:#fff;padding:3px; display:inline-flex;align-items:center;justify-content:center; } .mark img{width:100%;height:100%;object-fit:contain} .wordmark{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--bone)} /* ── CTA family (DESIGN.md §4) ─────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:10px; border-radius:999px;padding:13px 26px; font-weight:700;font-size:15px;line-height:1; border:1px solid transparent;white-space:nowrap; transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn:active{transform:scale(.98)} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-deep)} .btn-red .chip{ width:26px;height:26px;border-radius:999px;display:inline-flex;flex-shrink:0; align-items:center;justify-content:center;background:rgba(255,255,255,.18); font-size:13px;margin-right:-8px; transition:transform .25s var(--ease); } .btn-red:hover .chip{transform:translate(2px,-1px)} .btn-ghost{background:transparent;color:var(--bone);border-color:var(--hairline)} .btn-ghost:hover{border-color:rgba(255,255,255,.28)} /* ── Double-bezel glass card (outer shell + inner core) ────────── */ .shell{ background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--r-card); padding:6px; box-shadow:0 30px 70px -40px rgba(0,0,0,.7); } .core{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)); border-radius:var(--r-inner); box-shadow:inset 0 1px 1px rgba(255,255,255,.045); height:100%; } /* ════════════════════════════════════════════════════════════════ NAV — floating glass pill (fixed; blur allowed here only) ════════════════════════════════════════════════════════════════ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); display:flex;justify-content:center; padding-top:24px;pointer-events:none; } .nav-pill{ pointer-events:auto; /* .wrap is min(1400px,92vw): the content underneath runs to 1400 while this bar stopped at 1080, so it was both narrower than the page and too small for what it carries. Matching .wrap lines the bar up with the content and buys 320px. */ width:min(1400px,92vw); display:flex;align-items:center;justify-content:space-between; padding:10px 12px 10px 18px;border-radius:999px; background:rgba(11,14,19,.62);border:1px solid var(--hairline); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -30px rgba(0,0,0,.8); } .nav-brand{display:flex;align-items:center;gap:11px} /* Every member of the bar is one 34px item box — the same height as the brand mark — so the plain links, the "Explore" trigger and the sign-in link share a single optical centre line. Before this the links were raw inline s inside block
  • s: their line box sat ~4.5px above the flex-centred trigger and the CTA pill, which is the ragged nav the owner saw. The `> li >` scoping matters: a bare `.nav-links a` would also hit the dropdown panel's own links and stretch them to 34px. */ .nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500;color:var(--muted);list-style:none} .nav-links>li{display:flex;align-items:center} .nav-links>li>a,.nav-drop-btn{ position:relative;display:inline-flex;align-items:center;gap:6px; height:34px;padding:0;line-height:1; background:none;border:none; font-family:inherit;font-size:14.5px;font-weight:500;color:var(--muted); transition:color .25s var(--ease); } .nav-links>li>a:hover,.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn, .nav-links>li>a[aria-current="true"],.nav-links>li>a[aria-current="page"], .nav-drop-btn[data-current]{color:var(--bone)} /* current-section dot: hung off the item box itself, 2px up from its bottom edge, which puts it ~4px under the descenders — the same gap on a plain link and on the disclosure trigger, because both now have the same 34px box. */ /* aria-current="page" is the correct value for a link to the page you are ON; "true" is the generic fallback the scroll-spy uses for a section. Both earn the dot, so a real page link is not silently unmarked. */ .nav-links>li>a[aria-current="true"]::after,.nav-links>li>a[aria-current="page"]::after, .nav-drop-btn[data-current]::after{ content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%); width:4px;height:4px;border-radius:999px;background:var(--red); } /* "Explore" disclosure — folds five destinations out of the bar (item 2e) */ .nav-drop{position:relative} .nav-drop-btn i{font-size:13px;transition:transform .25s var(--ease)} .nav-drop.open .nav-drop-btn i{transform:rotate(180deg)} /* Left-anchored to the trigger, not centred on it: -23px cancels the panel's 1px border, 10px padding and each row's 12px, so the menu text starts on the same x as the word "Explore". The 34px trigger box stops 18px short of the pill's bottom edge (the pill is sized by the taller CTA plus its own padding), so 28px clears the pill and still leaves a 10px gap under it. */ .nav-drop-panel{ position:absolute;top:calc(100% + 28px);left:-23px; min-width:224px;display:flex;flex-direction:column;gap:1px; padding:10px;border-radius:18px; background:rgba(11,14,19,.94);border:1px solid var(--hairline); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 30px 70px -30px rgba(0,0,0,.9); animation:navDropIn .22s var(--ease) both; } .nav-drop-panel[hidden]{display:none} /* display:flex must not defeat the hidden attribute */ @keyframes navDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .nav-drop-grp{ font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding:12px 12px 5px; } .nav-drop-grp:first-child{padding-top:4px} .nav-drop-panel a{ padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted); white-space:nowrap;transition:background .2s var(--ease), color .2s var(--ease); } .nav-drop-panel a:hover{background:rgba(255,255,255,.06);color:var(--bone)} /* "true" marks a SECTION the observer is watching; "page" marks a whole page, which is what the tracker is. Both mean "you are here" and both have to look it. */ .nav-drop-panel a[aria-current="true"], .nav-drop-panel a[aria-current="page"]{color:var(--bone);background:rgba(199,49,46,.15)} /* The account disclosure is the LAST thing in the pill, so a panel anchored to its left edge hangs off the pill. Anchor it to its right edge instead and it opens inward. */ #nav-acct .nav-drop-panel{left:auto;right:-23px} .nav-actions{display:flex;align-items:center;gap:10px} /* same 34px item box as the links, so hover/focus targets line up across the whole bar */ .nav-signin{ display:inline-flex;align-items:center;height:34px;padding:0 10px;line-height:1; font-size:14.5px;font-weight:500;color:var(--muted);transition:color .25s var(--ease); } .nav-signin:hover{color:var(--bone)} .nav .btn{padding:10px 20px;font-size:14px} /* hamburger (mobile only) — two lines that morph to an X */ .burger{ display:none;position:relative;width:44px;height:44px;flex-shrink:0; background:none;border:none;border-radius:999px; } .burger i{ position:absolute;left:12px;right:12px;top:21px;height:2px;border-radius:2px; background:var(--bone); transition:transform .35s var(--ease); /* transform-only morph (GPU-safe) */ } .burger i:nth-child(1){transform:translateY(-4px)} .burger i:nth-child(2){transform:translateY(3px)} .burger[aria-expanded="true"] i:nth-child(1){transform:rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){transform:rotate(-45deg)} /* mobile menu overlay — fixed, heavy blur allowed, staggered links */ /* This menu holds ELEVEN links plus a call to action. It was built as a statement — 44px display type, vertically centred — which is a design for four links, not eleven. Two things went wrong on a 390px phone: · the list is far taller than the screen, and a centred flex container overflows equally in BOTH directions, so the first item ("Product") was pushed above the top edge and could not be scrolled back to. The menu was missing an item. · it read as a takeover rather than a way to get somewhere. So: start the list at the top, let it scroll, and size the type for reading a list rather than for making a point. Each row still clears 44px. */ .menu{ position:fixed;inset:0;z-index:var(--z-overlay); display:flex;flex-direction:column;justify-content:flex-start; /* --nav-h is measured by setMenu() in site.js each time the menu opens, because the bar wraps to two rows on a narrow phone and one on a wide one. The fallback is the two-row height, so the first item is never hidden behind the bar if JS is late. */ padding:calc(var(--nav-h,118px) + 14px) clamp(20px,6vw,40px) calc(28px + env(safe-area-inset-bottom,0px)); overflow-y:auto;overscroll-behavior:contain; background:rgba(5,5,5,.82); backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px); opacity:0;visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s; } .menu.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)} /* Direct children only. `.menu a` also matched the Start free button inside .menu-cta, which is why the CTA rendered at 30px+ display weight and swallowed the bottom of the screen — it was inheriting the navigation's type scale. */ .menu>a{ font-family:var(--font-display);font-weight:700;letter-spacing:-.01em; font-size:clamp(18px,4.6vw,22px);color:var(--bone); padding:9px 0;min-height:44px;display:flex;align-items:center; border-bottom:1px solid rgba(255,255,255,.06); opacity:0;transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s var(--ease); } .menu>a:last-of-type{border-bottom:0} /* the CTA is a button, so it takes the button scale, not the heading scale */ .menu .menu-cta .btn{font-size:15px;font-weight:600;letter-spacing:0; font-family:var(--font-body,inherit);width:100%;justify-content:center} .menu>a:hover{color:var(--red-soft)} /* The bar's dot cannot help here — below its breakpoint .nav-links is display:none and this menu IS the navigation. The current-page marker is now a leading bar rather than the underline that sat beneath the old display-sized type: at list scale an underline competed with the row dividers. */ .menu>a[aria-current]{color:var(--red-soft)} .menu>a[aria-current]::before{content:"";width:3px;height:1.1em;margin-inline-end:10px; border-radius:2px;background:var(--red)} .menu.open a{opacity:1;transform:translateY(0)} .menu.open a:nth-child(1){transition-delay:.08s} .menu.open a:nth-child(2){transition-delay:.14s} .menu.open a:nth-child(3){transition-delay:.20s} .menu.open a:nth-child(4){transition-delay:.26s} .menu .menu-cta{margin-top:26px;opacity:0;transform:translateY(24px); transition:opacity .5s var(--ease) .32s, transform .5s var(--ease) .32s} .menu.open .menu-cta{opacity:1;transform:translateY(0)} /* ── Currency + language: in the bar on a desktop, in the menu on a phone ────── Both mounts are always in the DOM and always populated; only one is ever shown. Keeping them mounted rather than moved means neither currency.js nor i18n.js has to care about the viewport, and a change made in one is already correct in the other because they read the same stored preference. */ .menu .menu-prefs{display:none} @media (max-width:48rem){ /* The two chips that wrapped .nav-actions onto a second row. The bar is 118px on a 375px screen because of them — 14.5% of the first viewport, spent on controls almost nobody touches before they have read the headline. */ .nav-actions [data-cur-toggle], .nav-actions [data-lang-toggle]{display:none} .menu .menu-prefs{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10); opacity:0;transform:translateY(24px); transition:opacity .5s var(--ease) .28s, transform .5s var(--ease) .28s; } .menu.open .menu-prefs{opacity:1;transform:translateY(0)} } @media (max-width:48rem) and (prefers-reduced-motion:reduce){ .menu .menu-prefs{transition:none} } body.menu-locked{overflow:hidden} /* The floating "my app requests" button rides at z-index 9990, far above the overlay, so while the menu was open it sat on top of the Start free button — two red circles fighting over the same corner, one of them unreachable. The menu already links to My app requests, so the shortcut has nothing to offer while it is open. */ body.menu-locked #az-rq-fab{display:none} /* The consent bar outranks everything (z 9998) and is 180px tall at the bottom of the screen. Without room reserved for it, the menu's last links and its CTA sit underneath a panel that cannot be dismissed without answering it. */ body:has(#auraz-consent.in) .menu{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px))} /* ════════════════════════════════════════════════════════════════ HERO — editorial split 7/5 (ref board 02) ════════════════════════════════════════════════════════════════ */ .hero{ min-height:100dvh; display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center; padding-top:96px;padding-bottom:48px; } .hero-copy .eyebrow{display:block;margin-bottom:22px} .hero-copy h1{font-size:clamp(44px,4.6vw,72px);max-width:15ch;color:var(--bone)} .hero-copy .sub{margin:24px 0 34px} .hero-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* layered product visual: main frame + a slim receivables chip stacked above */ .hero-visual{position:relative;height:520px} .hv-frame{position:absolute;inset:auto 0 24px 36px;height:400px} .hv-frame .core{padding:22px;display:flex;flex-direction:column;gap:18px} .hv-back{ position:absolute;right:16px;top:0;width:56%; transform:rotate(2deg);opacity:.92; } .hv-back .core{padding:14px 18px 16px} .hv-back small{ display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin-bottom:6px; } .hv-head{display:flex;justify-content:space-between;align-items:center} .hv-head .t{font-weight:700;font-size:14.5px;color:var(--bone)} .hv-head .mono{font-size:11px;color:var(--muted)} .hv-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .hv-kpi{border:1px solid var(--hairline);border-radius:12px;padding:12px 14px} .hv-kpi small{display:block;font-size:10.5px;color:var(--muted);margin-bottom:6px} .hv-kpi b{font-family:var(--font-mono);font-size:17px;color:var(--bone)} .hv-kpi .up{color:var(--green);font-size:10.5px;margin-left:6px} .hv-chart{flex:1;border:1px solid var(--hairline);border-radius:12px;padding:14px;display:flex;flex-direction:column} .hv-chart-head{display:flex;justify-content:space-between;align-items:baseline} .hv-chart-head span{font-size:12px;color:var(--muted)} .hv-chart-head b{font-family:var(--font-mono);font-size:13px;color:var(--red-soft)} /* A baseline the bars stand ON, rather than floating above nothing. Low-contrast on purpose — it orients the eye without competing with the data. */ .hv-bars{flex:1;display:flex;align-items:flex-end;gap:7px;margin-top:10px; border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:1px} .hv-bars i{ flex:1;border-radius:5px 5px 2px 2px; /* The earlier months are quieter so the trend reads left-to-right as a rise rather than six equally loud bars. */ background:linear-gradient(180deg,rgba(199,49,46,.62),rgba(199,49,46,.16)); transform-origin:bottom; } /* The month the headline figure is about. One emphasis, not six. */ .hv-bars i.on{background:linear-gradient(180deg,var(--red-soft,#E2574E),rgba(199,49,46,.35))} .hv-axis{display:flex;gap:7px;margin-top:6px} .hv-axis span{flex:1;text-align:center;font-family:var(--font-mono); font-size:9px;letter-spacing:.04em;color:var(--muted);opacity:.75} .hv-axis span:last-child{color:var(--bone);opacity:1} .hv-recv{display:flex;justify-content:space-between;align-items:baseline} .hv-recv b{font-family:var(--font-mono);font-size:20px;color:var(--bone)} .hv-recv span{font-size:11px;color:var(--muted)} /* ── Entry motion: staggered fade-up on load (transform/opacity only) ── */ .rise{opacity:0;transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)} .rise.in{opacity:1;transform:translateY(0)} .hv-bars i{transform:scaleY(0);transition:transform .9s var(--ease)} .hero.in .hv-bars i{transform:scaleY(1)} .hero.in .hv-bars i:nth-child(1){transition-delay:.45s} .hero.in .hv-bars i:nth-child(2){transition-delay:.53s} .hero.in .hv-bars i:nth-child(3){transition-delay:.61s} .hero.in .hv-bars i:nth-child(4){transition-delay:.69s} .hero.in .hv-bars i:nth-child(5){transition-delay:.77s} .hero.in .hv-bars i:nth-child(6){transition-delay:.85s} /* generic scroll-reveal hook (IntersectionObserver) */ .reveal{opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)} .reveal.in{opacity:1;transform:translateY(0)} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s} .reveal.d5{transition-delay:.40s} /* ════════════════════════════════════════════════════════════════ SECTION SCAFFOLD — cinematic chapter rhythm (DESIGN.md §5) ════════════════════════════════════════════════════════════════ */ .sec{padding:clamp(6rem,10vw,10rem) 0} .band{background:var(--obsidian);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .sec-head{max-width:56ch;margin-bottom:38px} .sec-head h2{font-size:clamp(34px,3.4vw,52px);color:var(--bone)} .sec-head .sub{margin-top:14px} /* ════════════════════════════════════════════════════════════════ MODULES — gapless dense bento (ref board 03) ════════════════════════════════════════════════════════════════ */ .bento{ display:grid;gap:14px; grid-template-columns:repeat(12,1fr); grid-auto-rows:184px; grid-auto-flow:dense; } .cell{grid-column:span 4} .cell.w6{grid-column:span 6} .cell.h2{grid-row:span 2} .cell .core{padding:20px;display:flex;flex-direction:column;overflow:hidden} .cell h3{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--bone)} .cell p{font-size:13px;color:var(--muted);line-height:1.5;margin-top:6px;max-width:34ch} .cell .art{flex:1;margin-top:14px;min-height:0} /* haptic hover physics: lift + border warms toward the accent (GPU-safe) */ .cell{transition:transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease)} @media (hover:hover){ .cell:hover{ transform:translateY(-4px); border-color:rgba(199,49,46,.35); box-shadow:0 34px 80px -42px rgba(0,0,0,.85); } } /* card header row: title + ultra-light icon chip */ .cell-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .cix{ width:32px;height:32px;flex-shrink:0;border-radius:10px; border:1px solid var(--hairline); display:inline-flex;align-items:center;justify-content:center; color:var(--red-soft);font-size:17px; } /* Sales & POS: channel split chips */ .split{display:flex;gap:10px;margin-top:14px} .split-chip{flex:1;border:1px solid var(--hairline);border-radius:10px;padding:9px 12px} .split-chip small{display:block;font-size:10px;color:var(--muted);margin-bottom:4px} .split-chip b{font-family:var(--font-mono);font-size:13px;color:var(--bone);font-weight:500} /* Online storefront: mini browser chrome */ .store-chrome{ margin-top:auto;padding:10px 12px;border:1px solid var(--hairline);border-radius:12px; display:flex;align-items:center;justify-content:space-between;gap:12px; background:rgba(5,5,5,.35); } .store-url{ font-family:var(--font-mono);font-size:11px;color:var(--muted); border:1px solid var(--hairline);border-radius:999px;padding:5px 12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .store-tiles{display:flex;gap:6px;flex-shrink:0} .store-tiles i{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.10)} .store-tiles i:nth-child(2){background:rgba(199,49,46,.55)} /* Inventory: named stock meters, one flagged low */ .stock{display:flex;flex-direction:column;gap:9px;margin-top:12px} .stock-row{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted)} .stock-row span{width:86px;flex-shrink:0} .stock-row em{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.03);overflow:hidden} .stock-row em i{display:block;height:100%;border-radius:4px;background:rgba(255,255,255,.35)} .stock-row b{font-family:var(--font-mono);font-size:11.5px;color:var(--bone);font-weight:500;width:52px;text-align:right;flex-shrink:0} .stock-row.low em i{background:var(--red)} .stock-row.low b{color:var(--red-soft)} /* CRM: customer initial chips + note */ .crm-strip{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px} .crm-face{ width:26px;height:26px;border-radius:9px;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:9.5px;color:var(--bone); background:rgba(255,255,255,.08);border:1px solid var(--hairline); } .crm-face + .crm-face{margin-left:-12px} .crm-note{font-size:11.5px;color:var(--muted);margin-left:6px} /* The Reports card's green delta chips ("38.2% gross margin", "BHD 3,140 net cash") are gone, and their rules go with them rather than sitting here as dead weight for the next person to wonder about. .rep-deltas, .delta and .delta.up have no other user in the markup or in landing.js. */ .cell-grad .core{background:linear-gradient(150deg, rgba(199,49,46,.28), rgba(199,49,46,.04) 55%, rgba(255,255,255,.03))} .cell-pattern .core{ background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:14px 14px; } .cell-chart{border:1px solid var(--hairline);border-radius:12px;padding:14px;height:100%} .cell-chart .hv-bars{height:calc(100% - 4px);margin-top:0} .cell-rows{display:flex;flex-direction:column;gap:8px;margin-top:14px} .cell-rows i{height:9px;border-radius:5px;background:rgba(255,255,255,.09)} .cell-rows i:nth-child(1){width:88%} .cell-rows i:nth-child(2){width:64%;background:rgba(199,49,46,.5)} .cell-rows i:nth-child(3){width:76%} .cell-ledger{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:10px;line-height:1.8} .cell-ledger b{color:var(--bone);float:right;font-weight:500} /* bento bars don't wait for the hero flag — reveal drives them */ .bento .hv-bars i{transform:scaleY(1)} /* ════════════════════════════════════════════════════════════════ HOW IT WORKS — hairline-divided strip (no step numbers, verb-led) ════════════════════════════════════════════════════════════════ */ .how{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .how-item{padding:6px 34px 6px 26px;border-left:1px solid var(--hairline)} .how-item h3{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--bone)} .how-item p{font-size:14px;color:var(--muted);line-height:1.6;margin-top:10px;max-width:34ch} /* ════════════════════════════════════════════════════════════════ AI WORKFORCE — stage spotlight (ref board 04; the page's peak) ════════════════════════════════════════════════════════════════ */ .workforce{position:relative} .spot-glow{ position:absolute;inset:-10% -6%;pointer-events:none;z-index:-1; background: radial-gradient(46% 52% at 50% 26%, rgba(199,49,46,.13), transparent 64%), radial-gradient(30% 30% at 50% 108%, rgba(199,49,46,.05), transparent 60%); } .emp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .emp .core{padding:24px;display:flex;flex-direction:column;min-height:340px} .emp{transition:transform .7s var(--ease), border-color .7s var(--ease)} .emp.spot{transform:translateY(-16px);border-color:rgba(199,49,46,.45)} @media (hover:hover){ .emp:hover{transform:translateY(-4px);border-color:rgba(199,49,46,.35)} .emp.spot:hover{transform:translateY(-20px)} } .face{ width:52px;height:52px;border-radius:16px;margin-bottom:16px; display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff; background:linear-gradient(150deg,#E2574E,#A22323); } .emp h3{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--bone)} .role{font-size:13px;color:var(--red-soft);font-weight:500;margin-top:3px} .duty{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:12px;max-width:30ch} .emp-provides{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px} .emp-provides li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--bone);line-height:1.45} .emp-provides li i{color:var(--red-soft);font-size:14px;flex:none;margin-top:1px} .emp .foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between} .seat{font-family:var(--font-mono);font-size:13px;color:var(--bone)} .seat small{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px} .hire{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;border-radius:999px;padding:9px 22px; font-weight:700;font-size:13.5px; border:1px solid rgba(199,49,46,.55);background:rgba(199,49,46,.10);color:var(--red-soft); transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .hire:hover{background:rgba(199,49,46,.2)} .hire:active{transform:scale(.98)} .hire-fill{background:var(--red);border-color:var(--red);color:#fff} .hire-fill:hover{background:var(--red-deep);border-color:var(--red-deep)} .emp-note{margin-top:26px;font-size:12.5px;color:var(--muted)} /* ════════════════════════════════════════════════════════════════ PRICING — three tiers (ref board 05) ════════════════════════════════════════════════════════════════ */ .price-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:38px} .price-head h2{font-size:clamp(34px,3.4vw,52px);max-width:18ch} .bill{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding-bottom:8px} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* shell flexes and core grows with content — a fixed-height core would crush the expanding plan-details back to zero via flex-shrink */ .tier{display:flex;flex-direction:column} .tier .core{padding:26px;display:flex;flex-direction:column;min-height:420px;height:auto;flex:1} .tier h3{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--bone)} .who{font-size:12.5px;color:var(--muted);margin-top:4px;min-height:38px} .price{margin:18px 0 6px;font-family:var(--font-mono);font-size:34px;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums} .price-sub{display:block;font-family:var(--font-body,inherit);font-size:12px;color:var(--muted);letter-spacing:0;text-transform:none;margin-top:4px} /* monthly / yearly billing toggle (item 2) */ .bill-toggle{display:inline-flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:4px} .bill-opt{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)} .bill-opt.on{background:var(--red);color:#fff} .bill-save{font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--red-soft);background:rgba(199,49,46,.05);border-radius:999px;padding:2px 7px} .bill-opt.on .bill-save{color:#fff;background:rgba(255,255,255,.22)} /* plan comparison checklist (item 4) */ .plan-compare{margin-top:34px;background:var(--card,rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:22px 24px;animation:pcIn .3s var(--ease) both} @keyframes pcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .pc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px} .pc-head h3{font-size:clamp(22px,2.2vw,30px)} .pc-close{border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;border-radius:999px;padding:7px 15px;cursor:pointer} .pc-close:hover{color:var(--bone);border-color:rgba(255,255,255,.3)} .pc-scroll{overflow-x:auto} .pc-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px} .pc-table th[scope=col]{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--bone);text-align:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.14)} .pc-table th[scope=col].pc-rec{color:var(--red-soft)} .pc-table th[scope=row]{text-align:left;font-weight:500;color:var(--muted);padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.06)} .pc-table td{text-align:center;padding:11px 12px;color:var(--bone);border-bottom:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums} .pc-table td.pc-rec{background:rgba(199,49,46,.06)} .pc-table td.y{color:var(--green,#3bb97a);font-size:16px} .pc-table td.n{color:rgba(255,255,255,.28)} .pc-table tbody tr:hover th[scope=row]{color:var(--bone)} .price small{font-size:12px;color:var(--muted);font-weight:400} .feat{list-style:none;margin:14px 0 4px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--muted)} .feat li::before{content:"";display:inline-block;width:14px;height:2px;background:var(--red);border-radius:2px;margin-right:10px;vertical-align:middle;opacity:.85} .tier .btn{margin-top:auto;justify-content:center} /* AI chat indicator — identical on every plan (all tiers include it) */ .ai-chip{ display:inline-flex;align-items:center;gap:7px;align-self:flex-start; margin-top:14px;border-radius:999px;padding:6px 12px; font-size:12px;font-weight:600;color:var(--bone); background:rgba(255,255,255,.05);border:1px solid var(--hairline); } .ai-chip i{color:var(--red-soft);font-size:14px} /* highlight badges — green = included with plan, blue = premium/advanced (badge palette extension sanctioned by the owner for scannability) */ .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .pill{ display:inline-flex;align-items:center;gap:7px;border-radius:999px; padding:6px 12px;font-size:12px;font-weight:600; } .pill i{font-size:14px} .pill-inc{color:var(--green-soft);background:rgba(63,185,132,.10);border:1px solid rgba(63,185,132,.3)} .pill-pro{color:var(--blue-pro-soft);background:rgba(139,123,216,.12);border:1px solid rgba(139,123,216,.38)} /* top tier — "Most powerful", premium blue treatment mirroring .rec */ .tier.top{position:relative;border-color:rgba(139,123,216,.45)} .tier.top::after{ content:"Most powerful";position:absolute;top:-11px;left:26px; font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:var(--blue-pro);padding:4px 12px;border-radius:999px; } .tier.top .core{background:linear-gradient(180deg, rgba(139,123,216,.10), rgba(139,123,216,.02) 55%, rgba(255,255,255,.03))} @media (hover:hover){ .tier.top:hover{border-color:rgba(139,123,216,.6)} } /* expandable plan details — grid-rows + opacity disclosure (height animation sanctioned by the owner for this control) */ .plan-toggle{ display:inline-flex;align-items:center;gap:7px;align-self:flex-start; margin:10px 0;background:none;border:none;padding:8px 0;min-height:44px; font-size:12.5px;font-weight:700;color:var(--red-soft); } .plan-toggle:hover{color:var(--bone)} .plan-toggle i{font-size:14px;transition:transform .35s var(--ease)} .tier.open .plan-toggle i{transform:rotate(180deg)} /* capped max-height, not grid-rows 0fr/1fr: the fr trick resolves to a zero track when the grid is a flex item in a column flexbox (Chrome) */ .plan-details{ max-height:0;overflow:hidden;opacity:0; transition:max-height .5s var(--ease), opacity .45s var(--ease); } .tier.open .plan-details{max-height:420px;opacity:1} .feat-full{margin:2px 0 16px;font-size:12.5px;gap:8px} .feat-full li::before{background:rgba(255,255,255,.28)} .tier{transition:transform .7s var(--ease), border-color .7s var(--ease)} @media (hover:hover){ .tier:hover{transform:translateY(-4px);border-color:rgba(199,49,46,.3)} } .rec{position:relative;border-color:rgba(199,49,46,.45)} .rec::after{ content:"Most popular";position:absolute;top:-11px;left:26px; font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:var(--red);padding:4px 12px;border-radius:999px; } .rec .core{background:linear-gradient(180deg, rgba(199,49,46,.13), rgba(199,49,46,.03) 55%, rgba(255,255,255,.03))} /* ════════════════════════════════════════════════════════════════ SIGNUP — the ONE centered moment; motion deliberately restrained ════════════════════════════════════════════════════════════════ */ .signup{display:flex;flex-direction:column;align-items:center;text-align:center} .signup-head h2{font-size:clamp(36px,4vw,58px);max-width:16ch;margin:0 auto} .signup-head .sub{margin:16px auto 0;text-align:center} .form-shell{width:min(460px,100%);margin-top:36px;text-align:left} .form-core{padding:26px} .mode{ display:flex;gap:4px;padding:4px;border:1px solid var(--hairline);border-radius:999px; margin-bottom:8px; } .mode-btn{ flex:1;min-height:44px;border:none;border-radius:999px;background:transparent; font-weight:700;font-size:13.5px;color:var(--muted); transition:background .25s var(--ease), color .25s var(--ease); } .mode-btn.on{background:rgba(255,255,255,.08);color:var(--bone)} .field{display:flex;flex-direction:column;gap:6px;margin-top:18px} .field[hidden]{display:none} /* display:flex must not defeat the hidden attribute */ .field label{font-size:13px;font-weight:700;color:var(--bone)} .field input{ min-height:44px;padding:11px 14px;font-size:14.5px;font-family:var(--font-body); color:var(--bone);background:rgba(5,5,5,.4); border:1.5px solid var(--hairline);border-radius:var(--r-input); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .field input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(199,49,46,.22)} /* Autofill repaints a field in the browser's own light palette, and it beats a plain background declaration. Sign-in and signup fields are MEANT to be filled, so on a dark page the repaint is not a maybe. Solid #080A0E rather than the field's own rgba(5,5,5,.4), which an inset shadow cannot reproduce. The inset shadow is the only thing that overrides it in WebKit; the long transition stops the pale flash before it lands. */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field input:-webkit-autofill:active{ -webkit-text-fill-color:var(--bone); -webkit-box-shadow:0 0 0 1000px #080A0E inset; box-shadow:0 0 0 1000px #080A0E inset; caret-color:var(--bone); transition:background-color 100000s ease-in-out 0s; } /* The standard selector, kept in its OWN block: a browser that does not know :autofill drops the whole rule it appears in, which would take the -webkit- fallback above down with it. */ .field input:autofill{ box-shadow:0 0 0 1000px #080A0E inset; -webkit-text-fill-color:var(--bone); caret-color:var(--bone); } .hint{font-size:11.5px;color:var(--muted)} .err{display:none;font-size:12px;color:#E07069;font-weight:500} .field.bad .err{display:block} .field.bad input{border-color:rgba(224,112,105,.75)} .form-submit{width:100%;justify-content:center;margin-top:24px;position:relative;overflow:hidden} .form-submit.loading{pointer-events:none;opacity:.88} .form-submit.loading::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28), transparent 70%); transform:translateX(-100%); animation:sheen 1.1s var(--ease) infinite; } @keyframes sheen{to{transform:translateX(100%)}} .fine{margin-top:14px;font-size:11.5px;color:var(--muted);text-align:center} /* ── Google auth (UI only until OAuth credentials are configured) ── */ .btn-google{ position:relative; width:100%;justify-content:center;gap:10px; background:rgba(255,255,255,.06);border-color:var(--hairline);color:var(--bone); } .btn-google:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09)} .btn-google svg{width:18px;height:18px;flex-shrink:0} /* Busy state: spinner is absolutely positioned so the label never reflows and the button keeps a stable size instead of jumping when it is clicked repeatedly. */ .btn-google.loading{opacity:.72;pointer-events:none} .btn-google.loading::after{content:"";position:absolute;right:16px;top:50%;width:15px;height:15px;margin-top:-8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:aurazspin .7s linear infinite} @keyframes aurazspin{to{transform:rotate(360deg)}} .or-div{ display:flex;align-items:center;gap:12px;margin-top:18px; color:var(--muted);font-family:var(--font-mono);font-size:10.5px; letter-spacing:.12em;text-transform:uppercase; } .or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--hairline)} .auth-note{ display:none;margin-top:12px;padding:10px 12px;border-radius:var(--r-input); font-size:12px;color:var(--blue-pro-soft); background:rgba(139,123,216,.1);border:1px solid rgba(139,123,216,.35); } .auth-note.show{display:block} /* ════════════════════════════════════════════════════════════════ ONBOARDING WIZARD (onboarding.html) — calm, transactional ════════════════════════════════════════════════════════════════ */ .wiz{max-width:600px;margin:0 auto;padding:64px 0 90px} .wiz-brand{display:flex;justify-content:center;margin-bottom:26px} .wiz-head{text-align:center;margin-bottom:22px} .wiz-head h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(26px,3.2vw,38px);color:var(--bone)} .wiz-head p{font-size:14px;color:var(--muted);margin-top:8px} .steps{display:flex;justify-content:center;gap:18px;margin-bottom:26px;flex-wrap:wrap} .sdot{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--muted)} .sdot i{ width:26px;height:26px;border-radius:999px;flex-shrink:0;font-style:normal; display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:11px; border:1px solid var(--hairline);color:var(--muted); transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .sdot.on{color:var(--bone)} .sdot.on i{background:var(--red);border-color:var(--red);color:#fff} .sdot.done i{border-color:rgba(63,185,132,.55);color:var(--green-soft)} .wiz-pane{display:none} .wiz-pane.on{display:block;animation:paneIn .35s var(--ease)} @keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px} .wiz-nav .btn{min-width:130px;justify-content:center} .wiz-note{margin-top:14px;font-size:11.5px;color:var(--muted);text-align:center} /* plan pickers (step 2) — selectable tiles. gap clears the -11px "Most popular" / "Most powerful" ribbons that overhang each card's top edge. */ .picks{display:flex;flex-direction:column;gap:26px} .pick{cursor:pointer;text-align:left;width:100%;background:none;font-family:inherit} .pick .core{padding:16px 18px;display:flex;flex-direction:column;gap:8px} .pick-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .pick h3{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--bone)} .pick .pprice{font-family:var(--font-mono);font-size:16px;color:var(--bone);font-variant-numeric:tabular-nums} .pick .pprice small{font-size:10.5px;color:var(--muted)} .pick .pwho{font-size:12px;color:var(--muted)} .pick .pills{margin-top:2px} .pick{transition:border-color .3s var(--ease), transform .3s var(--ease)} .pick.sel{border-color:rgba(199,49,46,.55)} .pick.sel .core{background:linear-gradient(180deg, rgba(199,49,46,.12), rgba(199,49,46,.02) 60%, rgba(255,255,255,.03))} .pick .tick{ width:22px;height:22px;border-radius:999px;flex-shrink:0;align-self:center; border:1.5px solid var(--hairline);display:flex;align-items:center;justify-content:center; color:transparent;font-size:12px; } .pick.sel .tick{background:var(--red);border-color:var(--red);color:#fff} .pick-top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between} /* Selects share the input recipe. `.ga-select` (the app-configurator language picker) is named here rather than carrying its own copy: it used to declare a near-identical block at lower specificity, so `.field select` won font-size and it rendered a different size from the block it was authored to match. One recipe, one size, no drift. */ .field select,.ga-select{ min-height:44px;padding:11px 40px 11px 14px;font-size:14.5px;font-family:var(--font-body); color:var(--bone);background:rgba(5,5,5,.4); border:1.5px solid var(--hairline);border-radius:var(--r-input); appearance:none;-webkit-appearance:none; /* the popup list is drawn by the OS, not by us — without a declared scheme it can come back light-on-white and the option rows are unreadable on this dark page */ color-scheme:dark; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA3AF' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .field select:focus,.ga-select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(199,49,46,.22)} .field select:invalid{color:var(--muted)} .field select option,.ga-select option{ font-family:var(--font-body);font-size:14px;background:#0B0E13;color:var(--bone); } .field select option:disabled,.ga-select option:disabled{color:var(--muted)} /* phone: flag + dial-code dropdown + number (structured collection) */ .phone-row{display:grid;grid-template-columns:28px 150px 1fr;gap:10px;align-items:center} @media (max-width: 560px){ .phone-row{grid-template-columns:26px 118px 1fr;gap:8px} } .dial-flag{width:26px;height:18px;border-radius:3px;overflow:hidden;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .dial-flag svg{display:block;width:100%;height:100%} /* shared optional-marker */ .opt{color:var(--muted);font-weight:400} /* logo upload (branding) */ .logo-up{display:flex;align-items:center;gap:14px} .logo-prev{width:58px;height:58px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;overflow:hidden; background:rgba(5,5,5,.4);border:1.5px solid var(--hairline);color:var(--muted);font-size:22px} .logo-prev img{width:100%;height:100%;object-fit:cover} .logo-side{display:flex;flex-direction:column;gap:6px;min-width:0} .logo-btns{display:flex;align-items:center;gap:12px} .btn-sm{font-size:12.5px;padding:8px 14px} .logo-clear{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--red-soft);cursor:pointer} .logo-clear:hover{color:var(--bone)} /* branch location: online-only toggle */ .remote-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);margin:2px 0} .remote-check input{width:16px;height:16px;accent-color:var(--red);flex-shrink:0;cursor:pointer} .field input[disabled]{opacity:.5;cursor:not-allowed} /* plan cards: emphasis badges (Most popular = brand red, Most powerful = purple) */ .pick{position:relative;overflow:visible} .plan-badge{position:absolute;top:-11px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:5px; padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap} .plan-badge i{font-size:12px} .pop-badge{color:#fff;background:var(--red);box-shadow:0 6px 16px -6px rgba(199,49,46,.7)} .power-badge{color:#fff;background:#7C6BD0;box-shadow:0 6px 16px -6px rgba(124,107,208,.7)} /* resting emphasis (before selection) */ .pick.pop{border-color:rgba(199,49,46,.42)} .pick.pop .core{background:linear-gradient(180deg, rgba(199,49,46,.06), rgba(255,255,255,.02))} .pick.power{border-color:rgba(139,123,216,.42)} .pick.power .core{background:linear-gradient(180deg, rgba(139,123,216,.07), rgba(255,255,255,.02))} /* selection still wins, keeping each card's own hue */ .pick.power.sel{border-color:rgba(139,123,216,.7)} .pick.power.sel .core{background:linear-gradient(180deg, rgba(139,123,216,.16), rgba(139,123,216,.03) 60%, rgba(255,255,255,.03))} .pick.power.sel .tick{background:#7C6BD0;border-color:#7C6BD0} /* tag input: type + Enter -> removable chips (forecast categories) */ .tagbox{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; min-height:44px;padding:8px 10px; background:rgba(5,5,5,.4); border:1.5px solid var(--hairline);border-radius:var(--r-input); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .tagbox:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(199,49,46,.22)} .tagbox input{ flex:1;min-width:150px;min-height:28px; border:none;background:none;outline:none; color:var(--bone);font-family:inherit;font-size:14px; } .tag{ display:inline-flex;align-items:center;gap:7px; padding:5px 7px 5px 12px;border-radius:999px; font-size:12.5px;font-weight:600; color:var(--blue-pro-soft);background:rgba(139,123,216,.12); border:1px solid rgba(139,123,216,.38); } .tag button{ width:18px;height:18px;border-radius:999px;flex-shrink:0; border:none;padding:0;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.12);color:inherit;font-size:12px;line-height:1; cursor:pointer;transition:background .2s var(--ease); } .tag button:hover{background:rgba(255,255,255,.24)} .frow2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width: 560px){ .frow2{grid-template-columns:1fr} } /* review (step 4) */ .rev{border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;margin-top:12px} .rev-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .rev-head b{font-family:var(--font-display);font-size:14px;color:var(--bone)} .rev-edit{background:none;border:none;padding:4px 0;font-size:12px;font-weight:700;color:var(--red-soft);cursor:pointer} .rev-edit:hover{color:var(--bone)} .rev dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:12.5px} .rev dt{color:var(--muted)} .rev dd{color:var(--bone);text-align:right} .rev .flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .rev-feat{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)} .rev-feat li::before{content:"";display:inline-block;width:12px;height:2px;background:var(--red);border-radius:2px;margin-right:9px;vertical-align:middle;opacity:.85} /* success pane */ .done-icon{ width:56px;height:56px;border-radius:999px;margin:6px auto 18px; display:flex;align-items:center;justify-content:center;font-size:26px; background:rgba(63,185,132,.12);border:1px solid rgba(63,185,132,.4);color:var(--green-soft); } .wiz-done{text-align:center} .wiz-done h2{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--bone)} .wiz-done p{font-size:13.5px;color:var(--muted);margin:10px auto 0;max-width:40ch} .wiz-done .btn{margin-top:22px} /* ════════════════════════════════════════════════════════════════ FOOTER — quiet, compact (ref board 06); no link farm ════════════════════════════════════════════════════════════════ */ .footer{border-top:1px solid var(--hairline);background:var(--obsidian);position:relative;z-index:1} .frow{ display:flex;justify-content:space-between;align-items:flex-start;gap:44px; padding:34px 0 40px;flex-wrap:wrap; } .fbrand{display:flex;flex-direction:column;gap:12px;max-width:30ch} .fline{display:flex;align-items:center;gap:11px} .fbrand p{font-size:12.5px;color:var(--muted);line-height:1.6} .fcols{display:flex;gap:64px;flex-wrap:wrap} .fcol{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--muted)} .fcol b{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--bone);margin-bottom:4px} .fcol a{padding:2px 0;transition:color .25s var(--ease)} .fcol a:hover{color:var(--bone)} .fmeta{ border-top:1px solid var(--hairline); display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding:16px 0 40px;font-size:12px;color:var(--muted); } .flang{font-family:var(--font-mono);font-size:11.5px} .flang b{color:var(--bone);font-weight:500} /* ── Legal pages (privacy.html / terms.html) ─────────────────── */ .legal{max-width:72ch;margin:0 auto;padding:120px 0 90px} .legal h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;color:var(--bone)} .legal .updated{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin:10px 0 34px} .legal h2{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--bone);margin:34px 0 10px} .legal p,.legal li{font-size:14.5px;color:var(--muted);line-height:1.7} .legal ul{padding-left:20px;margin-top:8px} .legal .back{display:inline-flex;align-items:center;gap:8px;margin-bottom:34px;font-size:13.5px;font-weight:600;color:var(--red-soft)} .legal .back:hover{color:var(--bone)} .legal a{color:var(--red-soft)} .legal a:hover{color:var(--bone)} .legal ol{padding-left:20px;margin-top:8px} .legal ol li{margin-bottom:6px} .legal .notice{ border:1px solid rgba(199,49,46,.4);background:rgba(199,49,46,.08); border-radius:var(--r-input);padding:14px 16px;margin:0 0 30px; font-size:13px;color:var(--bone);line-height:1.6; } .legal .pending{ border:1px solid rgba(139,123,216,.4);background:rgba(139,123,216,.08); border-radius:var(--r-input);padding:12px 16px;margin:10px 0 0; font-size:12.5px;color:var(--bone); } /* About page: three quiet fact cards inside the reading column */ .about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 6px} .about-cards .core{padding:18px} .about-cards h3{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--bone);margin-bottom:6px} .about-cards p{font-size:12.5px;margin:0} @media (max-width: 767px){ .about-cards{grid-template-columns:1fr} } @media (max-width: 767px){ .bento{grid-template-columns:1fr;grid-auto-rows:auto} .cell,.cell.w6{grid-column:span 1} .cell.h2{grid-row:span 1} .cell .core{min-height:120px} .cell-chart{height:130px} .how{grid-template-columns:1fr;gap:26px} .how-item{border-left:none;border-top:1px solid var(--hairline);padding:20px 4px 0} /* workforce collapse (ref m2): featured first, lift removed, full-width */ .emp-cards{grid-template-columns:1fr;gap:16px} .emp.spot{transform:none;order:-1} .emp .core{min-height:0} /* Pricing collapse: summaries + details disclosure. The recommended tier used to be pulled to the front with order:-1. On a wide screen the three tiers are read side by side, so leading with the recommended one is a fair emphasis. Stacked on a phone they are read as a SEQUENCE, and hoisting Business Owner put the cheapest plan second — the ladder went 16.930, then 9.390, then up again, which reads as disorder rather than emphasis and hides the entry price from someone scanning for it. Price order now stands: Solo Starter, Business Owner, OmniMatrix. The recommended tier keeps its border, badge and accent, which is emphasis that does not have to fight the sequence. */ .price-head{align-items:flex-start;flex-direction:column} .tiers{grid-template-columns:1fr;gap:16px} .tier .core{min-height:0} .who{min-height:0} .tier .btn{margin-top:12px} .form-core{padding:20px} } /* ── Reduced motion: everything static (DESIGN.md §6) ──────────── */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .rise,.reveal{opacity:1;transform:none;transition:none} .hv-bars i,.hero.in .hv-bars i{transform:scaleY(1);transition:none} .menu,.menu a,.menu .menu-cta,.burger i,.btn,.btn-red .chip{transition:none} .form-submit.loading::after{animation:none} .cell,.emp,.tier{transition:none} .plan-details{transition:none} .plan-toggle i{transition:none} .wiz-pane.on{animation:none} .sdot i,.pick{transition:none} /* the panel is placed by `left`, not by a transform, so cancelling the animation is enough */ .nav-drop-panel{animation:none;transform:none} .nav-drop-btn i{transition:none} } /* ════════════════════════════════════════════════════════════════ MOBILE COLLAPSE (< 768px) — per ref board m1 ════════════════════════════════════════════════════════════════ */ @media (max-width: 767px){ .nav{padding-top:0} .nav-pill{ width:100%;border-radius:0;border-left:none;border-right:none;border-top:none; padding:10px 16px; } .nav-links,.nav-signin{display:none} .burger{display:block} /* ── Reading order on a phone ────────────────────────────────────────────── The two calls to action sat directly under the sub-heading, so the page asked for a decision before it had shown anything. Stacked, the product shot is the argument and the buttons are the answer to it, so the buttons move below it. They cannot simply be re-ordered: .hero-ctas lives inside .hero-copy while the shot is .hero-copy's SIBLING, and `order` only sorts among siblings. So .hero-copy stands down as a box and lets its children become items of .hero directly, which puts all six on one axis where order can sort them. `gap` has to go with it: the grid gap would then apply between the eyebrow, the headline and the sub, which are spaced by their own margins. Each item carries the spacing it needs instead. */ .hero-copy{display:contents} .hero .eyebrow{order:1} .hero .display{order:2} .hero .sub{order:3} /* THE BUTTONS COME BACK UP, and this reverses a deliberate earlier decision, so here is why. The argument for putting them under the product shot — show the thing, then ask — holds on a desktop where the whole hero is on screen at once. Measured on a 375x812 phone it did not: the shot is 377px and the proof list was 125px, which put "Start free" at y=928 on an 812px screen. The primary call to action was BELOW THE FOLD on every phone, and the owner's report was exactly that — having to scroll to reach what they came for. Above the fold beats rhetorically better ordering. The shot still argues; it argues to someone who has already been shown the way in. */ .hero-ctas{order:4;margin-top:4px} .hero-proof{order:5} .hero-visual{order:6;margin-top:24px} .hero{ grid-template-columns:1fr;gap:0;align-items:start; /* The bar is fixed and 118px tall once it wraps to two rows on a phone, but this padding was 96px — so the eyebrow's top 16px sat BEHIND the bar and the section opened on a clipped line. --nav-h is measured in site.js (the bar's height moves with width and with webfont loading); the 118px fallback is the two-row height, so the first line is never clipped even before JS runs. */ padding-top:calc(var(--nav-h,118px) + 26px);padding-bottom:56px;min-height:100dvh; } .hero-copy h1{font-size:clamp(34px,9.4vw,44px)} .hero-copy .sub{font-size:14.5px;margin:16px 0 24px} .hero-ctas{flex-direction:column;align-items:stretch;gap:12px} /* Stacked full-width, the two buttons measured 58px and 47px: identical padding, but the red one carries the arrow chip and the ghost carries only text, so their content heights differed by 11px. Two primary actions of visibly different sizes, one directly above the other, is the kind of misalignment you feel before you can name it. A shared floor settles both on the same line. */ .hero-ctas .btn{width:100%;justify-content:center;padding:0;min-height:56px} /* .hero-proof is laid out further down, in the max-width:48rem block that sits AFTER its base rule — a copy here would be overridden by that base and do nothing. */ .hero-visual{height:auto} .hv-back{display:none} /* back layer removed on mobile */ /* The frame keeps the desktop lockup's offsets (inset:auto 0 24px 36px), which on a phone pushed the "Your business today" card 36px to the right and 20px past the screen edge — the card was cropped down its right side. Clear the offsets so it sits centred in the column, squared with the headline above it. Written out per side because `position` alone does not neutralise an inherited inset. */ .hv-frame{position:relative;height:auto; inset:auto;left:auto;right:auto;top:auto;bottom:auto; width:100%;margin-inline:auto} .hv-kpis{grid-template-columns:1fr 1fr} .hv-kpi:nth-child(3){display:none} /* two KPIs at phone width */ .hv-chart{min-height:150px} .hv-bars{flex:none;height:96px} /* definite track so % bar heights resolve */ } /* tablet: keep the split but tighten */ @media (min-width: 768px) and (max-width: 1023px){ .hero{grid-template-columns:1fr 1fr;gap:36px} .hero-visual{height:440px} .hv-frame{inset:auto 0 20px 20px;height:380px} } /* ══════════════════════════════════════════════════════════════════ GET AN APP — Auraz App Studio (marketing intake + live estimate) Reuses the token system; owns only the .ga-* namespace. ══════════════════════════════════════════════════════════════════ */ .ga-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px} .ga-ip{border:1px solid var(--hairline);border-radius:14px;background:var(--panel-2);padding:16px 18px;display:flex;flex-direction:column;gap:6px} .ga-ip i{font-size:22px;color:var(--red-soft)} .ga-ip b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--bone)} .ga-ip span{font-size:12.5px;color:var(--muted);line-height:1.5} .ga-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start} .ga-config{display:flex;flex-direction:column;gap:14px;margin:0} .ga-step{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--panel-2);padding:20px 22px} .ga-step legend{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--bone);padding:0;display:flex;align-items:center;gap:10px} .ga-hint{font-family:var(--font-body);font-weight:500;font-size:12.5px;color:var(--muted)} .ga-n{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--red-soft); background:rgba(199,49,46,.12);border:1px solid rgba(199,49,46,.4)} /* platform cards */ /* ── Step 1: what are you building? ───────────────────────────────────────── Deliberately the same card as .ga-plat rather than a new visual idea: these are two consecutive steps asking the same shape of question, and giving them two different looks would imply a difference that is not there. Six across at three columns, so it is two tidy rows rather than a ragged five-plus-one. */ .ga-kindpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .ga-kind{text-align:left;background:rgba(5,5,5,.35);border:1.5px solid var(--hairline);border-radius:14px;padding:14px; display:flex;flex-direction:column;gap:6px;min-height:126px;transition:border-color .2s var(--ease), background .2s var(--ease)} .ga-kind:hover{border-color:rgba(255,255,255,.28)} .ga-kind.on{border-color:var(--red);background:linear-gradient(180deg,rgba(199,49,46,.12),rgba(199,49,46,.03))} .ga-kind i{font-size:20px;color:var(--red-soft)} .ga-kind b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--bone)} .ga-kind small{color:var(--muted);font-size:11.5px;line-height:1.4} .ga-kind .ga-kind-n{margin-top:auto;font-family:var(--font-mono);font-size:12px;color:var(--red-soft);font-weight:500} .ga-kind-lead{margin-top:10px} /* Said out loud, in the accent, because a basket losing rows silently is worse than the rows being wrong in the first place. */ .ga-kind-dropped{margin-top:10px;font-size:12.5px;color:var(--red-soft);font-family:var(--font-mono)} /* The standing note on a games order. Bordered rather than muted: it is the one paragraph on the page whose job is to stop somebody buying the wrong thing. */ .ga-kind-note{margin-top:14px;border:1.5px solid var(--hairline);border-left:3px solid var(--red); border-radius:12px;padding:14px 16px;background:rgba(5,5,5,.35)} .ga-kind-note b{display:block;font-family:var(--font-display);font-size:14px;color:var(--bone);margin-bottom:6px} .ga-kind-note p{color:var(--muted);font-size:12.5px;line-height:1.65;margin:0 0 8px} .ga-kind-note p:last-child{margin-bottom:0} .ga-kind-note em{color:var(--bone);font-style:italic} /* The escape hatch under the filtered list. Quiet on purpose — it exists for the visitor whose business straddles two kinds, not as a second way to browse. */ .ga-showall{display:flex;align-items:center;gap:9px;margin-top:12px;cursor:pointer; font-size:12.5px;color:var(--muted)} .ga-showall input{width:15px;height:15px;accent-color:var(--red);cursor:pointer} @media (max-width:860px){.ga-kindpick{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.ga-kindpick{grid-template-columns:1fr}} .ga-plats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px} .ga-plat{text-align:left;background:rgba(5,5,5,.35);border:1.5px solid var(--hairline);border-radius:14px;padding:14px; display:flex;flex-direction:column;gap:6px;min-height:118px;transition:border-color .2s var(--ease), background .2s var(--ease)} .ga-plat:hover{border-color:rgba(255,255,255,.28)} .ga-plat.on{border-color:var(--red);background:linear-gradient(180deg,rgba(199,49,46,.12),rgba(199,49,46,.03))} .ga-plat i{font-size:20px;color:var(--red-soft)} .ga-plat b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--bone)} .ga-plat small{color:var(--muted);font-size:11.5px;line-height:1.4} .ga-plat .ga-plat-from{margin-top:auto;font-family:var(--font-mono);font-size:12px;color:var(--red-soft);font-weight:500} .ga-plat .ga-plat-eta{font-size:11px;color:var(--muted);margin-top:3px} .ga-q-eta{margin-top:10px;padding-top:10px;border-top:1px dashed var(--hairline);font-size:12.5px;color:var(--muted)} .ga-q-eta b{color:var(--bone);font-weight:600} .ga-eta-rush{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-soft);border:1px solid rgba(199,49,46,.4);border-radius:6px;padding:1px 6px;margin-left:6px} .ga-os{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--hairline)} .ga-os[hidden]{display:none} .ga-os-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ga-check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--bone);cursor:pointer} .ga-check i{color:var(--muted);font-size:16px} .ga-check input{width:17px;height:17px;accent-color:var(--red);cursor:pointer} /* languages: pick from a world list, remove any chip (item 2d) */ .ga-langfield{gap:14px} .ga-lang{ display:inline-flex;align-items:center;gap:8px; padding:6px 7px 6px 14px;border-radius:999px; font-size:13px;font-weight:600;color:#fff; background:var(--red);border:1.5px solid var(--red); } .ga-lang-x{ width:20px;height:20px;border-radius:999px;flex:none;border:none;padding:0; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.22);color:inherit;font-size:13px;line-height:1; transition:background .2s var(--ease); } .ga-lang-x:hover{background:rgba(255,255,255,.42)} .ga-langs-empty{font-size:12.5px;color:var(--muted)} .ga-langadd{display:flex;flex-direction:column;gap:7px;max-width:290px} /* the control recipe lives with the other selects, next to `.field select` */ .field.bad .ga-select{border-color:rgba(224,112,105,.75)} /* chips */ .ga-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px} /* must follow .ga-chips: the language row sits in a .field that already spaces it */ .ga-langs{margin-top:0} .ga-feat-other{margin-top:10px} .ga-hardship{margin-top:14px} .ga-chip{padding:8px 15px;border-radius:999px;border:1.5px solid var(--hairline);background:transparent; color:var(--bone);font-size:13px;font-weight:600;transition:border-color .2s var(--ease), background .2s var(--ease)} .ga-chip:hover{border-color:rgba(255,255,255,.28)} .ga-chip.on{background:var(--red);border-color:var(--red);color:#fff} /* Every context gives .core its own padding — .tier 26, .emp 24, .cell 20 — because the base .core has none. The purpose card was added without one, so the mission ran flush to all four edges of the panel behind it and read as text with a stray border round it rather than text in a card. */ .pur .core{padding:22px 26px} .pur .core p{margin:0;font-size:var(--fs-body-lg,15px);line-height:1.7;color:var(--bone)} /* "Show 5 more" — the bar under a paged feature list. Full width so it reads as the end of the list rather than another row, and quiet enough that it never competes with the features above it. */ .ga-more{ display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; width:100%;margin-top:10px;padding:14px 16px; border:1.5px dashed var(--hairline);border-radius:14px;background:rgba(5,5,5,.3); color:var(--bone);font-size:13.5px;font-weight:600;cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease); } .ga-more:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)} .ga-more-n{color:var(--muted);font-weight:500;font-size:12.5px} /* feature category filter — 19 features read as noise in one flat list (item 2a) */ .ga-featbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .ga-fcat{ display:inline-flex;align-items:center;gap:7px; padding:8px 13px;border-radius:999px; border:1.5px solid var(--hairline);background:rgba(5,5,5,.3); color:var(--muted);font-size:12.5px;font-weight:600; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); } .ga-fcat:hover{border-color:rgba(255,255,255,.28);color:var(--bone)} .ga-fcat.on{border-color:var(--red);background:linear-gradient(180deg,rgba(199,49,46,.14),rgba(199,49,46,.04));color:var(--bone)} .ga-fcat-n{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .ga-fcat.on .ga-fcat-n{color:var(--red-soft)} /* a selection outside the visible tab still costs money — this badge is how the visitor knows */ .ga-fcat-sel{ font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.03em; color:#fff;background:var(--red);border-radius:999px;padding:2px 7px;white-space:nowrap; } .ga-feats-note{ display:flex;gap:8px;align-items:flex-start; padding:9px 12px;border-radius:10px; background:rgba(255,255,255,.03);border:1px dashed var(--hairline); font-size:12px;color:var(--muted);line-height:1.45; } .ga-feats-note i{color:var(--red-soft);font-size:14px;flex:none;margin-top:1px} /* included-free selling point — deliberately copy, never a priced row (item 1g) */ .ga-included{ display:flex;gap:10px;align-items:flex-start;margin-top:12px; padding:12px 14px;border-radius:12px; background:rgba(255,255,255,.03);border:1px solid var(--hairline); font-size:12.5px;color:var(--muted);line-height:1.5; } .ga-included i{color:var(--bone);font-size:17px;flex:none;margin-top:1px} .ga-included b{color:var(--bone);font-weight:700} /* feature list */ .ga-feats{display:flex;flex-direction:column;gap:8px;margin-top:16px} .ga-feat{display:flex;align-items:center;gap:12px;background:rgba(5,5,5,.3);border:1.5px solid var(--hairline); border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .2s var(--ease), background .2s var(--ease)} .ga-feat:hover{border-color:rgba(255,255,255,.24)} .ga-feat.on{border-color:rgba(199,49,46,.5);background:linear-gradient(180deg,rgba(199,49,46,.07),transparent)} .ga-feat.locked{opacity:.85;cursor:default} .ga-feat .ga-box{width:20px;height:20px;border-radius:6px;flex:none;border:1.5px solid var(--hairline); display:grid;place-items:center;color:#fff;font-size:12px;transition:background .2s var(--ease), border-color .2s var(--ease)} .ga-feat.on .ga-box{background:var(--red);border-color:var(--red)} .ga-feat.locked .ga-box{background:var(--green);border-color:var(--green)} .ga-feat .ga-ftext{flex:1;min-width:0} .ga-feat .ga-ftext b{display:block;font-size:14px;color:var(--bone);font-weight:600} .ga-feat .ga-ftext span{font-size:12px;color:var(--muted)} .ga-feat .ga-price{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--red-soft);white-space:nowrap} .ga-feat.locked .ga-price{color:var(--green-soft)} /* design / timeline segmented */ .ga-opts{display:flex;flex-direction:column;gap:18px;margin-top:16px} .ga-optgroup{display:flex;flex-direction:column;gap:9px} .ga-sublabel{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* the language picker's sub-label is a