/* ContactOne marketing site Token system mirrors in-app Theme.swift palettes. Default: clay (warm earthy). Switchable via data-palette on . Dark mode via data-mode="dark". */ /* ─── Tokens: Clay (default) ───────────────────────────────── */ :root, :root[data-palette="clay"][data-mode="light"] { --bg: #F4F0E8; --surface: #FBF8F2; --surface-2: #FFFFFF; --ink: #1A1714; --ink-2: #6B6258; --ink-3: #A19888; --line: #E8E0D2; --line-2: #DCD2BE; --accent: #B86A47; --accent-soft: #F2DBC7; --sage: #7E9F73; --sage-soft: #DCE7D5; --signal: #B85C3C; } :root[data-palette="clay"][data-mode="light"] { --deep: #241B14; } :root[data-palette="clay"][data-mode="dark"] { --deep: #2A231D; } :root[data-palette="forest"][data-mode="light"] { --deep: #16241A; } :root[data-palette="forest"][data-mode="dark"] { --deep: #1A2A1D; } :root[data-palette="mono"][data-mode="light"] { --deep: #1A1A18; } :root[data-palette="mono"][data-mode="dark"] { --deep: #22221F; } :root[data-palette="clay"][data-mode="dark"] { --bg: #1B1612; --surface: #221C18; --surface-2: #2A231D; --ink: #F4EFE6; --ink-2: #B8AC9A; --ink-3: #7C7163; --line: #2F2722; --line-2: #3B322A; --accent: #D08868; --accent-soft: #4A3225; --sage: #97BA8C; --sage-soft: #2C3A28; --signal: #E08566; } /* ─── Indigo (cool, new in-app default) ────────────────────── */ :root[data-palette="indigo"][data-mode="light"] { --bg: #EEEEF8; --surface: #F5F5FC; --surface-2: #FFFFFF; --ink: #1E1840; --ink-2: #5E5880; --ink-3: #6B6588; --line: #E0DEF2; --line-2: #CCC8E6; --accent: #5654D8; --accent-soft: #E3E1FA; --sage: #5B91A8; --sage-soft: #D9E7EE; --signal: #5654D8; --deep: #2A2170; } :root[data-palette="indigo"][data-mode="dark"] { --bg: #11141C; --surface: #181B25; --surface-2: #1F232F; --ink: #EEF0F6; --ink-2: #A5ACBE; --ink-3: #6D7488; --line: #262A35; --line-2: #323745; --accent: #8A95D6; --accent-soft: #292E45; --sage: #87B0C4; --sage-soft: #25333C; --signal: #8A95D6; --deep: #241E52; } /* ─── Forest ───────────────────────────────────────────────── */ :root[data-palette="forest"][data-mode="light"] { --bg: #ECF1EA; --surface: #F4F8F1; --surface-2: #FFFFFF; --ink: #131A14; --ink-2: #5C6759; --ink-3: #93A18E; --line: #DAE3D5; --line-2: #C2CFBC; --accent: #3F7A4E; --accent-soft: #D7E6D3; --sage: #6E8A66; --sage-soft: #DDE8D7; --signal: #3F7A4E; } :root[data-palette="forest"][data-mode="dark"] { --bg: #101510; --surface: #161D17; --surface-2: #1D261D; --ink: #EBF1E8; --ink-2: #A6B2A2; --ink-3: #6F7B6B; --line: #232C24; --line-2: #2E392F; --accent: #85B98E; --accent-soft: #26342A; --sage: #9DB594; --sage-soft: #243029; --signal: #85B98E; } /* ─── Mono ─────────────────────────────────────────────────── */ :root[data-palette="mono"][data-mode="light"] { --bg: #F2F2F0; --surface: #F9F9F7; --surface-2: #FFFFFF; --ink: #1A1A18; --ink-2: #5D5D5A; --ink-3: #9A9A96; --line: #E2E2DE; --line-2: #CECEC9; --accent: #1A1A18; --accent-soft: #DCDCD8; --sage: #5D5D5A; --sage-soft: #DCDCD8; --signal: #1A1A18; } :root[data-palette="mono"][data-mode="dark"] { --bg: #131311; --surface: #1A1A17; --surface-2: #22221F; --ink: #F2F2F0; --ink-2: #ACACA8; --ink-3: #6F6F6B; --line: #282824; --line-2: #34342F; --accent: #F2F2F0; --accent-soft: #2A2A26; --sage: #ACACA8; --sage-soft: #2A2A26; --signal: #F2F2F0; } /* ─── Reset + base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.5; scroll-behavior: smooth; transition: background-color .35s ease, color .35s ease; } body { background: var(--bg); color: var(--ink); } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* Type roles */ .serif { font-family: "Newsreader", "Iowan Old Style", "Georgia", serif; font-style: normal; font-feature-settings: "lnum" 1; } .mono { font-family: "JetBrains Mono", "SF Mono", "Menlo", ui-monospace, monospace; } .eyebrow { font-family: "JetBrains Mono", "SF Mono", "Menlo", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; } /* ─── Layout ───────────────────────────────────────────────── */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .wrap { padding: 0 20px; } } section { padding: 96px 0; position: relative; } @media (max-width: 720px) { section { padding: 64px 0; } } .hairline { height: 1px; background: var(--line); width: 100%; } /* ─── Brand mark (4-arc ring + cream disc with person silhouette) ─── */ .wordmark { display: inline-block; width: 32px; height: 32px; border-radius: 22.37%; overflow: hidden; color: var(--ink); /* monochrome: ground = ink (inverts in dark) */ --wm-fg: var(--bg); /* contrast color used for arcs + disc */ flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); vertical-align: middle; position: relative; top: 0; line-height: 0; } .wordmark svg { width: 100%; height: 100%; display: block; } .wordmark img { width: 100%; height: 100%; display: block; object-fit: cover; } .wordmark.lg { width: 44px; height: 44px; } .wordmark.sm { width: 22px; height: 22px; } /* ─── Nav ──────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 80%, transparent); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .nav.scrolled { border-bottom-color: var(--line); } .nav-row { display: flex; align-items: center; gap: 24px; height: 64px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; } .nav-brand .name { font-size: 15px; letter-spacing: -0.01em; } .nav-links { display: flex; gap: 28px; margin-left: 32px; } .nav-links a { font-size: 14px; color: var(--ink-2); transition: color .15s ease; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--ink); font-weight: 600; } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; } @media (max-width: 760px) { .nav-links { display: none; } } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; transition: transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn-primary { background: var(--deep); color: #fff; } .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { color: var(--ink); border: 1px solid var(--line-2); background: transparent; } .btn-ghost:hover { background: var(--surface); } .btn-accent { background: var(--accent); color: var(--surface-2); } .btn-accent:hover { transform: translateY(-1px); } .btn-link { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .btn-link:hover { text-decoration: underline; text-underline-offset: 4px; } .btn-appstore { height: 48px; padding: 0 22px 0 18px; background: var(--deep); color: #fff; border-radius: 12px; display: inline-flex; align-items: center; gap: 12px; font-weight: 500; } .btn-appstore .ico-apple { width: 24px; height: 24px; } .btn-appstore .stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .btn-appstore .stack .top { font-size: 10px; opacity: .8; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; } .btn-appstore .stack .bot { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .btn-appstore:hover { transform: translateY(-1px); } /* ─── Hero ─────────────────────────────────────────────────── */ .hero { padding: 64px 0 96px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; } .hero-eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } } .hero-h1 { font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-weight: 500; font-size: clamp(48px, 7.2vw, 96px); line-height: 0.96; letter-spacing: -0.035em; margin: 0 0 24px; color: var(--ink); text-wrap: balance; } .hero-h1 .num { font-weight: 600; font-style: italic; letter-spacing: -0.04em; color: var(--accent); } .hero-h1 em { font-style: italic; font-weight: 500; color: var(--ink-2); } .hero-sub { font-size: 19px; color: var(--ink-2); max-width: 38ch; margin: 0 0 36px; line-height: 1.5; text-wrap: pretty; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-meta { display: flex; align-items: center; gap: 18px; margin-top: 28px; color: var(--ink-3); font-size: 13px; } .hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); display: inline-block; } .hero-meta .rating { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; } .hero-meta .stars { color: var(--accent); letter-spacing: 1px; } /* Hero phone container */ .hero-phone-wrap { position: relative; display: flex; justify-content: center; align-items: center; } .hero-phone-wrap::before { content: ""; position: absolute; inset: -20% -10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); z-index: 0; filter: blur(40px); pointer-events: none; } .hero-phone-wrap > * { position: relative; z-index: 1; } /* ─── Counter strip ────────────────────────────────────────── */ .counter-strip { padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .counter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: end; } @media (max-width: 760px) { .counter-row { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } } .counter-cell { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); padding-left: 20px; } .counter-cell:first-child { border-left: 0; padding-left: 0; } @media (max-width: 760px) { .counter-cell:nth-child(3) { border-left: 0; padding-left: 0; } } .counter-cell .label { font-family: "JetBrains Mono", "SF Mono", "Menlo", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .counter-cell .num { font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-size: clamp(36px, 5vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .counter-cell .unit { font-size: 13px; color: var(--ink-2); } /* ─── Cleanup actions (home) ───────────────────────────────── */ .cleanup{background:var(--bg)} .clean-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.clean-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.clean-grid{grid-template-columns:1fr}} .clean-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;transition:border-color .2s ease} .clean-card:hover{border-color:var(--line-2)} .clean-card.custom{background:var(--deep);border-color:var(--deep)} .clean-card.custom *{color:var(--bg)} .clean-head{display:flex;align-items:center;gap:12px} .clean-ico{width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0} .clean-card.custom .clean-ico{background:color-mix(in srgb,var(--bg) 16%,transparent);color:var(--bg)} .clean-ico svg{width:20px;height:20px} .clean-card h3{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:20px;letter-spacing:-.015em;margin:0;color:var(--ink);line-height:1.15} .clean-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)} .clean-card.custom p{color:color-mix(in srgb,var(--bg) 80%,transparent)} .clean-demo{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-family:"JetBrains Mono",monospace;font-size:12px} .clean-line{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line)} .clean-card.custom .clean-line{background:color-mix(in srgb,var(--bg) 8%,transparent);border-color:color-mix(in srgb,var(--bg) 16%,transparent)} .clean-line .tag{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0} .clean-line.was .tag{color:var(--ink-3)} .clean-line.was .txt{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--signal)} .clean-line.now .tag{color:var(--accent)} .clean-card.custom .clean-line.now .tag{color:var(--bg)} .clean-line.now .txt{color:var(--ink);font-weight:500} .clean-line .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clean-arrow{align-self:center;color:var(--ink-3);line-height:0} /* ─── Section header ───────────────────────────────────────── */ .sec-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; margin-bottom: 56px; align-items: end; } @media (max-width: 800px) { .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; } } .sec-head h2 { font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-weight: 500; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .sec-head h2 em { font-style: italic; color: var(--ink-2); font-weight: 500; } .sec-head p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; text-wrap: pretty; } /* ─── Features ─────────────────────────────────────────────── */ .features { background: var(--bg); } .feat-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; } @media (max-width: 960px) { .feat-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } } .feat { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: border-color .2s ease, transform .2s ease; } .feat:hover { border-color: var(--line-2); } .feat-lg { grid-row: span 2; padding: 32px; } .feat .num-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 12px; } .feat h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; color: var(--ink); text-wrap: balance; } .feat-lg h3 { font-size: 36px; } .feat p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; text-wrap: pretty; } .feat .vis { margin-top: 24px; flex: 1 1 auto; } /* ─── Process / How it works ───────────────────────────────── */ .process { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } @media (max-width: 800px) { .process-row { grid-template-columns: 1fr; gap: 36px; } } .step { display: flex; flex-direction: column; gap: 14px; position: relative; } .step-num { font-family: "Newsreader", Georgia, serif; font-style: normal; font-weight: 500; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--accent); display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); } .step .step-shot { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--ink) 45%, transparent); background: var(--surface-2); aspect-ratio: 1284 / 1000; } .step .step-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .step h4 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 24px; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .step p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; } /* ─── Privacy ──────────────────────────────────────────────── */ .privacy { background: var(--deep); color: var(--bg); position: relative; overflow: hidden; } .privacy * { color: inherit; } .privacy .wrap { position: relative; z-index: 1; } .privacy::after { content: "1"; position: absolute; right: -4%; bottom: -28%; font-family: "Newsreader", Georgia, serif; font-size: 64vh; line-height: 1; font-weight: 500; font-style: italic; color: color-mix(in srgb, var(--bg) 5%, transparent); z-index: 0; pointer-events: none; user-select: none; } .privacy h2 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 24px; max-width: 18ch; } .privacy h2 em { font-style: italic; color: color-mix(in srgb, var(--bg) 60%, transparent); font-weight: 500; } .privacy-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; } @media (max-width: 800px) { .privacy-grid { grid-template-columns: 1fr; } } .privacy-points { display: flex; flex-direction: column; gap: 0; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); } .privacy-points li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); } .privacy-points li .k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, transparent); white-space: nowrap; padding-top: 3px; } .privacy-points li .v { font-size: 17px; line-height: 1.5; text-wrap: pretty; } .privacy-points li .v strong { font-weight: 600; } /* ─── Pricing ──────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; } @media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } } .plan { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 24px; } .plan.featured { background: var(--deep); color: var(--bg); border-color: var(--deep); } .plan.featured * { color: inherit; } .plan .plan-name { font-family: "Newsreader", Georgia, serif; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0; } .plan .plan-price { display: flex; align-items: baseline; gap: 6px; } .plan .plan-price .big { font-family: "Newsreader", Georgia, serif; font-size: 72px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; } .plan .plan-price .per { font-size: 15px; color: var(--ink-2); } .plan.featured .plan-price .per { color: color-mix(in srgb, var(--bg) 65%, transparent); } .plan .plan-blurb { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0; } .plan.featured .plan-blurb { color: color-mix(in srgb, var(--bg) 75%, transparent); } .plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; } .plan.featured .plan-list { border-top-color: color-mix(in srgb, var(--bg) 18%, transparent); } .plan-list li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--ink); } .plan.featured .plan-list li { color: var(--bg); } .plan-list li svg { margin-top: 4px; color: var(--accent); } .plan.featured .plan-list li svg { color: var(--bg); } .plan-cta { margin-top: auto; } /* ─── Testimonials ─────────────────────────────────────────── */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } } .quote { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 18px; } .quote-body { font-family: "Newsreader", Georgia, serif; font-size: 22px; line-height: 1.32; letter-spacing: -0.012em; margin: 0; color: var(--ink); text-wrap: pretty; } .quote-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; } .quote-foot .who { font-size: 13px; font-weight: 600; color: var(--ink); } .quote-foot .what { font-size: 12px; color: var(--ink-3); } .quote-avi { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 13px; } /* ─── FAQ ──────────────────────────────────────────────────── */ .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: "Newsreader", Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .chev { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); transition: transform .25s ease, background .15s ease; flex-shrink: 0; } .faq-item[open] .chev { transform: rotate(45deg); background: var(--accent); color: var(--surface-2); border-color: var(--accent); } .faq-body { padding: 0 0 28px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 68ch; text-wrap: pretty; } /* ─── CTA strip ────────────────────────────────────────────── */ .cta-strip { background: var(--accent-soft); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; margin: 0; } @media (max-width: 820px) { .cta-strip { grid-template-columns: 1fr; padding: 36px; } } .cta-strip h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.022em; margin: 0; color: var(--ink); } .cta-strip h3 em { font-style: italic; color: var(--accent); font-weight: 500; } .cta-strip .actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } /* ─── Footer ───────────────────────────────────────────────── */ .foot { padding: 64px 0 48px; border-top: 1px solid var(--line); } .foot-row { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; } @media (max-width: 800px) { .foot-row { grid-template-columns: 1fr 1fr; } } .foot-col h5 { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; } .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .foot-col li a { font-size: 14px; color: var(--ink-2); transition: color .15s ease; } .foot-col li a:hover { color: var(--ink); } .foot-brand { display: flex; flex-direction: column; gap: 18px; max-width: 36ch; } .foot-brand .blurb { font-size: 14px; color: var(--ink-2); line-height: 1.5; } .foot-bot { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-3); gap: 16px; flex-wrap: wrap; } /* ─── Mock phone bezel + screens ───────────────────────────── */ .phone { position: relative; width: 320px; aspect-ratio: 320 / 668; background: var(--ink); border-radius: 44px; padding: 9px; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 0%, transparent) inset, 0 28px 60px -20px color-mix(in srgb, var(--ink) 35%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--ink) 18%, transparent); } .phone .screen { width: 100%; height: 100%; background: var(--bg); border-radius: 36px; position: relative; overflow: hidden; color: var(--ink); display: flex; flex-direction: column; } .phone .notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; background: #000; border-radius: 14px; z-index: 10; } .phone .statusbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); height: 44px; flex-shrink: 0; } .phone .statusbar .ico-stack { display: inline-flex; gap: 4px; align-items: center; } .phone .tabbar { margin-top: auto; flex-shrink: 0; padding: 8px 4px 18px; border-top: 1px solid var(--line); background: var(--surface); display: grid; grid-template-columns: repeat(5, 1fr); } .phone .tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--ink-3); } .phone .tabbar .tab.active { color: var(--accent); } .phone .tabbar .tab svg { width: 22px; height: 22px; } .phone .body { flex: 1; overflow: hidden; padding: 12px 20px 12px; } /* small phone variant for feature cards */ .phone.sm { width: 100%; max-width: 240px; } .phone.xs { width: 100%; max-width: 210px; } /* real screenshot filling a bezel */ .phone .screen img.phone-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 36px; } .phone.xs .screen img.phone-img { border-radius: 27px; } /* cropped "screen peek" of a real screenshot inside a feature card */ .vis-shot { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--ink) 40%, transparent); background: var(--surface-2); } .vis-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .vis-shot-tall { min-height: 320px; } /* ─── Mini phone screens ───────────────────────────────────── */ .home-hero-screen { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; } .hh-top { display: flex; align-items: center; justify-content: space-between; } .hh-cap { font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .hh-num { font-family: "Newsreader", Georgia, serif; font-size: 64px; font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); margin-top: -2px; } .hh-num small { font-size: 24px; vertical-align: top; margin-left: 4px; color: var(--ink-3); } .hh-desc { font-size: 13px; color: var(--ink-2); line-height: 1.35; margin-top: -2px; } .hh-stats { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: end; gap: 8px; padding: 10px 0 0; } .hh-stats .sep { background: var(--line); height: 28px; align-self: center; } .hh-stat .v { font-family: "Newsreader", Georgia, serif; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } .hh-stat .l { font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; } .hh-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; margin-top: 6px; } .hh-card .ico { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .hh-card .ico svg { width: 18px; height: 18px; } .hh-card .tx { display: flex; flex-direction: column; gap: 2px; } .hh-card .tx .t { font-size: 12px; font-weight: 600; color: var(--ink); } .hh-card .tx .s { font-size: 10px; color: var(--ink-2); } .hh-card .chev { margin-left: auto; color: var(--ink-3); } /* Duplicates list mini-screen */ .dup-list { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; } .dup-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .dup-row .avi { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; } .dup-row .name { font-size: 12px; font-weight: 600; color: var(--ink); } .dup-row .meta { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; } .dup-row .pill { margin-left: auto; background: var(--accent); color: var(--surface-2); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; font-family: "JetBrains Mono", monospace; } /* Merge review mini */ .mr-head { text-align: center; padding-top: 4px; } .mr-avi { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 24px; font-weight: 600; margin: 0 auto 8px; font-family: "Newsreader", Georgia, serif; } .mr-name { font-size: 16px; font-weight: 600; color: var(--ink); } .mr-sub { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 3px; text-transform: uppercase; } .mr-field { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .mr-field .lab { font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .mr-pick { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-size: 11px; } .mr-pick.sel { border-color: var(--accent); background: var(--accent-soft); } .mr-pick .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-3); flex-shrink: 0; } .mr-pick.sel .dot { border-color: var(--accent); background: var(--accent); position: relative; } .mr-pick.sel .dot::after { content: ""; position: absolute; inset: 2.5px; background: var(--surface-2); border-radius: 50%; } .mr-pick .val { color: var(--ink); } .mr-pick .tag { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); } .mr-pick.warn .tag { color: var(--accent); } .mr-actions { margin-top: 12px; display: flex; gap: 6px; } .mr-actions .b { flex: 1; height: 30px; border-radius: 999px; font-size: 11px; font-weight: 600; display: grid; place-items: center; } .mr-actions .b.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); } .mr-actions .b.solid { background: var(--ink); color: var(--bg); } /* Settings mini */ .set-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .set-card .row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; } .set-card .row .lab { color: var(--ink); font-weight: 500; } .set-card .row .val { color: var(--ink-3); } .set-card .row.sw .val { width: 28px; height: 16px; border-radius: 999px; background: var(--accent); position: relative; } .set-card .row.sw .val::after { content: ""; position: absolute; right: 1.5px; top: 1.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--surface-2); } .pal-swatches { display: flex; gap: 6px; margin-top: 4px; } .pal-swatches .sw { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid transparent; } .pal-swatches .sw.active { border-color: var(--ink); } /* Generic helpers */ .grow { flex: 1; } .row-flex { display: flex; align-items: center; gap: 12px; } /* Hero variant: "counter" */ .hero[data-variant="counter"] .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 48px; } .hero[data-variant="counter"] .hero-eyebrow, .hero[data-variant="counter"] .hero-ctas, .hero[data-variant="counter"] .hero-meta { justify-content: center; } .hero[data-variant="counter"] .hero-sub { margin-left: auto; margin-right: auto; } .hero[data-variant="counter"] .hero-phone-wrap { order: 99; } .hero[data-variant="counter"] .hero-h1 { font-size: clamp(64px, 12vw, 168px); } .hero[data-variant="counter"] .big-counter { display: block; } .big-counter { display: none; } .big-counter .lead-mono { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 12px; } /* Visualizations inside feature cards */ .vis-stack { position: relative; height: 220px; display: flex; align-items: end; justify-content: center; padding-bottom: 4px; } .vis-stack .phone { transform: translateY(8px); } .vis-cards { position: relative; height: 220px; display: flex; flex-direction: column; gap: 8px; justify-content: end; } .vis-cards .c { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 13px; } .vis-cards .c .avi { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; } .vis-cards .c .nm { font-weight: 600; color: var(--ink); } .vis-cards .c .meta { color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .vis-cards .c.merge { background: var(--accent-soft); border-color: var(--accent); border-style: dashed; color: var(--accent); justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .vis-arc { position: relative; height: 220px; display: grid; place-items: center; } .vis-arc svg { width: 100%; height: 100%; max-width: 220px; } .vis-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .vis-palette .swatch { border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); } .vis-palette .swatch .nm { font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .vis-palette .swatch .chips { display: flex; gap: 3px; } .vis-palette .swatch .chip { width: 10px; height: 10px; border-radius: 3px; } .vis-undo { height: 220px; display: flex; flex-direction: column; gap: 8px; justify-content: end; } .vis-undo .row { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; } .vis-undo .row .stamp { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; } .vis-undo .row .nm { color: var(--ink); font-weight: 600; } .vis-undo .row .undo { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } /* ─── "Also" strip (move/copy between accounts) ───────── */ .also { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .also-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 800px) { .also-grid { grid-template-columns: 1fr; gap: 32px; } } .also-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .also h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -0.022em; margin: 0 0 16px; color: var(--ink); text-wrap: balance; } .also h3 em { font-style: italic; color: var(--ink-2); font-weight: 500; } .also p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 42ch; } .also .meta { display: flex; gap: 24px; margin-top: 22px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .also .meta strong { color: var(--ink); font-weight: 600; } /* ─── Home pillars ─────────────────────────────────────────── */ .pillars{background:var(--bg);border-top:1px solid var(--line)} .pillar{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:60px 0;border-bottom:1px solid var(--line)} .pillar.rev .pillar-media{order:2} @media(max-width:820px){.pillar{grid-template-columns:1fr;gap:26px;padding:44px 0}.pillar.rev .pillar-media{order:0}} .pillar-eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .pillar h2{font-family:"Newsreader","Iowan Old Style",Georgia,serif;font-weight:500;font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink);text-wrap:balance} .pillar h2 em{font-style:italic;color:var(--ink-2)} .pillar p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:46ch} .pillar-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:46ch} .pillar-note svg{flex-shrink:0;margin-top:1px;color:var(--sage)} .pillar-media{display:flex;justify-content:center} @media(max-width:820px){.pillar-media .phone{max-width:280px}} /* ─── Trust band ───────────────────────────────────────────── */ .trust{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0} .trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px} @media(max-width:760px){.trust-row{grid-template-columns:repeat(2,1fr);row-gap:30px}} .trust-cell{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .trust-cell .ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)} .trust-cell h4{margin:0;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .trust-cell p{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3);max-width:28ch} /* ─── Language / appearance strip ──────────────────────────── */ .langbar{background:var(--bg);border-bottom:1px solid var(--line);padding:26px 0} .langbar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;text-align:center} .langbar .lead{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .lang-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .lang-chip{padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--ink-2);background:var(--surface)} .appearance{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)} .appearance svg{color:var(--ink-3)} /* ─── Subscription terms (pricing) ─────────────────────────── */ .sub-terms{max-width:760px;margin:34px auto 0;padding-top:26px;border-top:1px solid var(--line);text-align:center} .sub-terms h4{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:"JetBrains Mono",monospace;color:var(--ink-3)} .sub-terms p{margin:0 auto;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:72ch} .sub-terms .sub-links{margin-top:14px} .sub-terms .sub-links a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px} /* Move-between-accounts diagram */ .move-diagram { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; position: relative; } .move-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .move-col .col-head { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--line); } .move-col .col-head .acct-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .move-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; } .move-card.copy { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .move-card.copy .nm { color: var(--accent); } .move-card.ghost { opacity: 0.5; border-style: dashed; } .move-card .avi { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); color: var(--ink); display: grid; place-items: center; font-size: 10px; font-weight: 600; flex-shrink: 0; } .move-card.copy .avi { background: var(--accent); color: var(--surface-2); } .move-card .nm { font-weight: 600; color: var(--ink); } .move-card .meta-r { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .move-arrow { display: grid; place-items: center; align-self: center; color: var(--accent); position: relative; } .move-arrow svg { width: 28px; height: 28px; } .move-arrow .label { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } /* utility for the gentle scroll fade */ .fade-in { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; } .fade-in.in { opacity: 1; transform: none; } /* Selection */ ::selection { background: var(--accent-soft); color: var(--ink); }