/* landing.css — the public landing page ("/") stylesheet. * * Hand-written, served as-is from public/ (no build step, no Tailwind). The * design system is fixed: ink navy + amber on warm paper, Bricolage Grotesque * for display, Instrument Sans for body, JetBrains Mono for labels and figures. * * Colour pairings follow the source design (owner's call, 2026-08-12): the * display accent (.hl) and the filled buttons use the bright --accent with * white text, exactly as designed — measured 2.7–2.8:1, accepted for the * display-size headline and button labels. Body-size accent TEXT (eyebrows, * arrow links, FAQ links) stays on --accent-deep (4.4:1 on paper), where the * reading sizes leave no room to trade. * * Progressive enhancement: everything that starts hidden for a JS animation * (.reveal, .msg) is gated behind the .js class the page sets on , so a * no-JS visitor sees the whole page, static. prefers-reduced-motion disables * every animation and transition wholesale at the bottom of this file. */ /* ---------- fonts (self-hosted, latin subset) ---------- */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/static/fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('/public/static/fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/static/fonts/instrument-sans-v4-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/public/static/fonts/instrument-sans-v4-latin-italic.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/public/static/fonts/instrument-sans-v4-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/public/static/fonts/instrument-sans-v4-latin-600.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/static/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/public/static/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); } /* ---------- tokens ---------- */ :root { --paper: #FBFAF7; --ink: #191C30; --ink-2: #232744; --ink-soft: #5A5E75; --line: #E8E6E0; --accent: #D98A16; --accent-deep: #A96706; --accent-tint: #FBF0DB; --chat-bg: #F4F2EC; --bubble-in: #FFFFFF; --bubble-out: #FCEBC9; --blue: #4E7CF6; --ok: #2FA463; --radius: 18px; --shadow-soft: 0 1px 2px rgba(25, 28, 48, .05), 0 8px 32px rgba(25, 28, 48, .07); --shadow-pop: 0 2px 6px rgba(25, 28, 48, .08), 0 24px 64px rgba(25, 28, 48, .14); --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; --font-body: 'Instrument Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; color-scheme: light; interpolate-size: allow-keywords; /* lets ::details-content height animate where supported */ } /* ---------- base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-tint); } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img, svg { max-width: 100%; } [hidden] { display: none !important; } /* Scrollbars in the page's own ink rather than the OS's grey channel with arrow * buttons at both ends. Same treatment and same reasoning as the app * (tailwind/input.css): ink at low alpha, never the accent — a scrollbar * reports where you are, it does not ask for anything. * * The branches are exclusive. Chromium drops the -webkit- pseudo-elements the * moment `scrollbar-color` is set, so setting both leaves the arrows in place; * querying support for the SELECTOR sends Chromium and Safari down the * pseudo-element path and Firefox down the standard-property one. */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: rgba(25, 28, 48, .22) transparent; } } @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(25, 28, 48, .22); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(25, 28, 48, .34); } ::-webkit-scrollbar-button { display: none; } } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 6px; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .mono { font-family: var(--font-mono); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-pop); } .skip-link:focus-visible { top: 16px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; border-radius: 12px; padding: 11px 20px; min-height: 44px; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; cursor: pointer; border: none; } .btn svg { width: 16px; height: 16px; flex: none; } .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(25, 28, 48, .35); } .btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-deep); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--ink-soft); } .btn-sm { padding: 8px 16px; font-size: 14px; min-height: 40px; } .btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 14px; min-height: 48px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--accent-deep); } .link-arrow svg { width: 16px; height: 16px; flex: none; } .link-arrow:hover { text-decoration: underline; } /* ---------- shared type ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent-deep); text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); flex: none; } .eyebrow svg { width: 14px; height: 14px; flex: none; } h1 { font-family: var(--font-display); font-size: clamp(36px, 4.8vw, 62px); line-height: 1.03; letter-spacing: -.03em; font-weight: 800; margin-bottom: 20px; } .hl { color: var(--accent); } h2 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.025em; line-height: 1.1; font-weight: 700; margin: 12px 0 14px; } .sec-sub { font-size: 17px; color: var(--ink-soft); } section { padding: 92px 0; } [id] { scroll-margin-top: 84px; } .sec-head { max-width: 680px; margin: 0 auto 54px; text-align: center; } .sec-head .eyebrow { justify-content: center; } .tight-top { padding-top: 0; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 247, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 32px; height: 66px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; } .logo-img { width: 32px; height: 32px; flex: none; } .nav-links { display: flex; gap: 4px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); } .nav-links a { padding: 8px 11px; border-radius: 8px; transition: color .15s; } .nav-links a:hover { color: var(--ink); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .nav-cta-login { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); padding: 8px 11px; border-radius: 8px; transition: color .15s; } .nav-cta-login:hover { color: var(--ink); } .lang { display: flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; font-size: 12px; font-weight: 600; } .lang a { padding: 8px 12px; color: var(--ink-soft); } .lang a[aria-current="true"] { background: var(--ink); color: #fff; } .lang a:focus-visible { outline-offset: -2px; border-radius: 0; } /* The below-960px navigation: a native
disclosure, so it opens and * closes without JS. The small script only adds Escape / outside-click close. */ .nav-menu { display: none; position: relative; } .nav-burger { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 10px; color: var(--ink-soft); cursor: pointer; } .nav-burger::-webkit-details-marker { display: none; } .nav-burger:hover { color: var(--ink); } .nav-burger svg { width: 22px; height: 22px; } .nav-burger .i-close { display: none; } .nav-menu[open] .nav-burger .i-open { display: none; } .nav-menu[open] .nav-burger .i-close { display: block; } /* Sized to its content, not to the screen. At 320px on a 360px phone the panel * covered the page edge to edge with a 16px slot of paper showing down one * side, which reads as a broken full-width sheet rather than a menu; five short * labels and a language chip need nowhere near that. 260px leaves the page * visible behind it and keeps the whole panel under the thumb that opened it. */ .nav-panel { position: absolute; top: calc(100% + 12px); right: -8px; width: min(260px, calc(100vw - 48px)); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 8px; z-index: 60; } .nav-panel a.nav-item { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; } .nav-panel a.nav-item:hover { background: var(--accent-tint); } /* The rule under the links only earns its place because the language switch and * the sign-in link sit under it. If a breakpoint ever empties this row again, * the row goes with them — a border with nothing beneath it is the defect this * shipped with, not a decoration. */ .nav-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 8px; padding: 10px 4px 2px; } /* ---------- hero ---------- */ .hero { padding: 64px 0 88px; position: relative; overflow: hidden; } .hero-glow { position: absolute; width: 560px; height: 560px; right: -140px; top: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 138, 22, .12), transparent 65%); pointer-events: none; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-strong { font-size: 19px; font-weight: 600; margin-bottom: 12px; } .hero-sub { font-size: 17px; color: var(--ink-soft); max-width: 48ch; margin-bottom: 32px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .cta-note { font-size: 13.5px; color: var(--ink-soft); } .hero-stat { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; font-weight: 600; } .hero-stat svg { width: 17px; height: 17px; color: var(--accent-deep); flex: none; } .hero-proofs { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); } .proof { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); } .proof svg { width: 17px; height: 17px; color: var(--accent-deep); flex: none; } /* ---------- phone + chat (the signature) ---------- */ .phone-zone { position: relative; display: flex; flex-direction: column; align-items: center; } .phone-wrap { position: relative; } /* The handset: a titanium rim around a near-black bezel around the screen. * Each radius is the one outside it minus that layer's padding (46 → 44 → 38), * or the corners stop being concentric and the frame reads as three stacked * boxes instead of one moulded edge. The rim gradient runs at an angle with * several stops because that is what light on an extruded metal band does; a * flat fill reads as a printed border. Everything in the chrome — buttons, * status bar, island, composer — is decorative and aria-hidden in the markup. */ .phone { width: 344px; max-width: 100%; background: linear-gradient(145deg, #dedee3 0%, #f7f7f9 10%, #a6a6ad 34%, #ededf1 56%, #b2b2b9 78%, #f1f1f4 100%); border-radius: 46px; padding: 2px; box-shadow: var(--shadow-pop); position: relative; z-index: 2; } .phone-bezel { background: var(--ink); border-radius: 44px; padding: 6px; } .phone-screen { background: #fff; border-radius: 38px; overflow: hidden; position: relative; } /* Side buttons: mute + volume pair left, wake right. They sit just outside the * rim, so only their nubs show. */ .phone-btn { position: absolute; width: 3px; background: linear-gradient(145deg, #dedee3, #a6a6ad 60%, #ededf1); } .pb-l { left: -3px; border-radius: 2px 0 0 2px; } .pb-r { right: -3px; border-radius: 0 2px 2px 0; } .pb-mute { top: 112px; height: 24px; } .pb-vol1 { top: 152px; height: 44px; } .pb-vol2 { top: 208px; height: 44px; } .pb-power { top: 178px; height: 64px; } /* Status row + the island floating over its middle. The clock reads 19.32 to * match the first message rather than Apple's 9:41 — a mock whose clock * disagrees with its own conversation registers even when unnoticed. */ .phone-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 6px; font-size: 11px; font-weight: 600; } .phone-island { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 84px; height: 26px; border-radius: 99px; background: var(--ink); display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; z-index: 5; } .phone-island i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(217, 138, 22, .35); /* the lens catches the brand amber */ border: 1px solid rgba(255, 255, 255, .25); } .ps-right { display: flex; align-items: center; gap: 4px; } .ps-right svg { width: 12px; height: 12px; } .ps-bars { display: flex; align-items: flex-end; gap: 1.5px; } .ps-bars i { display: block; width: 2px; border-radius: 1px; background: var(--ink); } .ps-bars i:nth-child(1) { height: 3px; } .ps-bars i:nth-child(2) { height: 5px; } .ps-bars i:nth-child(3) { height: 7px; } .ps-bars i:nth-child(4) { height: 9px; } .ps-batt { display: flex; align-items: center; gap: 1px; } .ps-batt-shell { display: flex; width: 18px; height: 10px; border: 1px solid rgba(25, 28, 48, .4); border-radius: 3px; padding: 1.5px; } .ps-batt-fill { height: 100%; width: 72%; background: var(--ink); border-radius: 1.5px; } .ps-batt-tip { width: 1.5px; height: 4px; background: rgba(25, 28, 48, .4); border-radius: 0 1px 1px 0; } .phone-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); } .pt-back { display: grid; place-items: center; color: var(--ink-soft); flex: none; } .pt-back svg { width: 16px; height: 16px; } .pt-info { flex: 1; min-width: 0; } .pt-dots { display: flex; flex-direction: column; gap: 2.5px; padding: 0 4px; flex: none; } .pt-dots i { display: block; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--ink-soft); } /* The shop's profile photo. The gradient only shows while the image loads (and * behind any transparency); the radius keeps the circle even if the file is * ever swapped for a square one. */ .avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #F5D9A8, #E8B36A); object-fit: cover; } .pt-name { font-weight: 600; font-size: 15px; line-height: 1.2; } .pt-status { font-size: 12px; color: var(--ok); display: flex; align-items: center; gap: 5px; } .pt-status .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .chat { background: var(--chat-bg); padding: 16px 13px; min-height: 390px; display: flex; flex-direction: column; gap: 10px; position: relative; /* anchors the typing overlay */ } .msg { max-width: 84%; padding: 10px 13px; border-radius: 15px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(25, 28, 48, .05); } /* Hidden-until-played only when JS is actually there to play it. */ .js .chat .msg { opacity: 0; transform: translateY(10px); } .js .chat .msg.show { animation: msgIn .4s cubic-bezier(.2, .8, .3, 1) forwards; } @keyframes msgIn { to { opacity: 1; transform: none; } } .msg.in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 5px; } .msg.out { align-self: flex-end; background: var(--bubble-out); border-bottom-right-radius: 5px; } .msg time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 10.5px; color: var(--ink-soft); margin-top: 5px; font-family: var(--font-mono); } .msg .ticks { width: 13px; height: 13px; color: var(--blue); } /* The typing indicator is an OVERLAY, not a flow item. Every bubble already * reserves its space from first paint (they fade in via opacity), so the frame * height is constant through the whole loop — an in-flow indicator added ~40px * every time it blinked on and the phone visibly stretched twice per cycle. * Absolutely positioned over the spot of the reply it precedes (landing.js * sets top from that bubble's own offset), it costs no height at all. * Left-aligned and white: it is the SHOP typing, seen from the customer's * phone, so it wears the incoming-bubble dress. */ .typing { position: absolute; left: 13px; background: var(--bubble-in); border-radius: 15px; border-bottom-left-radius: 5px; box-shadow: 0 1px 1px rgba(25, 28, 48, .05); padding: 12px 15px; display: none; gap: 4px; } .typing.show { display: flex; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); opacity: .4; animation: blink 1.2s infinite; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } .ai-tag { align-self: center; margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); padding: 6px 13px; border-radius: 99px; } .ai-tag svg { width: 13px; height: 13px; color: var(--accent-deep); } /* Composer: inert, but its absence is the thing you notice. The mic disc keeps * WhatsApp's own green (--ok) rather than the brand amber — it depicts * WhatsApp's button, and recolouring it would make it stop looking like the * thing it copies. */ .phone-composer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); background: #fff; padding: 8px 10px; } .phone-composer > svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; } .pc-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--chat-bg); border-radius: 99px; padding: 6px 11px; font-size: 11px; color: var(--ink-soft); } .pc-pill > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-pill svg { width: 13px; height: 13px; flex: none; } .pc-mic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; flex: none; } .pc-mic svg { width: 13px; height: 13px; } /* Under the phone: the pitch (the viewpoint, sold), then the disclosure. The * caption is what keeps the chip figures honest — 13px is its floor; do not * shrink it below the chips it disclaims. */ .phone-pitch { text-align: center; font-size: 15px; font-weight: 600; line-height: 1.5; margin-top: 20px; max-width: 44ch; } .phone-caption { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 6px; font-style: italic; max-width: 44ch; } /* The chips hang off the phone's edges by translateX, not by a negative inset: * the Indonesian labels run wider than the mock this was designed from, and a * fixed -9% left the chip's body covering the conversation. A percentage * translate is relative to the chip's own width, so ~three quarters of any * chip sits outside the frame and only the tail overlaps the bezel. --tx also * feeds the float keyframes — an animation that set transform directly would * throw the offset away mid-loop. */ .chip { position: absolute; z-index: 3; --tx: 0%; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 11px 15px; box-shadow: var(--shadow-soft); transform: translate(var(--tx), 0); animation: chipFloat 7s ease-in-out infinite; /* A chip is shrink-to-fit, so its widest line sets its width. The reply * chip's comparison ("vs ~10 min for a human agent") is twice the length of * anything else here and stretched the card clear across the phone mock. * Capping it makes that one line wrap instead; every other chip is narrower * than this and is unaffected. */ max-width: 190px; } .chip-label { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; white-space: nowrap; } .chip-label svg { width: 13px; height: 13px; color: var(--accent-deep); flex: none; } .chip-value { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.1; } .chip-delta { display: flex; /* flex-start, not center: the reply chip's comparison runs to two lines, and * a down arrow floating between them belongs to neither. It sits with the * first line, where the reading starts. */ align-items: flex-start; gap: 3px; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--accent-deep); line-height: 1.35; } /* Nudged to sit on the first line's baseline rather than its box top. */ .chip-delta svg { width: 11px; height: 11px; flex: none; margin-top: 2px; } /* Chips 2 and 3 sit at bubble height — and since the sides swapped (the mock * is the customer's phone), BOTH sides carry full-width message text there, so * those two hang almost entirely outside and only kiss the bezel. Chips 1 and * 4 sit beside the header and the composer, where there is no text to cover. */ .chip-1 { top: 7%; left: 6px; --tx: -76%; } .chip-2 { top: 26%; right: 6px; --tx: 88%; animation-delay: -1.5s; } .chip-3 { bottom: 24%; left: 6px; --tx: -90%; animation-delay: -3.5s; } .chip-4 { bottom: 5%; right: 6px; --tx: 72%; animation-delay: -5s; } @keyframes chipFloat { 0%, 100% { transform: translate(var(--tx), 0); } 50% { transform: translate(var(--tx), -9px); } } /* Between 960 and 1200 the hero columns tighten; rein the chips in so they do * not reach into the text column — but 2 and 3 keep more escape than 1 and 4, * because they are the two at message height. */ @media (max-width: 1200px) { .chip-1 { --tx: -40%; } .chip-4 { --tx: 40%; } .chip-2 { --tx: 58%; } .chip-3 { --tx: -58%; } } /* Both loops park while the hero is off-screen (landing.js toggles the class). */ .motion-idle .chip { animation-play-state: paused; } .motion-idle .pt-status .pulse-dot { animation-play-state: paused; } /* ---------- reality (dark band) ---------- */ .reality { background: var(--ink); color: #fff; position: relative; overflow: hidden; } .reality::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 138, 22, .14), transparent 65%); top: -320px; left: 50%; transform: translateX(-50%); } .reality .wrap { position: relative; } .reality h2 { color: #fff; } .reality .eyebrow { color: var(--accent); } .reality .eyebrow::before { background: var(--accent); } .reality .sec-sub { color: rgba(255, 255, 255, .68); } .reality-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .rcard { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 28px 26px; transition: background .2s, border-color .2s; } .rcard:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .18); } .rcard-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 16px; display: block; } .rcard h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 9px; color: #fff; } .rcard p { font-size: 14.5px; color: rgba(255, 255, 255, .65); } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .step { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform .2s, box-shadow .2s; } .step > p:last-of-type { padding-bottom: 16px; } /* The illustration bleeds to the card's edges (negative margins swallow the 22px padding) and pins to the bottom via margin-top auto, so the three pictures sit flush and aligned however long each description runs. */ .step-img { display: block; width: calc(100% + 44px); max-width: none; /* the global img clamp would trim the bleed's right edge */ height: auto; margin: auto -22px -22px; border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } /* Icon tile and step badge share one row — stacking them cost ~60px per card and let the flex column stretch the badge pill full-width. */ .step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .step-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-deep); background: var(--accent-tint); padding: 4px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .08em; } .step-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); display: grid; place-items: center; } .step-icon svg { width: 20px; height: 20px; color: var(--accent-deep); } .step h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; } .step p { font-size: 14.5px; color: var(--ink-soft); } /* ---------- capabilities ---------- */ .cap-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cap { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 20px; transition: transform .2s, box-shadow .2s, border-color .2s; } .cap:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: #DBD8CF; } .cap-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } /* Display face, not body 600: these names sit above a large colour illustration, and at body weight the picture read as the card and the name as its footnote. */ .cap h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .cap-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-tint); display: grid; place-items: center; } .cap-icon svg { width: 19px; height: 19px; color: var(--accent-deep); } /* Bled to the card's edges like .step-img: negative margins swallow the padding, margin-top auto pins the picture down so all six align across the rows however many lines their names take. */ .cap-img { display: block; width: calc(100% + 40px); max-width: none; /* the global img clamp would trim the bleed's right edge */ height: auto; margin: auto -20px -20px; border-radius: 0 0 13px 13px; } .cap-links { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 40px; flex-wrap: wrap; } /* ---------- proof (real counts + testimonials; both conditional) ---------- */ .proof-stats { background: #fff; border-bottom: 1px solid var(--line); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; } .stat-val { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 46px); letter-spacing: -.02em; line-height: 1; } .stat-label { margin: 10px auto 0; max-width: 26ch; font-size: 14px; color: var(--ink-soft); } .stats-note { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 34px; } .tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; } .tcard-metric { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.015em; color: var(--accent-deep); margin-bottom: 10px; } .tcard blockquote { flex: 1; font-size: 14.5px; } .tcard figcaption { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; font-size: 13.5px; } .tcard figcaption .t-name { font-weight: 600; } .tcard figcaption .t-role { color: var(--ink-soft); } /* ---------- pricing ---------- */ .toggle-row { text-align: center; } .toggle { display: none; /* the buttons do nothing without JS, so they only appear with it */ background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px; margin: 6px 0 26px; } .js .toggle { display: inline-flex; } .toggle button { border: none; background: transparent; font-weight: 600; font-size: 14px; padding: 8px 18px; min-height: 40px; border-radius: 99px; cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; } .toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; } .save-badge { font-size: 11px; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 99px; font-weight: 700; } .credit-note { max-width: 640px; margin: 0 auto 44px; text-align: center; font-size: 14.5px; color: var(--ink-soft); background: var(--accent-tint); border: 1px solid #F2DFB8; border-radius: 14px; padding: 16px 22px; } .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; } .plans-1 { grid-template-columns: minmax(0, 320px); justify-content: center; } .plans-2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; } .plans-3 { grid-template-columns: repeat(3, 1fr); } .plan { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; position: relative; transition: transform .2s, box-shadow .2s; } /* One row line per element, shared by every card. * * Each card used to stack its own heights, so anything that wrapped differently * pushed that card alone out of step: "For teams selling over chat every day who * need the AI to be dependable." runs to three lines where its neighbours take * two, and that one extra line put the Pro CTA 23px below the other three — the * most-pressed button in the section, visibly out of line with the row. * * min-height on the description would only paper over today's copy; the next * price change or translation puts it back. Subgrid makes the nine blocks of a * card (name, description, price, the two annual disclosures, CTA, card note, * "what's included" and the feature list) into nine rows the four cards SHARE, * so each row is as tall as the tallest card needs and every card's CTA — and * every feature row under it — lands on the same line whatever the copy does. * * The count is the number of in-flow children of .plan; .popular-tag is * absolutely positioned and is not a grid item. A tenth child would simply not * be row-aligned, which is the old behaviour rather than a broken one. * * @supports so a browser without subgrid keeps exactly the flex column it has * today: unaligned, which is where this started, and never broken. * row-gap: 0 because the grid's own 18px gutter is for the space BETWEEN cards, * and the spacing inside one is carried by each block's margins. */ @supports (grid-template-rows: subgrid) { .plans { grid-template-rows: repeat(9, auto); } .plan { display: grid; grid-template-rows: subgrid; grid-row: span 9; row-gap: 0; } } .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .plan.popular { border: 2px solid var(--accent); box-shadow: 0 12px 44px rgba(217, 138, 22, .16); } .popular-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 99px; white-space: nowrap; } .plan-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; } .plan-for { font-size: 13.5px; color: var(--ink-soft); margin: 7px 0 18px; } .plan-price { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; } .plan-price small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-soft); } /* Annual disclosures. Reserved height so switching the toggle never reflows the * card grid; [hidden] (server-set, JS-toggled) picks which price shows. */ .plan-billed { min-height: 19px; font-size: 12px; color: var(--ink-soft); } .plan-saved { min-height: 19px; font-size: 12.5px; font-weight: 600; color: var(--accent-deep); } .plan .btn { margin: 14px 0 6px; width: 100%; } .plan-cc { font-size: 12px; color: var(--ink-soft); text-align: center; margin-bottom: 18px; } .plan-inc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 12px; } .plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; } .plan li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink); } .plan li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; } .plan li.yes svg { color: var(--accent-deep); } .plan li.no { color: var(--ink-soft); } .plan li.no svg { color: #C4C1B8; } .plan li small { display: block; color: var(--ink-soft); font-size: 12px; } .plans-foot { margin-top: 36px; text-align: center; } .plans-checks { list-style: none; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); margin: 18px 0 14px; } .plans-checks li { display: flex; align-items: center; gap: 7px; } .plans-checks svg { width: 15px; height: 15px; color: var(--accent-deep); flex: none; } /* ---------- api banner ---------- */ .api-banner { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 36px 40px; display: flex; align-items: center; gap: 32px; justify-content: space-between; flex-wrap: wrap; } .api-banner .eyebrow { margin-bottom: 10px; } .api-banner h2 { font-size: 23px; letter-spacing: -.015em; margin: 0 0 8px; } .api-banner p { font-size: 14.5px; color: var(--ink-soft); max-width: 56ch; } /* ---------- final cta ---------- */ .cta-final { background: var(--ink); border-radius: 28px; padding: 68px 40px; text-align: center; color: #fff; position: relative; overflow: hidden; } .cta-final::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 138, 22, .30), transparent 65%); top: -260px; left: 50%; transform: translateX(-50%); } .cta-final > * { position: relative; } .cta-final h2 { color: #fff; margin-bottom: 12px; } .cta-final h2 .hl { color: var(--accent); } .cta-final p { color: rgba(255, 255, 255, .72); font-size: 17px; max-width: 44ch; margin: 0 auto 30px; } .cta-ask { display: block; margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .65); } .cta-ask a { text-decoration: underline; text-underline-offset: 3px; } .cta-ask a:hover { color: #fff; } .cta-checks { list-style: none; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .72); } .cta-checks li { display: flex; align-items: center; gap: 7px; } .cta-checks svg { width: 14px; height: 14px; color: var(--accent); flex: none; } /* ---------- faq (native details/summary; name= gives the exclusive accordion) ---------- */ .faq { max-width: 720px; margin: 0 auto; } .faq-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 12px; } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 22px; cursor: pointer; list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.45; } .faq-q svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); transition: transform .25s; } .faq-item[open] .faq-q svg { transform: rotate(180deg); } .faq-item::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; } .faq-item[open]::details-content { height: auto; } .faq-a { padding: 0 22px 20px; font-size: 14.5px; color: var(--ink-soft); } .faq-a a { display: inline-block; margin-top: 8px; color: var(--accent-deep); font-weight: 600; } .faq-a a:hover { text-decoration: underline; } .faq-more { text-align: center; margin-top: 28px; } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; color: var(--ink-soft); background: #fff; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; } .foot-brand .logo { color: var(--ink); } .foot-brand p { margin-top: 14px; max-width: 32ch; } .foot-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; font-weight: 500; } .foot-col ul { list-style: none; } .foot-col a { display: flex; align-items: center; gap: 6px; padding: 5px 0; transition: color .15s; } .foot-col a:hover { color: var(--ink); } .foot-col a svg { width: 14px; height: 14px; flex: none; } .foot-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; } .foot-legal { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; max-width: 90ch; } /* ---------- sticky cta (phones only) ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(251, 250, 247, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(102%); transition: transform .25s ease; } .sticky-cta.show { transform: none; } .sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; max-width: 640px; margin: 0 auto; } .sticky-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; } @media (min-width: 960px) { .sticky-cta { display: none; } } /* ---------- shared page primitives (marketing_v2.templ) ---------- * Everything below serves the OTHER public pages (/harga, /help, /contact, * legal, compare, platform, calculator) on the same system as the landing. */ .page-hero { padding: 64px 0 56px; text-align: center; border-bottom: 1px solid var(--line); background: radial-gradient(60% 120% at 50% 0%, rgba(217, 138, 22, .07), transparent 70%); } .page-hero h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 12px; } .page-hero p { font-size: 17px; color: var(--ink-soft); max-width: 56ch; margin: 0 auto; } .wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 28px; } .prose-sec { margin-top: 36px; } .prose-sec:first-child { margin-top: 0; } .prose-sec h2 { font-size: 22px; margin: 0 0 8px; } .prose-sec p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); } .prose-lead { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 40px; } .prose-cta { margin-top: 14px; } .prose-cta .btn { margin-top: 4px; } /* ---------- tutorial (/tutorial — the user guide) ---------- * * The guide is the only long-form READING surface on landing.css: the marketing * pages are scanned, these are followed with a phone in the other hand. So the * measure is tighter than .wrap (68ch, not 1180px), the vertical rhythm is * bigger, and nothing here animates — a reader looking for step 4 should not * have to wait for it to fade in. * * Colours reuse the page tokens with one exception, noted at .tut-warn. */ /* Two columns with a sticky contents rail. The nav is sticky at 67px, so the * rail clears it rather than sliding under the blur. */ .tut-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 56px; max-width: 1120px; margin: 0 auto; padding: 44px 28px 96px; } /* The 3px gutter is not decoration. Setting overflow-y on its own computes * overflow-x to auto as well, so this box CLIPS anything reaching its edge — * which is what sheared the left side off the active pill when the links used a * negative margin to hang outside. The gutter also keeps the focus ring * (outline-offset: 2px) from being shaved off the same way. */ .tut-side { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding: 0 3px; } .tut-side-group + .tut-side-group { margin-top: 22px; } /* Indented to match the links' own 12px padding, so the group label lines up * with the item text while the pill still spans the full width of the rail. */ .tut-side-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); padding-left: 12px; margin-bottom: 8px; } .tut-side ul { list-style: none; } .tut-side a { display: block; padding: 6px 12px; border-radius: 9px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); } .tut-side a:hover { background: #fff; color: var(--ink); } .tut-side a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-deep); font-weight: 600; } /* The phone's contents rail: a
above the article, closed by default. */ .tut-toc { display: none; } .tut-article { min-width: 0; max-width: 68ch; } .tut-article > * + * { margin-top: 20px; } .tut-lede { margin-bottom: 8px; } .tut-lede h1 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; margin-bottom: 12px; } .tut-lede p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); } /* The scenario promise. Amber left rule rather than a filled box: it is the * first thing under the title and a second filled block there would fight the * lede for the eye. */ .tut-outcome { border-left: 3px solid var(--accent); padding: 2px 0 2px 16px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--ink-2); } .tut-h2 { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -.01em; margin-top: 44px !important; /* beats the .tut-article > * + * rhythm */ scroll-margin-top: 82px; /* anchor links clear the sticky nav */ } .tut-p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); } .tut-p strong { color: var(--ink); font-weight: 600; } .tut-article a:not([class]) { color: var(--accent-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .tut-article code { font-family: var(--font-mono); font-size: .89em; background: var(--chat-bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; } /* ---------- steps ---------- */ /* Counter rather than
    markers: the number is a badge in the left gutter and * list-style has no way to draw that. The
      is still an
        , so the reading * order and the screen-reader announcement are unaffected. */ .tut-steps { list-style: none; counter-reset: tutstep; margin-top: 24px !important; } .tut-step { counter-increment: tutstep; position: relative; padding: 0 0 26px 52px; } .tut-step::before { content: counter(tutstep); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 99px; background: var(--accent-tint); color: var(--accent-deep); font-family: var(--font-mono); font-size: 13px; font-weight: 600; } /* The thread joining the badges. Stops at the last step so the run does not * trail off into nothing. */ .tut-step::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 2px; background: var(--line); } .tut-step:last-child { padding-bottom: 0; } .tut-step:last-child::after { display: none; } .tut-step h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; padding-top: 4px; } .tut-step > * + * { margin-top: 12px; } /* ---------- callouts ---------- */ .tut-callout { display: block; border: 1px solid var(--line); border-left-width: 3px; border-radius: 12px; padding: 14px 18px; background: #fff; } .tut-callout-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; } .tut-callout-head svg { width: 15px; height: 15px; flex: none; } .tut-callout-body { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); } .tut-callout-body > * + * { margin-top: 8px; } .tut-callout-body .tut-p { font-size: inherit; } .tut-note { border-left-color: var(--accent); background: var(--accent-tint); } .tut-note .tut-callout-head { color: var(--accent-deep); } .tut-note .tut-callout-body { color: #6B5320; } /* The one colour outside the token set. Note and Warn cannot both be amber: * amber IS the brand accent here, so an amber box reads as "highlight", and the * warnings in this guide are about messages that reach customers and money that * gets spent. Scoped to these two rules rather than added to :root — the rest of * the design has no red in it and should not gain one by accident. */ .tut-warn { border-left-color: #C0392B; background: #FDF1EF; } .tut-warn .tut-callout-head { color: #A02015; } .tut-warn .tut-callout-body { color: #7A3128; } /* ---------- preconditions ---------- */ .tut-checklist { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .tut-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .tut-checklist li + li { margin-top: 9px; } .tut-checklist svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--ok); } /* ---------- figures ---------- */ .tut-fig { margin: 26px 0; } /* width:auto, NOT 100%. The captures are crops of whatever they are showing, so * they arrive at every size from a 570px button row to a 2560px settings panel. * Stretching to the column would upscale the small ones into blur; letting them * sit at their intrinsic size keeps a tight crop crisp, and max-width still * reins in the big ones. * * max-height is for the portrait phone captures: a 720x1600 screenshot at full * column width is 1400px tall, which is most of a laptop screen of one picture * in the middle of a paragraph. */ .tut-fig img { display: block; width: auto; max-width: 100%; height: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .tut-fig figcaption { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } /* ---------- see also ---------- */ /* Inside the guide: warm, card-like, chevron that nudges. Reads as "carry on". */ .tut-seeguide { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .tut-seeguide:hover { border-color: var(--accent); box-shadow: var(--shadow-soft); } .tut-seeguide svg { width: 16px; height: 16px; flex: none; color: var(--accent-deep); transition: transform .2s; } .tut-seeguide svg:last-child { color: var(--ink-soft); } .tut-seeguide:hover svg:last-child { transform: translateX(3px); } .tut-seeguide-list { list-style: none; display: grid; gap: 10px; } .tut-seeguide-list a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; transition: transform .2s, box-shadow .2s, border-color .2s; } .tut-seeguide-list a:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: #DBD8CF; } .tut-sgl-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .tut-sgl-label svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); transition: transform .2s; } .tut-seeguide-list a:hover .tut-sgl-label svg { transform: translateX(3px); color: var(--accent-deep); } .tut-sgl-note { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } /* Leaving the guide: no card, no fill, mono label. A door, not a next step. */ .tut-seedoc { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); border-bottom: 1px dashed var(--line); padding-bottom: 2px; } .tut-seedoc:hover { color: var(--ink); border-bottom-color: var(--ink-soft); } .tut-seedoc svg { width: 15px; height: 15px; flex: none; } /* ---------- troubleshooting ---------- */ .tut-symptom { background: var(--chat-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .tut-symptom-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); margin-bottom: 6px; } .tut-symptom p { font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--ink-2); } /* Causes are CHECKED until one matches, steps are all DONE in order. Squared * badges in the flow rather than round ones on a connecting thread: no thread, * because there is no sequence to trace. */ .tut-causes { list-style: none; counter-reset: tutcause; margin-top: 24px !important; } .tut-cause { counter-increment: tutcause; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; } .tut-cause + .tut-cause { margin-top: 12px; } .tut-cause h3 { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; } .tut-cause h3::before { content: counter(tutcause); flex: none; min-width: 22px; padding: 2px 6px; border-radius: 7px; background: var(--chat-bg); color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: center; } .tut-cause > * + * { margin-top: 10px; } /* ---------- footer ---------- */ .tut-faq { margin-top: 48px !important; } .tut-faq .faq { margin: 0; max-width: none; } .tut-prevnext { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; margin-top: 56px !important; padding-top: 28px; border-top: 1px solid var(--line); } .tut-pn { display: flex; align-items: center; gap: 11px; flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; transition: border-color .2s, box-shadow .2s; } .tut-pn:hover { border-color: #DBD8CF; box-shadow: var(--shadow-soft); } .tut-pn-next { justify-content: flex-end; text-align: right; } .tut-pn svg { width: 17px; height: 17px; flex: none; color: var(--ink-soft); } .tut-pn-dir { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); } .tut-pn-label { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); } /* ---------- the hub (/tutorial) ---------- */ /* The vocabulary block. Three words the rest of the guide leans on, defined once * here so eighteen articles do not each hedge them. */ .tut-vocab h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 18px; } .tut-vocab dl { display: grid; gap: 14px; } .tut-vocab dt { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-deep); margin-bottom: 4px; } .tut-vocab dd { font-size: 15px; line-height: 1.7; color: var(--ink-soft); } .tut-vocab > dl > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; } .tut-hub-group + .tut-hub-group { margin-top: 48px; } /* The Skenario group. Its pages are a different KIND of page — each chains four * or five features into one complete setup — so they must not read as a seventh * feature category. Warm tint plus a rule down the left: enough to say "these * are not like the others" without inventing a second card component. */ .tut-hub-group.is-accent { border-left: 3px solid var(--accent); padding-left: 24px; margin-left: -27px; } .tut-hub-group.is-accent .tile-link { background: var(--accent-tint); border-color: #EFE0C2; } .tut-hub-group.is-accent .tile-link:hover { border-color: var(--accent); } .tut-hub-head { margin-bottom: 20px; } .tut-hub-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .tut-hub-head p { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; } /* The guide's breakpoints live here rather than in the shared block at the * bottom of the file. 900px is its own number — it is where a 236px rail plus a * 68ch measure stops fitting, and no other page has a rail — and keeping the * rule beside what it reflows means the layout is edited in one place. */ @media (max-width: 900px) { .tut-layout { grid-template-columns: 1fr; gap: 0; padding: 28px 24px 72px; } /* The rail becomes a closed disclosure above the article. Sticky is dropped * with it: a sticky element that is 60% of a phone screen when open is a * trapdoor, not navigation. */ .tut-side { display: none; } .tut-toc { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 28px; } .tut-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; } .tut-toc > summary::-webkit-details-marker { display: none; } .tut-toc > summary svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); transition: transform .25s; } .tut-toc[open] > summary svg { transform: rotate(180deg); } .tut-toc[open] > summary { border-bottom: 1px solid var(--line); } .tut-toc .tut-side { display: block; position: static; max-height: none; overflow: visible; padding: 16px 18px 18px; } .tut-article { max-width: none; } } @media (max-width: 560px) { .tut-step { padding-left: 44px; padding-bottom: 22px; } .tut-step::before { width: 28px; height: 28px; font-size: 12px; } .tut-step::after { left: 13px; top: 34px; } /* Two half-width cards at 360px leave four words each. Stack them, and put * "next" first — it is the one a reader following the guide wants. */ .tut-prevnext { flex-direction: column-reverse; } .tut-pn-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; } } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* pcard — a plain white info card; .pcard-center for icon-led centered ones. */ .pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; } .pcard-center { display: flex; flex-direction: column; align-items: center; text-align: center; } .pcard-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-tint); display: grid; place-items: center; margin-bottom: 14px; } .pcard-icon svg { width: 22px; height: 22px; color: var(--accent-deep); } .pcard h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; } .pcard p { font-size: 14.5px; color: var(--ink-soft); } .pcard .pcard-value { font-size: 15px; font-weight: 600; } .pcard a.pcard-value { color: var(--accent-deep); } .pcard a.pcard-value:hover { text-decoration: underline; } /* tile-link — a card that navigates. */ .tile-link { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform .2s, box-shadow .2s, border-color .2s; } .tile-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: #DBD8CF; } .tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tile-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .tile-head svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); transition: transform .2s; } .tile-link:hover .tile-head svg { transform: translateX(3px); color: var(--accent-deep); } .tile-desc { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } .band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* payment pills (/harga — removed from the landing on the owner's call). */ .pay-methods { list-style: none; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; } .pay-pill { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 15px; } .pay-pill svg { width: 14px; height: 14px; color: var(--accent-deep); } .pay-note { text-align: center; font-size: 13px; color: var(--ink-soft); max-width: 62ch; margin: 0 auto 44px; } /* /harga extras: the credit arithmetic under the grid, the top-up card, and * the risk-reversal cards with their tested-mechanism chips. */ .credit-detail { max-width: 720px; margin: 36px auto 0; text-align: center; display: flex; flex-direction: column; gap: 8px; } .credit-trial { font-weight: 600; color: var(--ink); } .topup { max-width: 720px; margin: 24px auto 0; text-align: center; } .rr-card { display: flex; flex-direction: column; } .rr-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-deep); background: var(--accent-tint); border-radius: 99px; padding: 4px 10px; align-self: flex-start; margin-bottom: 14px; } .rr-card p { flex: 1; } .rr-chip { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; border: 1px solid rgba(47, 164, 99, .3); background: rgba(47, 164, 99, .08); color: #1E7A47; border-radius: 10px; padding: 8px 11px; font-size: 12px; font-weight: 600; line-height: 1.45; } .rr-chip svg { width: 14px; height: 14px; flex: none; margin-top: 1px; } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } .center-cta { text-align: center; } .center-cta .btn { margin-top: 26px; } .fine { font-size: 13px; color: var(--ink-soft); } /* cmp-table — the comparison pages' two-column verdict table. */ .cmp-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .cmp-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: #fff; } .cmp-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; } .cmp-wrap th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper); } .cmp-wrap td { padding: 13px 18px; font-size: 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .cmp-wrap tr:last-child td { border-bottom: none; } .cmp-wrap td:first-child { font-weight: 600; width: 34%; } /* platform page */ .page-hero .eyebrow { justify-content: center; margin-bottom: 14px; } .page-hero .cta-row { margin-top: 26px; } .api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .api-grid h2 { margin-top: 4px; } .dev-points { list-style: none; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 10px; } .dev-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; } .dev-points li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-deep); } .btn-inverse { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); } .btn-inverse:hover { border-color: #fff; } @media (max-width: 900px) { .api-grid { grid-template-columns: 1fr; } } /* compare pages */ .cmp-para { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; } .cmp-wrap { margin-top: 24px; } .cmp-wrap th.cmp-us { color: var(--accent-deep); } .cmp-cell { display: flex; align-items: flex-start; gap: 6px; } .cmp-cell svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-deep); } .cmp-them { color: var(--ink-soft); } .cmp-cap { margin: 12px 0 8px; } .cmp-their { margin-top: 36px; } .cmp-their p { margin-top: 8px; font-size: 14px; line-height: 1.65; } .cmp-cta-note { text-align: center; margin-top: 12px; } /* terminal — the platform page's API mock. */ .terminal { background: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-pop); } .terminal-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .terminal-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; background: rgba(255, 255, 255, .18); } .terminal-bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, .45); } .terminal pre { margin: 0; padding: 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .85); overflow-x: auto; } /* The page's ink thumb disappears against the terminal's ink; this is the one scroll container on the site that has to invert. Both branches, same split as the global rule above. */ @supports not selector(::-webkit-scrollbar) { .terminal pre { scrollbar-color: rgba(255, 255, 255, .28) transparent; } } @supports selector(::-webkit-scrollbar) { .terminal pre::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .28); } .terminal pre::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .42); } } .terminal .t-dim { color: rgba(255, 255, 255, .45); } .terminal .t-acc { color: var(--accent); } .term-caret { color: rgba(255, 255, 255, .7); animation: caretBlink 1.1s steps(1) infinite; } @keyframes caretBlink { 50% { opacity: 0; } } /* calc — the loss calculator. */ .calc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; } .calc-field { display: block; margin-bottom: 18px; } .calc-field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; } .calc-input { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; } .calc-input input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 16px; font-weight: 600; padding: 9px 0; color: var(--ink); } .calc-input input:focus { outline: none; } .calc-input:focus-within { border-color: var(--accent); outline: 2px solid var(--accent-tint); } .calc-input .unit { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); flex: none; } .calc-result { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; justify-content: center; text-align: center; } .calc-result .cr-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .calc-result .cr-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.02em; color: var(--accent); margin: 10px 0 6px; } .calc-result .cr-detail { font-size: 13.5px; color: rgba(255, 255, 255, .7); } .calc-result .cr-reco { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: rgba(255, 255, 255, .85); } .calc-note { text-align: center; margin-top: 16px; } /* value cards with a small inline mock (features page). The explicit color * matters: the same mock renders inside the dark future band, where inherited * white text would vanish on the light bubbles. */ .vcard-mock { margin-top: 16px; background: var(--chat-bg); border-radius: 14px; padding: 14px; color: var(--ink); } .mock-bubble { max-width: 92%; background: #fff; border-radius: 12px; border-bottom-left-radius: 4px; box-shadow: 0 1px 1px rgba(25, 28, 48, .05); padding: 8px 11px; font-size: 12.5px; } .mock-bubble + .mock-bubble { margin-top: 8px; } .mock-bubble.mb-out { margin-left: auto; background: var(--bubble-out); border-radius: 12px; border-bottom-right-radius: 4px; } .mock-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 6px 2px; border-bottom: 1px dashed var(--line); } .mock-row:last-child { border-bottom: none; } .mock-row .mr-val { font-weight: 600; white-space: nowrap; } .mock-row.mr-total { font-weight: 700; border-top: 1px solid var(--line); border-bottom: none; margin-top: 2px; padding-top: 8px; } .mock-chipline { display: flex; flex-wrap: wrap; gap: 6px; } .mock-chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; } .mock-chip svg { width: 12px; height: 12px; color: var(--accent-deep); } .mock-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 2px; } .mock-line svg { width: 13px; height: 13px; flex: none; color: var(--accent-deep); } .mock-line .ml-dim { color: var(--ink-soft); } /* /fitur — the future band and the mock furniture. */ .future-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; } .m-list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .m-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .68); } .m-list li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent); } .m-list strong { color: #fff; font-weight: 600; } .future-note { margin-top: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .55); } .future-callout { margin-top: 18px; border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; } .fc-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; } .fc-desc { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; } .f-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .f-stat { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 14px 16px; } .f-stat dd { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--accent); } .f-stat dt { font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 2px; } .future-chat { margin-top: 12px; } .future-caption { margin-top: 10px; font-size: 12.5px; font-style: italic; color: rgba(255, 255, 255, .55); text-align: center; } .future-cta { margin-top: 40px; text-align: center; } .future-cta p { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; margin-bottom: 16px; } .mock-unread { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .mock-inbox-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; } .mock-inbox-row + .mock-inbox-row { margin-top: 6px; } .mi-name { font-weight: 700; } .mi-preview { flex-basis: 100%; color: var(--ink-soft); } .mock-progress { height: 6px; border-radius: 99px; background: #fff; margin-top: 10px; overflow: hidden; } .mock-progress i { display: block; height: 100%; width: 62%; border-radius: 99px; background: var(--accent); } .mock-prog-label { margin-top: 8px; font-size: 12px; color: var(--ink-soft); } .sp-caption { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; } .qrph { width: 112px; height: 112px; margin: 0 auto 12px; border-radius: 10px; background: repeating-linear-gradient(0deg, var(--ink) 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, var(--ink) 0 6px, #fff 6px 12px); position: relative; border: 6px solid #fff; outline: 1px solid var(--line); } .qrph-icon { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; background: #fff; border-radius: 8px; display: grid; place-items: center; } .qrph-icon svg { width: 18px; height: 18px; color: var(--ok); } .trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; margin-top: 36px; } .trust-row li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); } .trust-row li svg { width: 15px; height: 15px; flex: none; color: var(--accent-deep); } /* /kalkulator */ .calc-card { max-width: 880px; margin: 0 auto; padding: 32px; } .calc-card .grid-3 { margin-bottom: 4px; } .calc-slider { margin-top: 6px; } .calc-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .calc-slider-head output { font-size: 13px; color: var(--ink-soft); } input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--accent); } .calc-card .calc-result { margin-top: 26px; } .calc-note { text-align: center; margin-top: 14px; max-width: 56ch; margin-left: auto; margin-right: auto; } .calc-card .cta-row { margin-top: 24px; } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .calc-grid, .future-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .page-hero { padding: 48px 0 44px; } } /* ---------- reveal ---------- */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.on { opacity: 1; transform: none; } /* ---------- breakpoints ---------- */ @media (max-width: 1020px) { .plans { grid-template-columns: 1fr 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { .hero { padding: 44px 0 68px; } .hero-grid { grid-template-columns: 1fr; gap: 56px; } .steps, .reality-cards, .caps, .stats-grid, .tcards { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .nav-menu { display: block; } /* These two hide the BAR's copy only. homeLang and the sign-in link are each * rendered twice — once in the bar, once in the disclosure panel — so a * selector that matches both (`.nav .lang`, which is what this used to be) * does not move the control into the menu, it deletes the control: below * 1020px there was no way to switch language at all, and the panel's footer * was left as an empty row with a top border, which is the "stray divider" * that made this visible. Anything hidden here must be scoped to `.nav-right`. */ .nav-right > .nav-cta-login { display: none; } .nav-right > .lang { display: none; } /* Chips leave the phone's edges and become a 2-up grid under it. */ .phone-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-items: stretch; width: 100%; max-width: 420px; } .phone { grid-column: 1 / -1; justify-self: center; } .chip { position: static; animation: none; transform: none; --tx: 0%; } } @media (max-width: 640px) { section { padding: 64px 0; } .sec-head { margin-bottom: 40px; } .steps, .reality-cards, .caps, .plans, .foot-grid, .stats-grid, .tcards { grid-template-columns: 1fr; } .hero-cta .btn { width: 100%; } /* One column turns the six capability pictures into ~2000px of decoration * between the reader and the price, on the connection least able to afford * downloading it. They are decorative (alt=""), so the phone gets the name * row alone and never fetches them. */ .cap-img { display: none; } .cap-head { margin-bottom: 0; } .api-banner { padding: 28px 24px; } .cta-final { padding: 52px 24px; } /* Keep the page clear of the sticky bar once it can appear. */ body { padding-bottom: 68px; } } @media (max-width: 400px) { .wrap { padding: 0 20px; } h1 { font-size: 34px; } /* The bar carries brand + CTA + burger; at 360px the default gaps overflow * the row by ~16px, so the row tightens instead of clipping the button. */ .nav-inner { gap: 14px; } .nav-right { gap: 8px; } .btn-sm { padding: 8px 12px; } .logo { font-size: 18px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .chat .msg { opacity: 1; transform: none; } .js .reveal { opacity: 1; transform: none; } .typing { display: none !important; } }