/* clarv.in — the public site (4 Oct 2026): ink navy and ledger gold. The logo is two equal squares, ink and gold, corner to
   corner, beside "clarv" in Hanken Grotesk 800, on an ink header. Fraunces for headings, Manrope for text. */
:root {
  --ground: #f5f6f8; --surface: #fff; --surface-2: #f9fafb; --ink: #0f172a; --ink-2: #4b5563; --ink-3: #5f6a86;
  --rule: #e6e8ee; --rule-3: #d9dde5; --brand: #0b1b2b; --brand-ink: #20344e; --brand-soft: #eceef2; --brand-tint: #f6f2e8;
  --gold: #b8892e; --gold-soft: #f4ebd7; --gold-text: #8a6416; --link: #22508f; --good-soft: #e3f3ef;
  --on-ink: #f7f4ec; --on-ink-2: #c9ced8; --gold-on-ink: #d3a64b; --link-on-ink: #e2bc66;
  --good: #0b7a62; --warn: #a15c07; --warn-soft: #fbf1dc; --bad: #b42318; --bad-soft: #fce8e6;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Fraunces", Georgia, serif; --mark: "Hanken Grotesk", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-2: 0 12px 32px rgba(16,24,40,.12), 0 0 0 1px rgba(16,24,40,.05);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* The page's column (7 Oct 2026; the user: "the website was showing blank space on both sides of screen"): 1360px at most,
   its gutter growing with the screen, so a laptop or a desktop monitor is filled; bands under it run the full width. */
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, calc(3.4vw + 10px), 64px); line-height: 1.07; }
h2 { font-size: clamp(26px, calc(2vw + 10px), 42px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0; }
.lead { color: var(--ink-2); font-size: 18px; max-width: 62ch; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }

/* header: an ink band, the logo at the centre and the links either side of it; on a phone, a menu button, the logo, Sign in */
.top { position: sticky; top: 0; z-index: 5; background: var(--brand); border-bottom: 1px solid var(--brand); }
.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 84px; }
.brand { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; gap: .28em; color: var(--on-ink); font-family: var(--mark); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.brand:hover { text-decoration: none; }
/* The squares are about the height of an "a" and sit a third of the name's size from it: symbol and name carry one weight.
   The first square takes the text colour (paper on the ink band); the second is gold. */
.brand svg { width: .95em; height: .95em; flex: none; }
.brand .g { fill: var(--gold-on-ink); }
/* The full stop: a gold square the size of the strokes, at the end of the headline. */
.stop { display: inline-block; width: .15em; height: .15em; margin-left: .055em; background: var(--gold); }
.nav { display: flex; gap: 24px; align-items: center; }
.nav-l { grid-column: 1; grid-row: 1; justify-self: start; }
.nav-r { grid-column: 3; grid-row: 1; justify-self: end; }
.nav a { color: var(--on-ink-2); font-weight: 600; font-size: 15px; }
.nav a.on { color: var(--on-ink); }
.nav-r .btn.primary { background: var(--gold-on-ink); border-color: var(--gold-on-ink); color: var(--brand); }
.mnav, .m-signin { display: none; }
.mnav summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; margin-left: -10px; border-radius: 10px; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--on-ink); transition: transform .2s, background .2s; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; } .burger::after { top: 7px; }
.mnav[open] .burger { background: transparent; }
.mnav[open] .burger::before { transform: translateY(7px) rotate(45deg); }
.mnav[open] .burger::after { transform: translateY(-7px) rotate(-45deg); }
.mnav-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 4px 18px 18px; background: var(--surface); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-2); }
.mnav-panel a { padding: 14px 2px; font-size: 17px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); }
.mnav-panel a.on { color: var(--brand); }
.mnav-panel a.btn { margin-top: 16px; height: 48px; border-bottom: 1px solid var(--brand); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--rule-3); background: var(--surface); color: var(--ink); font: 600 15px var(--sans); cursor: pointer; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn:hover { text-decoration: none; filter: brightness(.98); }

/* marketplaces: Amazon today, the others launching soon */
.markets { padding: 8px 0 24px; }
.mk-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mk-head p { color: var(--ink-2); }
.mk-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mk { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px dashed var(--rule-3); border-radius: 12px; }
.mk b { font-size: 16px; }
.mk small { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.mk .chip { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule-3); }
.mk.live { background: var(--surface); border: 1px solid var(--brand); box-shadow: var(--shadow); }
.mk.live .chip { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }

/* hero */
/* Its band runs the full width: white, a faint ledger grid that fades out downward, and a gold glow behind the example
   panel — a wide screen sees a page drawn edge to edge, not a column on grey. */
.hero-band { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--rule); }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(15, 23, 42, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, .05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 35%, transparent 100%); }
.hero-band::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 1000px; height: 760px; left: 50%; top: -140px;
  background: radial-gradient(closest-side, rgba(184, 137, 46, .13), transparent); }
/* padding-block: a padding shorthand would zero the page's side gutter on .wrap */
.hero { padding-block: 84px 56px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); /* the example panel needs ~530px for its tiles and table */ gap: 48px; align-items: center; }
.hero .cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
/* the three figures: each on one line; the row wraps whole rather than breaking a figure ("GSTR-1 / ready") */
.hero .facts { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 32px; }
.fact b { display: block; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.fact span { display: block; max-width: 16ch; color: var(--ink-3); font-size: 13px; }

/* drawn product panels — demo figures, no client data */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-2); overflow: hidden; }
.panel .bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.panel .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-3); display: inline-block; }
.panel .body { padding: 16px; overflow-x: auto; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tile { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.tile .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tile .v { font-family: var(--display); font-size: 22px; margin-top: 2px; }
.tile .s { font-size: 12px; color: var(--ink-3); }
.tile.good .v { color: var(--good); } .tile.bad .v { color: var(--bad); } .tile.warn .v { color: var(--warn); }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--rule); font-weight: 700; }
table.t td { padding: 8px; border-bottom: 1px solid var(--rule); }
table.t td:first-child { white-space: nowrap; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.st { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.good { color: var(--good); background: var(--good-soft); } .st.bad { color: var(--bad); background: var(--bad-soft); } .st.warn { color: var(--warn); background: var(--warn-soft); }

/* sections */
section { padding: clamp(56px, 5.5vw, 96px) 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 22px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 15px; }
.card .n { font-family: var(--display); color: var(--gold-text); font-size: 14px; margin-bottom: 8px; }
.rule-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.rule-list li { padding-left: 22px; position: relative; color: var(--ink-2); }
.rule-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 1px; background: var(--gold); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.plan { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.plan.hi { border-color: var(--brand); box-shadow: var(--shadow-2); }
.plan .price { font-family: var(--display); font-size: 40px; margin: 10px 0 2px; }
.plan .price small { font-size: 15px; font-family: var(--sans); color: var(--ink-3); }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }
.plan ul li::before { content: "✓  "; color: var(--gold-text); font-weight: 700; }
.plan .btn { margin-top: auto; }

/* the quote form */
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.form input, .form select, .form textarea { font: 15px var(--sans); color: var(--ink); padding: 9px 11px; border: 1px solid var(--rule-3); border-radius: 8px; background: var(--surface); width: 100%; min-width: 0; } /* a select is otherwise as wide as its longest option */
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.form .btn { margin-top: 6px; }

/* prose pages */
.prose { max-width: 76ch; }
.prose h1 { margin-bottom: 8px; }
.prose h2 { font-size: 24px; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 22px; }
.prose .meta { color: var(--ink-3); font-size: 14px; margin-bottom: 28px; }
dl.facts { display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; margin-top: 24px; }
dl.facts dt { color: var(--ink-3); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 3px; }
dl.facts dd { margin: 0; }

/* footer */
footer { padding: 36px 0 48px; color: var(--ink-3); font-size: 14px; border-top: 1px solid var(--rule); }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--ink-2); }
/* The footer signs off with the logo, once, small. */
footer .foot-brand { display: inline-flex; align-items: center; gap: .28em; color: var(--brand); font: 800 18px/1 var(--mark); letter-spacing: -0.03em; }
footer .foot-brand svg { width: .95em; height: .95em; flex: none; }
footer .foot-brand:hover { text-decoration: none; }
footer .sp { margin-left: auto; }

/* A large screen: the text a size up, the hero given air. */
@media (min-width: 1600px) {
  body { font-size: 17px; }
  .lead { font-size: 19px; }
  .card p { font-size: 15.5px; }
  .hero { padding-block: 112px 88px; gap: 72px; }
  .fact b { font-size: 24px; }
}
/* A desktop monitor (1920 and up): the column widens again, so the page still fills about three quarters of the screen. */
@media (min-width: 1800px) {
  .wrap { max-width: 1520px; }
}
/* text above the panel before the two squeeze each other */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 900px) {
  .top .wrap { height: 64px; gap: 8px; }
  .nav-l, .nav-r { display: none; }
  .brand { font-size: 28px; }
  .mnav { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  .m-signin { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; align-items: center; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--link-on-ink); }
  .wrap { padding: 0 18px; }
  section { padding: 44px 0; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 36px 32px; }
  .hero-band::before { display: none; } /* on a phone there are no sides to fill, and the lines would run through the text */
  .hero-band::after { left: 10%; top: auto; bottom: -300px; }
  .hero .facts { flex-direction: column; gap: 14px; }
  .fact span { max-width: none; }
  .hero .cta .btn { flex: 1 1 160px; }
  .lead { font-size: 17px; }
  .grid3, .plans, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles > .tile:nth-child(3):last-child { grid-column: 1 / -1; }
  .mk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  dl.facts { grid-template-columns: 1fr; gap: 2px 0; } dl.facts dd { margin-bottom: 12px; overflow-wrap: anywhere; }
  .form input, .form select, .form textarea { font-size: 16px; } /* under 16px a phone zooms in on focus */
  footer .wrap { gap: 12px 20px; } footer .sp { margin-left: 0; flex-basis: 100%; }
  footer .foot-brand { flex-basis: 100%; }
}
@media (max-width: 600px) {
  table.t .o { display: none; } /* the example tables drop their least telling column on a phone */
}
@media (max-width: 480px) {
  .brand { font-size: 26px; }
  h3 { font-size: 19px; }
  .card { padding: 18px; } .plan { padding: 22px; }
  .panel .body { padding: 12px; }
  .tile { padding: 9px 10px; } .tile .v { font-size: 19px; }
  .tile .k { min-height: 3.1em; } /* two lines at the 1.55 line height: a two-line label beside a one-line one: the figures stay level */
  table.t { font-size: 12.5px; } table.t th, table.t td { padding: 6px; }
  .mk-row { grid-template-columns: 1fr 1fr; }
  .mk.live { grid-column: 1 / -1; }
}

/* On a phone the eyebrow keeps to one line: its second half is the page's own lead anyway. */
@media (max-width: 480px) { .eyebrow .opt { display: none; } }