/* FluffCams sales site: the ONE stylesheet of the shared look. Colours only as the variables below. */

:root {
  /* the shared colours, page width and fonts come from tokens.css (loaded first on every page); these are the old pages' own extras,
     set to the same palette so every page is one site */
  --bg-2: var(--bg-band);
  --line: var(--border);
  --line-2: var(--border-3);
  --accent-ink: var(--on-accent);
  --accent-soft: rgba(197, 248, 42, .12);
  --accent-glow: rgba(197, 248, 42, .22);
  --second: #8b7cff;          /* the secondary colour */
  --second-soft: rgba(139, 124, 255, .16);
  --ok: #4ade80;
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, .65), 0 0 0 1px var(--line);
  --r: 14px;
  --r-lg: 22px;
  --hdr-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--font-body), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i .i-fill { fill: currentColor; stroke: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 30px -8px var(--accent-glow); }
.btn-primary:hover { color: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 12px 36px -8px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); }
.btn-quiet { background: var(--surface-2); color: var(--text); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */
/* an invisible bridge over the 10px gap, so the menu stays open while the pointer moves down into it */


/* ---------- sections ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec-tight { padding: clamp(40px, 6vw, 72px) 0; }
.sec-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { max-width: 760px; margin: 0 0 clamp(32px, 5vw, 56px); }
.sec-head.is-center { margin-inline: auto; text-align: center; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 760px; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%), radial-gradient(closest-side at 80% 30%, var(--second-soft), transparent 70%); pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); }
@media (min-width: 1100px) {
  .hero { padding-top: clamp(40px, 5vw, 72px); }
  .hero-in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 48px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 3.9vw, 3.7rem); }
  .stage { margin-right: -6%; }
}
.hero-copy { max-width: 720px; }
.hero-copy .lead { margin-bottom: 30px; }
.hero-note { margin-top: 18px; color: var(--faint); font-size: 14px; }
.stage { position: relative; perspective: 2000px; padding-bottom: 6%; }
.stage-main { transform: rotateX(8deg) rotateY(-10deg) rotateZ(1deg); transform-origin: 60% 50%; animation: settle 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.stage-phone { position: absolute; right: 2%; bottom: 0; width: 23%; min-width: 120px; animation: rise 1.2s .25s cubic-bezier(.2, .7, .2, 1) both; }
.float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 14px; background: rgba(21, 24, 33, .92); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; backdrop-filter: blur(8px); animation: rise 1s .7s both; }
.float small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.float .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.float .av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--live); }
.float .up { color: var(--ok); font-weight: 700; }
.float .live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); vertical-align: 1px; animation: pulse 1.8s ease-out infinite; }
/* where each card sits over the picture, and its own slow drift so the scene feels alive */
.float-show { left: -2%; top: 9%; animation: rise 1s .6s both, bob 6s 1.6s ease-in-out infinite; }
.float-tip { right: 21%; bottom: 18%; animation: rise 1s .9s both, bob 5s 1.9s ease-in-out infinite; }
.float-goal { right: 25%; top: -3%; flex-direction: column; align-items: stretch; gap: 8px; min-width: 210px; animation: rise 1s 1.1s both, bob 7s 2.1s ease-in-out infinite; }
.float-earn { left: 4%; bottom: 2%; flex-direction: column; align-items: flex-start; gap: 4px; animation: rise 1s 1.3s both, bob 6.5s 2.3s ease-in-out infinite; }
.goal-t { display: flex; justify-content: space-between; gap: 16px; } .goal-t b { color: var(--accent); }
.float .bar { display: block; height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.float .bar i { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--second), var(--accent)); animation: grow 1.6s 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.earn-l { color: var(--muted); font-size: 12px; font-weight: 500; }
.earn-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .earn-n small { font-size: 13px; margin-left: 4px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 4px; }
.bars i { width: 12px; border-radius: 3px 3px 0 0; background: var(--accent-soft); animation: grow-up .8s both; }
.bars i:nth-child(1) { height: 35%; animation-delay: 1.5s; } .bars i:nth-child(2) { height: 50%; animation-delay: 1.58s; } .bars i:nth-child(3) { height: 42%; animation-delay: 1.66s; }
.bars i:nth-child(4) { height: 64%; animation-delay: 1.74s; } .bars i:nth-child(5) { height: 58%; animation-delay: 1.82s; } .bars i:nth-child(6) { height: 80%; animation-delay: 1.9s; }
.bars i:nth-child(7) { height: 100%; background: var(--accent); animation-delay: 1.98s; }
@keyframes settle { from { opacity: 0; transform: rotateX(18deg) rotateY(-18deg) translateY(40px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes grow { from { width: 0; } }
@keyframes grow-up { from { height: 0; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 900px) { .float-goal, .float-earn { display: none; } }
@media (max-width: 640px) {
  .stage-main { transform: none; }
  .float-tip { right: 25%; bottom: 8%; }
  .float-show { left: 0; top: -4%; }
  .float { font-size: 12px; padding: 8px 11px; }
  .float .dot { width: 26px; height: 26px; }
  .float .av { width: 30px; height: 30px; }
}

/* ---------- screenshot frames ---------- */
.shot { margin: 0; position: relative; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.shot-in img { width: 100%; height: auto; }
.shot-bar { display: flex; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.shot-phone { border-radius: 34px; padding: 9px; background: #000; box-shadow: var(--shadow), inset 0 0 0 2px #2a2d36; }
.shot-phone .shot-in { border-radius: 26px; overflow: hidden; }
.shot-none { border-radius: var(--r); }
.shot-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
/* the walkthrough video: a still with a play button until it is pressed */
.wt { max-width: 1040px; margin: 0 auto; }
.wt-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.wt-play img, .wt-v { display: block; width: 100%; height: auto; }
.wt-btn { position: absolute; left: 50%; top: 78%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 17px; box-shadow: 0 14px 40px -10px var(--accent-glow); transition: transform .15s; }
.wt-btn small { font-weight: 600; opacity: .7; margin-left: 4px; }
.wt-btn .i { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.wt-play:hover .wt-btn, .wt-play:focus-visible .wt-btn { transform: translate(-50%, -50%) scale(1.05); }
@media (max-width: 640px) { .wt-btn { font-size: 14px; padding: 10px 16px 10px 12px; top: 82%; } }
/* a phone clip beside a feature text: not wider than a phone */
.row-phone { max-width: 300px; justify-self: center; width: 100%; }
/* a looping clip in a frame (clips.js): the same frame as a screenshot, a small pause / play button in the corner */
.clip .shot-in { position: relative; }
.clip-v { display: block; width: 100%; height: auto; background: var(--surface-2); }
.clip-btn { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(11, 12, 16, .72); color: var(--text); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s; backdrop-filter: blur(6px); }
.clip:hover .clip-btn, .clip-btn:focus-visible, .clip-btn.is-paused { opacity: 1; }
.clip-btn .i { width: 18px; height: 18px; }
.clip-btn .i-play, .clip-btn.is-paused .i-pause { display: none; }
.clip-btn.is-paused .i-play { display: block; }
.shot-phone.clip .clip-btn { right: 18px; bottom: 18px; }
@media (hover: none) { .clip-btn { opacity: 1; } }
.glow { position: relative; }
.glow::before { content: ""; position: absolute; inset: -12% -8%; background: radial-gradient(closest-side, var(--accent-glow), transparent 72%); filter: blur(10px); z-index: -1; }

/* ---------- trust strip ---------- */
.trust { border-block: 1px solid var(--line); background: var(--bg-2); }
.trust ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.trust li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; font-weight: 500; }
.trust .i { color: var(--accent); }
@media (max-width: 899px) { .trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- feature rows and cards ---------- */
.rows { display: grid; gap: clamp(64px, 9vw, 120px); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row:nth-child(even) .row-copy { order: 2; }
.row-copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.row-copy p { color: var(--muted); }
.row-copy .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--accent); }
.row-copy .more .i { width: 18px; height: 18px; transition: transform .15s; }
.row-copy .more:hover .i { transform: translateX(3px); }
@media (max-width: 899px) {
  .row, .row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .row:nth-child(even) .row-copy { order: 0; }
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
a.card { display: block; text-decoration: none; color: var(--text); }
a.card:hover { border-color: var(--line-2); transform: translateY(-2px); color: var(--text); }
.card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.5px; margin: 0; }
.card .count { display: block; margin-top: 16px; color: var(--faint); font-size: 14px; }
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .i { color: var(--accent); margin-top: 3px; width: 18px; height: 18px; stroke-width: 2.4; }
.checks-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 28px; }

/* ---------- tabs (three views) ---------- */
.tabs-bar { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 28px; }
.tabs-bar button { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 15px; padding: 9px 20px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.tabs-bar button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.tab-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 56px); align-items: center; animation: fade .35s ease; }
.tab-panel[hidden] { display: none; }
.tab-panel p { color: var(--muted); }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 899px) { .tab-panel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.plan.is-main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 80px -30px var(--accent-glow); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.plan-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.plan h3, .plan .h3 { font-size: 1.35rem; }
.plan-sum { color: var(--muted); font-size: 15.5px; min-height: 3.2em; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 4px; }
.price b { font-size: 2.8rem; letter-spacing: -.04em; line-height: 1; }
.price s { color: var(--faint); font-size: 1.15rem; }
.price-note { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.plan .checks { margin: 6px 0 26px; font-size: 15.5px; flex: 1; }
.plan .btn { width: 100%; }
.sale { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 18px; }

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 620px; }
table.cmp th, table.cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { font-size: 14px; color: var(--muted); font-weight: 600; background: var(--surface-2); }
table.cmp tbody tr:last-child td, table.cmp tbody tr:last-child th { border-bottom: 0; }
table.cmp tbody th { font-weight: 500; color: var(--text); }
table.cmp td .i { color: var(--accent); }
table.cmp .no { color: var(--faint); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform .2s; color: var(--muted); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq-a { padding: 0 22px 18px; color: var(--muted); }
.faq-a p { margin: 0; }

/* ---------- bands ---------- */
.honest { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.honest p { color: var(--muted); }
@media (max-width: 899px) { .honest { grid-template-columns: minmax(0, 1fr); } }
.cta-band { padding: clamp(56px, 8vw, 96px) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 120%, var(--accent-soft), transparent 70%); }
.cta-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-in h2 { margin-bottom: 8px; }
.cta-in p { color: var(--muted); margin: 0; max-width: 560px; }
.idea { padding: 0 0 clamp(40px, 6vw, 72px); }
.idea-in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 24px 28px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); }
.idea-in > .i { width: 34px; height: 34px; color: var(--accent); }
.idea-in > div { flex: 1; min-width: 240px; }
.idea-in h2 { font-size: 1.2rem; margin-bottom: 4px; letter-spacing: -.01em; }
.idea-in p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------- feature list (search) ---------- */
.fl-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.fl-tools input, .fl-tools select { font: inherit; font-size: 16px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); }
.fl-tools input { flex: 1; min-width: 220px; }
.fl-group { margin-bottom: 44px; }
.fl-group h2 { font-size: 1.5rem; }
.fl-item { padding: 18px 0; border-top: 1px solid var(--line); }
.fl-item h3 { font-size: 1.05rem; margin-bottom: 4px; }
.fl-item p { color: var(--muted); margin: 0 0 6px; font-size: 15.5px; }
.fl-item ul { margin: 0; padding-left: 18px; color: var(--faint); font-size: 14.5px; }
.fl-empty { color: var(--muted); }

/* ---------- footer ---------- */

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(5, 6, 9, .92); animation: fade .2s; }
.lb img { max-width: min(calc(100vw - 48px), 1600px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: var(--shadow); }
.lb-x { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }

/* ---------- 404 and small pages ---------- */
.notfound { text-align: center; padding: clamp(80px, 12vw, 160px) 0; }
.notfound .btns { justify-content: center; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stage-main { transform: none; }
}

/* ---------- small helpers ---------- */
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec-more { margin: 28px 0 0; }
.sec-more .more, .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--accent); }
.more .i { width: 18px; height: 18px; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--muted); }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.row-copy .checks + p { margin-top: 22px; }

/* ---------- shop: forms ---------- */
.form { display: grid; gap: 18px; }
.fld { display: grid; gap: 7px; }
.fld label, .fld-set legend { font-weight: 600; font-size: 15px; }
.fld input, .fld select, .fld textarea, .filters input, .filters select {
  font: inherit; font-size: 16px; min-height: 48px; padding: 10px 14px; width: 100%;
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text);
}
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld input[type="file"] { padding: 10px; }
.fld-help { color: var(--faint); font-size: 14px; }
.fld-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--muted); cursor: pointer; }
.fld-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.fld-set { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin: 0; display: grid; gap: 14px; }
.fld-set > *, .dom-new > *, .dom-own > *, .dom-contact > *, .fld-row > *, .dom-search > input { min-width: 0; } /* grid and flex items shrink to the phone instead of widening the page */
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: start; }
.form .btn { justify-self: start; }
.form-links { color: var(--muted); font-size: 15px; margin: 0; }
.form-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 14px 0; }
.form-inline .fld { flex: 1; min-width: 200px; }
.form-inline h3 { width: 100%; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp input { font-size: 16px; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
button.btn { font: inherit; font-weight: 600; cursor: pointer; }
button.btn.btn-sm { font-size: 14.5px; } /* after the font: inherit above, so a small button in a form is the same size as a small link button */
.acc-main .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; } /* (components.css with the marketing .btn-row is not loaded in the account area) */
.inline-form { display: inline; margin: 0; }
.note { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); margin: 0 0 18px; }
.note-ok { border-color: var(--accent); }
.note-error { border-color: var(--live); }
.note-wait { border-color: var(--second); }

/* ---------- shop: sign-in / checkout frames ---------- */
.auth { padding: clamp(40px, 7vw, 88px) 0; }
.auth-in { max-width: 560px; }
.auth-in.auth-co { max-width: calc(650px + 2 * var(--gutter)); } /* the checkout: room for two fields side by side (owner 2026-11-04) */
.auth h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.co { display: grid; gap: 24px; }
.co > * { min-width: 0; } /* a long line in the summary must wrap, never widen the page on a phone */
.co-sum { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.co-sum p { color: var(--muted); }
.co-lines { margin: 0; display: grid; gap: 8px; }
.co-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.co-lines dt { color: var(--muted); }
.co-log { margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.co-lines .co-code dd { color: var(--accent); font-weight: 600; white-space: nowrap; }
.co-codebox { display: flex; align-items: flex-end; gap: 10px; }
.co-codebox > :first-child { flex: 1; min-width: 0; }
.co-codebox .btn { flex: none; min-height: 48px; padding-left: 22px; padding-right: 22px; } /* as tall as the code box beside it */
.co-codemsg { margin: 0; }
.co-lines dd { margin: 0; font-weight: 600; text-align: right; } /* never narrower than its longest word: a price never breaks */
.co-lines dt { min-width: 0; }
.co-lines s { color: var(--faint); font-weight: 400; margin-left: 6px; }
.co-lines .co-total dt, .co-lines .co-total dd { color: var(--text); font-weight: 700; }
.co-way[hidden] { display: none; } /* the price list's own display: grid would otherwise beat the hidden attribute */
.co-note { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); }
/* the payment plan's "While you pay" choice: two cards, the chosen one marked (owner 2026-11-03) */
.co-host { display: grid; gap: 10px; }
.co-opt { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--muted); text-decoration: none; }
.co-opt b { color: var(--text); }
.co-opt:hover { border-color: var(--accent); color: var(--muted); }
.co-opt.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }

/* ---------- shop: account and admin frame ---------- */
.acc { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.acc-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.acc-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--hdr-h) + 20px); align-self: start; }
.acc-nav a { padding: 10px 14px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.acc-nav a:hover { color: var(--text); background: var(--surface); }
.acc-nav a.is-on { color: var(--text); background: var(--surface-2); }
.acc-main h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.acc-main h2 { margin-top: 34px; }
.acc-main .card > h2:first-child { margin-top: 0; } /* a card's own heading needs no space above it */
.acc-main .card + .card, .acc-main .table-wrap + .form, .acc-main .form + .table-wrap { margin-top: 16px; }
.acc-table { min-width: 560px; font-size: 15px; }
/* lists with a customer column (admin orders, customers, overview): every cell stays on one line (HOUSE-10024 broke at its hyphen),
   only the customer's email wraps (two lines on a computer), and the columns sit a little closer so it has room */
@media (min-width: 700px) {
  .acc-table:has(.cell-wrap) td:first-child, .acc-table:has(.cell-wrap) td .st, .acc-table:has(.cell-wrap) td:nth-child(5) { white-space: nowrap; }
  .acc-table:has(.cell-wrap) th, .acc-table:has(.cell-wrap) td { padding-left: 8px; padding-right: 8px; }
  .acc-table .cell-wrap { display: block; min-width: 9em; white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 1200px) {
  .acc-table:has(.cell-wrap) td { white-space: nowrap; }
  .acc-table .cell-wrap { min-width: 13.5em; }
  .acc-table:has(.cell-wrap) th, .acc-table:has(.cell-wrap) td { padding-left: 12px; padding-right: 12px; }
}
.acc-table .cell-wrap { overflow-wrap: anywhere; }
.acc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.empty { color: var(--faint); }
.st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line-2); color: var(--muted); }
.st-ok { color: var(--accent); border-color: var(--accent); }
.st-wait { color: var(--second); border-color: var(--second); }
.st-bad { color: var(--live); border-color: var(--live); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.filters label { font-weight: 600; font-size: 15px; }
.filters input, .filters select { width: auto; min-width: 200px; }
.pager { margin-top: 16px; color: var(--muted); }
.panel-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.panel-edit { margin-top: 16px; }
.panel-edit summary { cursor: pointer; color: var(--muted); }
.panel-edit .form { margin-top: 12px; }
.cp-codes { margin: 12px 0 0; padding: 14px; border-radius: var(--r-md); background: var(--surface-3); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; white-space: pre; overflow-x: auto; user-select: all; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 10px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 20px; }
.kpi-n { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.kpi-l { color: var(--muted); font-size: 14px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
code.copy { display: inline-block; padding: 6px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); user-select: all; }
code.break { word-break: break-all; }
code.lic { font-size: 1.02rem; letter-spacing: .03em; }
pre.notes { white-space: pre-wrap; color: var(--muted); background: var(--surface); padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.pay-card { margin-bottom: 18px; }
.pay-what { color: var(--muted); margin: 0; }
.pay-amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; margin: 4px 0; }
.pay-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pay-way p { color: var(--muted); font-size: 15.5px; }
.dl-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.offer .eyebrow { margin-bottom: 8px; }
.offer-price { font-weight: 700; margin: 12px 0; color: var(--text); }
@media (max-width: 899px) {
  .acc-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .acc-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .acc-nav a { padding: 9px 12px; background: var(--surface); font-size: 15px; }
}
.acc-main h2 { font-size: 1.35rem; letter-spacing: -.015em; }
@media (max-width: 699px) {
  /* account / admin tables: each row a labelled card on a phone */
  .acc-main .table-wrap { overflow: visible; border: 0; background: none; }
  .acc-table, .acc-table.cmp { min-width: 0; } /* .cmp in frame.css (loaded later) asks for 620px: on a phone the rows are cards */
  .acc-table thead { display: none; }
  .acc-table, .acc-table tbody, .acc-table tr, .acc-table td { display: block; width: 100%; }
  .acc-table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 14px; margin-bottom: 12px; }
  .acc-table td { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
  .acc-table tr td:last-child { border-bottom: 0; }
  .acc-table td::before { content: attr(data-label); color: var(--faint); font-size: 14px; text-align: left; flex: none; max-width: 45%; }
  .acc-table td[data-label=""]::before { content: none; }
  .acc-table td code.copy { white-space: normal; word-break: break-all; text-align: left; }
  .acc-nav a { padding: 8px 12px; font-size: 14.5px; }
}
@media (max-width: 699px) {
  .acc-table td > * { min-width: 0; max-width: 100%; }
  .acc-table td code.copy { letter-spacing: 0; font-size: 14px; }
}
.price .per { color: var(--muted); font-size: 1rem; font-weight: 500; }

/* earn from day one (home) */
.earn { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 56px); align-items: center; padding: clamp(28px, 5vw, 52px); border-radius: var(--r-lg); border: 1px solid var(--accent); background: linear-gradient(135deg, var(--surface-2), var(--surface)); box-shadow: 0 30px 80px -40px var(--accent-glow); }
.earn p { color: var(--muted); }
.earn-programs { padding: 22px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.earn-h { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 10px; }
.progs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.progs li { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); font-weight: 600; font-size: 15px; color: var(--muted); }
.progs li.is-on { border-color: var(--accent); color: var(--text); }
@media (max-width: 899px) { .earn { grid-template-columns: minmax(0, 1fr); } }

/* checkout: domain search */
.dom-search { display: flex; gap: 10px; }
.dom-search input { flex: 1; font: inherit; font-size: 16px; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); }
.dom-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.dom-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.dom-row.is-picked { border-color: var(--accent); }
.dom-row.is-off .dom-name { color: var(--faint); }
.dom-name { font-weight: 600; overflow-wrap: anywhere; }
.dom-new, .dom-own { display: grid; gap: 12px; padding-left: 34px; }
.dom-new[hidden], .dom-own[hidden] { display: none; }
.dom-new > p, .dom-contact > p { margin: 0; } /* the grid gap spaces them; a paragraph's own margin made a hole */
.dom-contact .fld-row { gap: 12px 16px; } /* stacked on a phone, its rows sit as far apart as the box's other fields */
.dom-list:empty { display: none; } /* no empty row (and its gap) before the search has run */
.dom-contact { display: grid; gap: 12px; margin-top: 6px; }
@media (max-width: 520px) { .dom-new, .dom-own { padding-left: 0; } }

/* legal pages */
.legal { max-width: 860px; }
.legal-meta { color: var(--faint); font-size: 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.legal-nav a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); text-decoration: none; font-size: 14.5px; }
.legal-nav a[aria-current="page"] { border-color: var(--accent); color: var(--text); }
.prose h2 { font-size: 1.3rem; margin: 1.8em 0 .5em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }

/* reviews */
.review-stars { color: var(--accent); letter-spacing: 2px; font-size: 18px; margin: 0 0 10px; }
.review blockquote { margin: 0 0 14px; }
.review blockquote p { color: var(--muted); font-size: 15.5px; }
.review figcaption { color: var(--faint); font-size: 14px; }
.review figcaption a { color: var(--muted); }
.stars { display: grid; gap: 4px; }
.stars .fld-check span { color: var(--accent); letter-spacing: 2px; }
.review-form + .review-form, .review-admin + .review-admin { margin-top: 16px; }

/* tickets */
.thread { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.msg { padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.msg-staff { border-color: var(--accent); }
.msg-internal { border-style: dashed; border-color: var(--second); background: var(--bg-2); }
.msg-head { margin: 0 0 8px; }
.msg-body { color: var(--muted); overflow-wrap: anywhere; }
.details-box summary { cursor: pointer; font-weight: 600; }
.acc-main .form.card + .form.card { margin-top: 16px; }

/* earnings calculator */
.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.calc-in { display: grid; gap: 22px; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.calc-row label { font-weight: 600; font-size: 15.5px; }
.calc-row output { font-weight: 700; color: var(--accent); font-size: 17px; }
.calc-row input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 28px; }
.calc-res { padding: 24px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--accent); display: flex; flex-direction: column; justify-content: center; }
.calc-res p { margin: 0; }
.calc-l { color: var(--muted); font-size: 15px; }
.calc-res .calc-n { font-size: 1.5rem; font-weight: 700; margin: 2px 0 10px; }
.calc-res .calc-big { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; color: var(--accent); line-height: 1.1; margin: 4px 0; }
.calc-res .calc-note { margin-top: 16px; color: var(--faint); font-size: 13px; }
@media (max-width: 899px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.faq-group { font-size: 1.3rem; margin: 34px 0 14px; }
.prose-wrap .prose { max-width: 760px; }

/* documentation */
.doc { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
.doc-nav { position: sticky; top: calc(var(--hdr-h) + 16px); max-height: calc(100vh - var(--hdr-h) - 32px); overflow-y: auto; padding-right: 6px; }
.doc-nav input { width: 100%; font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); margin-bottom: 12px; }
.doc-toc, .doc-toc ul { list-style: none; margin: 0; padding: 0; }
.doc-toc > li { margin-bottom: 6px; }
.doc-toc a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14.5px; }
.doc-toc a:hover { color: var(--text); background: var(--surface); }
.doc-toc > li > a { color: var(--text); font-weight: 600; }
.doc-toc > li > a span { color: var(--accent); margin-right: 8px; }
.doc-toc ul a { padding-left: 26px; font-size: 13.5px; }
.doc-main { max-width: 820px; }
.doc-sec { padding-top: 10px; margin-bottom: 30px; border-top: 1px solid var(--line); }
.doc-sec h2 { font-size: 1.6rem; margin-top: 22px; }
.doc-main h3 { scroll-margin-top: calc(var(--hdr-h) + 16px); margin-top: 1.6em; font-size: 1.15rem; }
.doc-anchor { color: var(--faint); text-decoration: none; margin-right: 6px; font-weight: 400; }
.doc-note { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); margin: 14px 0; color: var(--muted); }
.doc-note.is-warn { border-color: var(--live); }
.doc-note.is-tip { border-color: var(--accent); }
.doc-code { overflow-x: auto; padding: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; }
.doc-main code { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .doc-nav { position: static; max-height: 46vh; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
}
/* the affiliate page: banners with their code, ready texts */
.aff-banners { display: grid; gap: 16px; }
.aff-banner { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; }
.aff-banner img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.aff-banner textarea, .aff-text textarea { width: 100%; min-height: 72px; font: 13px/1.45 var(--font-mono); resize: vertical; }
.aff-banner .aff-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.aff-text { display: grid; gap: 8px; margin-top: 14px; }
.aff-text textarea { min-height: 110px; font-family: var(--font-body); font-size: 15px; }
/* two cards side by side under a full-width card (Your details): the same 20px space above the pair as between them, both cards as tall
   as the taller one, and each card's button at its bottom so the two buttons line up */
.acc-main .card + .acc-cols, .acc-main .acc-cols + .card, .acc-main .acc-cols + .acc-cols { margin-top: 20px; }
.acc-cols:has(> .form.card) { align-items: stretch; }
.acc-cols > .form.card { display: flex; flex-direction: column; gap: 18px; }
.acc-cols > .form.card > .btn:last-child { margin-top: auto; align-self: flex-start; }
.acc-main .acc-cols > .card + .card, .acc-main .acc-cols > .form.card + .form.card { margin-top: 0; } /* inside a row the grid's gap is the only space (the card + card rule above pushed the second card 16px down) */
.acc-main .form.card > h2:first-of-type { margin-top: 0; } /* a form card starts with hidden fields, so the "first child" rule missed its heading and it got the 34px page-heading space */