/* GrailCrest site, dressed like the business cards: the card's navy and gold, Outfit throughout, and the card's one
   device, the gold crop marks at the middle of each edge (the marks GrailCrest centers a card by). They frame the hero
   and every screenshot. The prices sit on white cards with the gold bar along the bottom, like the contact cards, and
   the page ends on the same gold bar. */
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --navy: #17202B;         /* the card's back */
  --deep: #111821;         /* bands and the glass behind screenshots */
  --raised: #1E2935;       /* answers opened, the limits box */
  --gold: #F3B90C;         /* the card's yellow */
  --gold-hi: #FFD24A;
  --gold-ink: #17202B;     /* text on gold */
  --white: #FFFFFF;
  --mist: #DCE1E8;         /* the card's tagline */
  --slate: #97A3B2;
  --rule: rgba(220, 225, 232, 0.14);
  --paper-ink: #17202B;    /* on the white price cards */
  --paper-ink-2: #4A5563;
  --paper-rule: #E1E5EA;
  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: clamp(1.9rem, 3.4vw, 2.6rem); --step-4: clamp(2.6rem, 5.6vw, 4.25rem);
  --tick: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--navy); color: var(--mist); font-family: var(--font); font-size: var(--step-0); line-height: 1.6; font-weight: 400; }
main { flex: 1 0 auto; }   /* (a short page still ends on the footer and its gold bar) */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font); color: var(--white); line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; }
b, strong { font-weight: 600; color: var(--white); }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.measure { font-variant-numeric: tabular-nums; color: var(--gold); letter-spacing: 0.01em; }
/* a section's name, in gold, the way the card prints its web address */
.eyebrow { font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; color: var(--gold); }

/* the crop marks: four short gold lines at the middle of each edge of a box (background layers, so they need no markup) */
.ticked {
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 0 / 2px var(--tick) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 100% / 2px var(--tick) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 50% / var(--tick) 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 50% / var(--tick) 2px no-repeat;
}

/* top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--navy) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--navy); }
.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); }
.brand:hover { color: var(--white); }
.brand img { width: 30px; height: 30px; }
.brand .mark { width: 32px; height: 35px; flex: none; }
.brand .wm { font-family: var(--font); font-size: 1.65rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.brand .wm b { font-weight: 800; color: var(--white); }
.brand .wm span { font-weight: 500; color: var(--gold); }
.wm .tm { font-size: .42em; vertical-align: super; line-height: 0; margin-left: 2px; font-weight: 500; letter-spacing: 0; color: var(--white); }
.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 0.98rem; }
.top nav a { text-decoration: none; color: var(--mist); }
.top nav a:hover { color: var(--gold); }
@media (max-width: 1000px) { .top nav { display: none; } .top .btn { margin-left: auto; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 8px; font-family: var(--font); font-weight: 600; font-size: 1.02rem; line-height: 1.2; text-decoration: none; border: 1.5px solid var(--mist); color: var(--white); background: transparent; cursor: pointer; }
.btn:hover { color: var(--white); border-color: var(--white); background: rgba(255, 255, 255, 0.06); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn.primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--gold-ink); }
.btn.small { padding: 8px 14px; font-size: 0.95rem; }

/* launch offer: a gold bar, like the bottom of the contact cards */
.promo { background: var(--gold); color: var(--gold-ink); font-size: 0.98rem; }
.promo .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; padding-block: 9px; text-align: center; }
.promo b { color: var(--gold-ink); }
.promo .code { font-weight: 800; letter-spacing: 0.05em; background: var(--navy); color: var(--gold); border-radius: 4px; padding: 1px 7px; }
.promo a { color: var(--gold-ink); font-weight: 600; }
.promo a:hover { color: var(--gold-ink); }
.promo[hidden] { display: none; }

/* hero: the card's back, crop marks at the middle of its edges */
.hero { position: relative; padding-block: 76px 64px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 0 / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 100% / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 50% / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 50% / 18px 2px no-repeat; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hero h1 { margin-top: 16px; }
.lead { font-size: var(--step-1); color: var(--mist); margin-top: 22px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fine { margin-top: 14px; font-size: 0.95rem; color: var(--slate); max-width: 40em; }
.fine b { color: var(--mist); }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero { padding-block: 44px 40px; } }

/* a screenshot on the dark glass, with the crop marks around it and a measurement along the top */
.bed { position: relative; padding: 38px 22px 22px; border-radius: 12px; border: 1px solid var(--rule);
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 100% / 2px var(--tick) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 50% / var(--tick) 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 50% / var(--tick) 2px no-repeat,
    var(--deep);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.8); }
.bed img { border-radius: 6px; }
.bed .dim { position: absolute; left: 22px; right: 22px; top: 13px; height: 12px; border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.bed .dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); }
.bed .dim span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--deep); padding: 0 10px; font-size: 0.82rem; color: var(--mist); white-space: nowrap; }
.bed .dim span b { color: var(--gold); font-weight: 600; }

/* Show mode: the customer list and the report on a phone, side by side */
.duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.duo .phone { border-radius: 12px; }
@media (max-width: 600px) { .duo { grid-template-columns: minmax(0, 1fr); } .duo .phone { max-width: 240px; justify-self: center; } }

/* what grading costs: three figures on the darker band */
.cost { background: var(--deep); border-block: 1px solid var(--rule); }
.cost .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cost .cell { padding: 30px 26px; border-left: 1px solid var(--rule); }
.cost .cell:first-child { border-left: 0; padding-left: max(0px, env(safe-area-inset-left, 0px)); }
.cost .num { font-weight: 800; font-size: var(--step-3); font-variant-numeric: tabular-nums; line-height: 1; color: var(--white); letter-spacing: -0.02em; }
.cost .num.measure { color: var(--gold); }
.cost .cell p { color: var(--mist); margin-top: 10px; font-size: 1rem; max-width: 26em; }
@media (max-width: 760px) { .cost .wrap { grid-template-columns: minmax(0, 1fr); } .cost .cell, .cost .cell:first-child { border-left: 0; border-top: 1px solid var(--rule); padding: 22px 0; } .cost .cell:first-child { border-top: 0; } }

/* features: text beside a screenshot, alternating */
section { scroll-margin-top: 84px; }
.feature { padding-block: 84px; }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.feature.flip .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .copy { order: 2; }
.feature h2 { margin-top: 12px; }
.feature .copy > p { color: var(--mist); margin-top: 18px; max-width: 36em; }
.feature ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.feature li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.feature li .measure { font-weight: 700; font-size: 1.05rem; }
.feature li span:last-child { color: var(--mist); }
@media (max-width: 920px) { .feature .wrap, .feature.flip .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; } .feature.flip .copy { order: 0; } .feature { padding-block: 52px; } }

/* the smaller features: each title hangs off a short gold line, like a crop mark */
.more { padding-block: 80px; background: var(--deep); border-block: 1px solid var(--rule); }
.more h2 { margin-top: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 44px; margin-top: 40px; }
.grid3 > div { position: relative; padding-top: 18px; }
.grid3 > div::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 2px; background: var(--gold); }
.grid3 h3 { margin-bottom: 8px; }
.grid3 p { color: var(--mist); font-size: 1rem; }
@media (max-width: 920px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid3 { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* honest limits */
.limits { padding-block: 80px; }
.limits .box { border: 1.5px solid var(--gold); border-radius: 12px; padding: 32px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; background: var(--raised); }
.limits .box p + p { margin-top: 12px; }
.limits .box p { color: var(--mist); }
@media (max-width: 760px) { .limits .box { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px; } }

/* pricing: each plan on a white card with the gold bar along the bottom, like the contact cards */
.pricing { padding-block: 84px; }
.pricing h2 { margin-top: 12px; }
.pricing .wrap > p { color: var(--mist); margin-top: 14px; max-width: 40em; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 36px; max-width: 1240px; }
.plan { position: relative; background: var(--white); color: var(--paper-ink-2); border-radius: 10px; padding: 28px 26px 34px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.plan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--gold); }
.plan h3 { color: var(--paper-ink); font-size: 1.35rem; font-weight: 700; }
.plan b, .plan strong { color: var(--paper-ink); }
.plan .price { font-weight: 800; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--paper-ink); letter-spacing: -0.02em; }
.plan .price small { font-size: 1.05rem; color: var(--paper-ink-2); font-weight: 500; margin-left: 8px; letter-spacing: 0; }
.plan .price s { font-size: 1.4rem; color: var(--paper-ink-2); font-weight: 500; margin-left: 10px; }
.plan ul { margin: 0; padding-left: 20px; color: var(--paper-ink-2); display: grid; gap: 6px; }
.plan ul li::marker { color: #B07D07; }
.plan .alt { margin: -6px 0 0; color: var(--paper-ink-2); font-weight: 500; }
.plan .note { margin: -4px 0 0; font-size: 0.9rem; color: var(--paper-ink-2); }
.plan .btn { margin-top: auto; align-self: flex-start; color: var(--paper-ink); border-color: var(--paper-ink); }
.plan .btn:hover { background: rgba(23, 32, 43, 0.06); }
.plan .btn.primary { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
.plan .btn.soon { cursor: default; opacity: 0.55; }
.plan .btn.soon:hover { background: transparent; }
.plan .btn.primary.soon:hover { background: var(--gold); }
/* the plan most people want: the card's other side, navy with the gold border */
.plan.main { background: var(--navy); color: var(--mist); box-shadow: inset 0 0 0 2px var(--gold); }
.plan.main h3, .plan.main .price, .plan.main b { color: var(--white); }
.plan.main ul, .plan.main .alt, .plan.main .note, .plan.main .price small, .plan.main .price s { color: var(--mist); }
.plan.main ul li::marker { color: var(--gold); }
.plan.main .btn.soon { opacity: 0.8; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; } }
@media (max-width: 620px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

/* what you need */
.req { padding-block: 80px; background: var(--deep); border-block: 1px solid var(--rule); }
.req h2 { margin-top: 12px; }
.req dl { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px 28px; margin: 30px 0 0; max-width: 900px; }
.req dt { font-weight: 600; font-size: 1.1rem; color: var(--white); }
.req dd { margin: 0; color: var(--mist); }
@media (max-width: 600px) { .req dl { grid-template-columns: minmax(0, 1fr); gap: 4px; } .req dd { margin-bottom: 14px; } }

/* questions */
.faq { padding-block: 84px; }
.faq h2 { margin-top: 12px; }
.faq details { border-top: 1px solid var(--rule); padding-block: 18px; max-width: 900px; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.2rem; color: var(--white); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-weight: 600; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--gold); }
.faq details p { color: var(--mist); margin-top: 10px; max-width: 46em; }

/* footer, and the gold bar the page ends on */
footer { border-top: 1px solid var(--rule); padding-block: 40px 56px; font-size: 0.94rem; color: var(--slate); background: var(--deep); position: relative; }
footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--gold); }
footer .wrap { display: grid; gap: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; color: var(--mist); }
footer nav a { color: var(--mist); }
footer nav a:hover { color: var(--gold); }

/* the policy pages and the password page */
.doc { padding-block: 56px 72px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: var(--step-3); }
.doc h2 { font-size: var(--step-2); margin-top: 40px; }
.doc p, .doc li { color: var(--mist); }
.doc p { margin-top: 12px; }
.doc ul { padding-left: 22px; margin: 12px 0 0; display: grid; gap: 8px; }
.doc li::marker { color: var(--gold); }
.doc .updated { color: var(--slate); font-size: 0.95rem; margin-top: 8px; }
.doc input { background: var(--deep); color: var(--white); border-color: var(--rule) !important; }
.doc label { color: var(--white); font-weight: 500; }
.draft { background: color-mix(in srgb, var(--gold) 14%, var(--navy)); border: 1px solid var(--gold); border-radius: 8px; padding: 10px 14px; font-size: 0.94rem; color: var(--white); margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }