/* ============================================================
   websiites — showroom
   The page is a neutral studio. The only chromatic colour comes
   from the website currently being configured, which is what
   the preview shows. Boldness is spent there and nowhere else.
   ============================================================ */

:root{
  /* Studio. Deliberately cool-neutral — not cream, not tinted black. */
  --floor:#f2f2f0;
  --paper:#ffffff;
  --ink:#000000;
  /* Grey ramp. Both text tiers clear WCAG AA (4.5:1) against the floor,
     which is the harder of the two backgrounds. The earlier values looked
     right but measured 2.5:1 — unreadable for anyone with low vision, and
     a failure on any audit. */
  --graphite:#54544f;        /* secondary text  — 6.79:1 on floor */
  --graphite-soft:#6b6b66;   /* muted text      — 4.78:1 on floor */
  --strokes:#8a8a85;         /* input + control borders — 3.09:1, meets 1.4.11 */
  --hairline:#d8d8d4;        /* decorative rules only, never a control edge */
  --hairline-soft:#e8e8e5;

  /* Set live from the configurator: the paint on the car. */
  --paint:#2b6cb0;
  --paint-ink:#ffffff;

  /* Type scale, ~1.25 from a 17px base. */
  --t-xs:12.5px;
  --t-s:14px;
  --t-base:17px;
  --t-m:21px;
  --t-l:27px;
  --t-xl:clamp(30px,3.6vw,44px);
  --t-display:clamp(40px,6.4vw,82px);

  --gutter:32px;
  --measure:62ch;
}

@media (max-width:640px){ :root{ --gutter:20px; } }

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  background:var(--floor);
  color:var(--ink);
  font-family:Archivo,ui-sans-serif,system-ui,sans-serif;
  font-size:var(--t-base);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
button,input,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter);}
.hidden{display:none!important;}

/* Display type uses Archivo's width axis as an active design element. */
.display{
  font-stretch:118%;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.98;
}
.headline{
  font-stretch:108%;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.08;
}

/* ---------------------------------------------------------- masthead */
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--floor) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:28px;}
.wordmark{font-stretch:118%;font-weight:700;font-size:19px;letter-spacing:-.03em;}
.wordmark i{font-style:normal;color:var(--paint);transition:color .4s ease;}
.masthead nav{display:flex;gap:26px;}
.masthead nav a{font-size:var(--t-s);color:var(--graphite);}
.masthead nav a:hover{color:var(--ink);}
@media (max-width:860px){.masthead nav{display:none;}}

.btn{
  font-size:var(--t-s);font-weight:600;
  padding:9px 17px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:background .15s ease,color .15s ease;
}
.btn:hover{background:transparent;color:var(--ink);}
.btn[disabled]{opacity:.35;cursor:not-allowed;}
.btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--strokes);}
.btn-quiet:hover{border-color:var(--ink);background:transparent;color:var(--ink);}
.btn-paint{background:var(--paint);border-color:var(--paint);color:var(--paint-ink);}
.btn-paint:hover{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-lg{padding:14px 26px;font-size:15.5px;}

/* ---------------------------------------------------------- hero */
.stage{
  display:grid;
  grid-template-columns:minmax(330px,420px) 1fr;
  min-height:calc(100vh - 66px);
  border-bottom:1px solid var(--hairline);
}
@media (max-width:1040px){ .stage{grid-template-columns:1fr;min-height:0;} }

/* left: the spec sheet */
.spec{
  border-right:1px solid var(--hairline);
  background:var(--paper);
  display:flex;flex-direction:column;
}
@media (max-width:1040px){ .spec{border-right:none;border-bottom:1px solid var(--hairline);} }

.spec-intro{padding:44px var(--gutter) 30px;border-bottom:1px solid var(--hairline);}
.spec-intro h1{font-size:var(--t-xl);max-width:14ch;}
.spec-intro p{margin-top:14px;font-size:15.5px;color:var(--graphite);max-width:36ch;}

.spec-rows{flex:1;}
.row{padding:18px var(--gutter);border-bottom:1px solid var(--hairline-soft);}
.row-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;gap:12px;}
.row-name{font-size:var(--t-s);font-weight:600;}
.row-value{font-size:var(--t-xs);color:var(--graphite-soft);}

.field{
  width:100%;padding:10px 12px;
  border:1px solid var(--strokes);background:var(--paper);
  font-size:14.5px;
}
.field:focus{outline:none;border-color:var(--ink);}

/* trim swatches — physical chips, not pills */
.swatches{display:flex;gap:0;border:1px solid var(--strokes);}
.swatch{
  flex:1;padding:10px 6px;font-size:13px;color:var(--graphite);
  border-right:1px solid var(--strokes);
  transition:background .14s ease,color .14s ease;
}
.swatch:last-child{border-right:none;}
.swatch:hover{background:var(--floor);color:var(--ink);}
.swatch[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

.options{display:flex;flex-direction:column;gap:2px;}
.option{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:14.5px;cursor:pointer;
}
.option span:first-child{display:flex;align-items:center;gap:10px;color:var(--graphite);}
.option input{width:15px;height:15px;accent-color:var(--ink);}
.option:has(input:checked) span:first-child{color:var(--ink);}
.option-price{font-size:13px;color:var(--graphite-soft);}

/* price rail pinned to the bottom of the spec sheet */
.rail{
  border-top:1px solid var(--ink);
  background:var(--paper);
  padding:20px var(--gutter) 24px;
  position:sticky;bottom:0;
}
.rail-lines{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.rail-line{display:flex;justify-content:space-between;font-size:13px;color:var(--graphite);}
.rail-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:13px;border-top:1px solid var(--hairline);
}
.rail-total b{font-stretch:118%;font-weight:700;font-size:34px;letter-spacing:-.035em;}
.rail-total span{font-size:13px;color:var(--graphite);}
.rail .btn{width:100%;margin-top:15px;text-align:center;}

/* right: the product */
.showroom{
  background:var(--floor);
  padding:40px var(--gutter) 56px;
  display:flex;flex-direction:column;gap:18px;
  min-width:0;
}
.showroom-bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.showroom-bar h2{font-size:var(--t-s);font-weight:600;}
.showroom-bar p{font-size:13px;color:var(--graphite);}

/* browser chrome around the live preview */
.viewport{
  flex:1;min-height:520px;
  border:1px solid var(--hairline);
  background:var(--paper);
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px -18px rgba(0,0,0,.22);
}
.viewport-chrome{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--hairline);
  background:var(--floor);
}
.dots{display:flex;gap:5px;}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--hairline);display:block;}
.addressbar{
  flex:1;font-size:12px;color:var(--graphite);
  background:var(--paper);border:1px solid var(--hairline);
  padding:4px 10px;text-align:center;
}
.viewport-body{flex:1;overflow:hidden;position:relative;}
.viewport-body iframe{width:100%;height:100%;border:0;display:block;}

.rebuilding{
  position:absolute;inset:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  font-size:13px;color:var(--graphite);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.rebuilding.on{opacity:1;}

/* ---------------------------------------------------------- generic sections */
.section{padding:88px 0;border-bottom:1px solid var(--hairline);}
.section-lead{max-width:44ch;margin-bottom:44px;}
.section-lead h2{font-size:var(--t-xl);}
.section-lead p{margin-top:15px;font-size:var(--t-base);color:var(--graphite);}

/* ---------------------------------------------------------- grader */
.grader{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
@media (max-width:900px){.grader{grid-template-columns:1fr;gap:40px;}}
.grader-field{display:flex;border:1px solid var(--ink);background:var(--paper);}
.grader-field input{flex:1;padding:15px 16px;border:none;background:transparent;font-size:15.5px;}
.grader-field input:focus{outline:none;}
.grader-field button{padding:0 22px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;}
.note{margin-top:13px;font-size:13px;color:var(--graphite);max-width:52ch;line-height:1.55;}

.report{background:var(--paper);border:1px solid var(--hairline);padding:30px;min-height:290px;}
.report-empty{display:grid;place-items:center;height:230px;text-align:center;font-size:14.5px;color:var(--graphite-soft);max-width:28ch;margin:0 auto;}
.report-url{font-size:13px;color:var(--graphite);word-break:break-all;}
.report-score{display:flex;align-items:baseline;gap:9px;margin-top:6px;}
.report-score b{font-stretch:118%;font-weight:700;font-size:52px;letter-spacing:-.04em;}
.report-score span{font-size:14px;color:var(--graphite);}
.meters{margin-top:26px;display:flex;flex-direction:column;}
.meter{display:grid;grid-template-columns:82px 1fr 30px;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--hairline-soft);font-size:13.5px;}
.meter-track{height:3px;background:#dcdcd8;}
.meter-fill{height:100%;background:var(--ink);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1);}
.meter-val{text-align:right;color:var(--graphite);font-size:13px;}
.report-link{margin-top:24px;font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:1px;display:inline-block;}

/* ---------------------------------------------------------- sequence (genuinely ordered) */
.sequence{border-top:1px solid var(--hairline);}
.step{display:grid;grid-template-columns:52px 1fr 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--hairline-soft);align-items:baseline;}
@media (max-width:760px){.step{grid-template-columns:36px 1fr;gap:16px;}.step p{grid-column:2;}}
.step-n{font-size:13px;color:var(--graphite-soft);}
.step h3{font-size:var(--t-m);font-weight:600;letter-spacing:-.02em;}
.step p{font-size:15.5px;color:var(--graphite);max-width:48ch;}

/* ---------------------------------------------------------- trims (spec comparison, not cards) */
.trims{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--hairline);}
.trims th,.trims td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--hairline-soft);vertical-align:top;font-size:14.5px;}
.trims thead th{border-bottom:1px solid var(--ink);}
.trims tbody tr:last-child td{border-bottom:none;}
.trims .trim-name{font-stretch:108%;font-weight:600;font-size:var(--t-m);letter-spacing:-.02em;}
.trims .trim-sum{display:block;margin-top:5px;font-size:13.5px;color:var(--graphite);font-weight:400;max-width:30ch;}
.trims .trim-price{font-stretch:118%;font-weight:700;font-size:26px;letter-spacing:-.03em;white-space:nowrap;}
.trims .trim-price em{font-style:normal;font-size:13px;font-weight:400;color:var(--graphite);}
.trims td ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.trims td li{color:var(--graphite);font-size:14px;}
.trims .col-act{text-align:right;white-space:nowrap;}
@media (max-width:820px){
  .trims,.trims tbody,.trims tr,.trims td{display:block;width:100%;}
  .trims thead{display:none;}
  .trims tr{border-bottom:1px solid var(--ink);}
  .trims tr:last-child{border-bottom:none;}
  .trims td{border-bottom:none;padding:8px 18px;}
  .trims td:first-child{padding-top:20px;}
  .trims td:last-child{padding-bottom:20px;text-align:left;}
}

/* ---------------------------------------------------------- closing */
.closing{padding:104px 0;text-align:center;border-bottom:1px solid var(--hairline);}
.closing h2{font-size:var(--t-display);max-width:16ch;margin:0 auto;}
.closing p{margin:20px auto 32px;font-size:var(--t-m);color:var(--graphite);max-width:46ch;}

/* ---------------------------------------------------------- footer */
footer{padding:56px 0 40px;}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
@media (max-width:800px){.foot{grid-template-columns:1fr 1fr;row-gap:32px;}}
.foot h3{font-size:var(--t-s);font-weight:600;margin-bottom:14px;}
.foot a{display:block;font-size:14px;color:var(--graphite);margin-bottom:9px;}
.foot a:hover{color:var(--ink);}
.foot-note{font-size:14px;color:var(--graphite);max-width:30ch;margin-top:12px;line-height:1.6;}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);font-size:13px;color:var(--graphite-soft);}

/* ---------------------------------------------------------- auth / account */
.gate{max-width:396px;margin:0 auto;padding:88px 0;}
.gate h2{font-size:var(--t-l);letter-spacing:-.025em;}
.gate > p{color:var(--graphite);font-size:14.5px;margin-top:8px;margin-bottom:28px;}
.form{display:flex;flex-direction:column;gap:14px;}
.form label{display:block;font-size:13px;color:var(--graphite);margin-bottom:6px;}
.form input{width:100%;padding:12px 13px;border:1px solid var(--strokes);background:var(--paper);font-size:15px;}
.form input:focus{outline:none;border-color:var(--ink);}
.err{color:#b4231f;font-size:13px;min-height:17px;}
.fineprint{margin-top:16px;font-size:12.5px;color:var(--graphite-soft);line-height:1.6;}
.fineprint a{color:var(--graphite);border-bottom:1px solid var(--hairline);}
.linkish{font-size:13px;color:var(--graphite);text-align:center;margin-top:4px;}
.linkish:hover{color:var(--ink);}

.view{display:none;}
.view.active{display:block;}
.account{padding:52px 0 96px;}
.account-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:34px;}
.account-head h2{font-size:var(--t-l);letter-spacing:-.025em;}
.account-head p{font-size:14px;color:var(--graphite);margin-top:5px;}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hairline);margin-bottom:26px;}
.tab{font-size:14px;font-weight:600;color:var(--graphite);padding:11px 16px;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);}
.panel{display:none;}
.panel.active{display:block;}

.table{background:var(--paper);border:1px solid var(--hairline);}
.table-head{display:flex;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--hairline);font-size:13px;color:var(--graphite);}
.item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;border-bottom:1px solid var(--hairline-soft);flex-wrap:wrap;}
.item:last-child{border-bottom:none;}
.item-id{display:flex;align-items:center;gap:14px;min-width:0;}
.chip-paint{width:38px;height:28px;border:1px solid var(--hairline);flex-shrink:0;}
.item-name{font-size:15px;font-weight:600;letter-spacing:-.01em;}
.item-sub{font-size:13px;color:var(--graphite);margin-top:2px;}
.item-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.state{font-size:12px;padding:3px 10px;border:1px solid var(--strokes);color:var(--graphite);}
.state-live{border-color:var(--ink);color:var(--ink);}
.state-wait{border-color:var(--graphite-soft);color:var(--graphite);}
.state-off{border-color:var(--hairline);color:var(--graphite-soft);}
.mini{font-size:13px;font-weight:600;padding:7px 13px;border:1px solid var(--strokes);}
.mini:hover{border-color:var(--ink);}
.mini-solid{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.mini-solid:hover{background:transparent;color:var(--ink);}
.mini-danger{color:#b4231f;border-color:#e3c4c3;}
.mini-danger:hover{border-color:#b4231f;}
.mini-select{font-size:13px;padding:7px 9px;border:1px solid var(--strokes);background:var(--paper);}
.after-note{margin-top:18px;font-size:13px;color:var(--graphite);max-width:60ch;line-height:1.65;}

.ledger-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--hairline-soft);font-size:14px;}
.ledger-row:last-child{border-bottom:none;}
.ledger-meta{font-size:12.5px;color:var(--graphite);margin-top:2px;}
.ledger-amt{font-weight:600;}

/* ---------------------------------------------------------- domain wizard */
.wizard{padding:52px 0 96px;}
.wizard-inner{max-width:560px;margin:0 auto;}
.backlink{font-size:13.5px;color:var(--graphite);display:inline-block;margin-bottom:22px;}
.backlink:hover{color:var(--ink);}
.progress{display:flex;gap:6px;margin-bottom:28px;}
.progress i{flex:1;height:2px;background:var(--hairline);display:block;}
.progress i.on{background:var(--ink);}
.card{background:var(--paper);border:1px solid var(--hairline);padding:32px;}
.card h3{font-size:var(--t-m);font-weight:600;letter-spacing:-.02em;margin-bottom:9px;}
.card .desc{color:var(--graphite);font-size:15px;margin-bottom:22px;line-height:1.6;}
.card input{width:100%;padding:12px 13px;border:1px solid var(--strokes);background:var(--paper);font-size:15px;}
.card input:focus{outline:none;border-color:var(--ink);}
.dns{border:1px solid var(--hairline);margin-bottom:20px;}
.dns-row{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hairline-soft);font-size:13px;align-items:center;}
.dns-row:last-child{border-bottom:none;}
.dns-type{font-weight:600;}
.dns-val{color:var(--graphite);word-break:break-all;}
.status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--graphite);margin-bottom:20px;min-height:22px;}
.spin{width:13px;height:13px;border:2px solid var(--hairline);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}

/* ---------------------------------------------------------- modal + toast */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:200;display:grid;place-items:center;padding:20px;}
.modal{background:var(--paper);border:1px solid var(--ink);padding:30px;max-width:440px;width:100%;}
.modal h3{font-size:var(--t-m);font-weight:600;letter-spacing:-.02em;margin-bottom:7px;}
.modal > p{font-size:14px;color:var(--graphite);margin-bottom:20px;}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--ink);color:var(--paper);
  padding:13px 20px;font-size:14px;max-width:92vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:300;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------------------------------------------------------- reassurance */
.rail-reassure{margin-top:10px;font-size:12.5px;color:var(--graphite);text-align:center;}

/* ---------------------------------------------------------- review before paying */
.built{padding:44px 0 88px;}
.built-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:26px;flex-wrap:wrap;}
.built-head h2{font-size:var(--t-xl);}
.built-head > div:first-child{max-width:46ch;}
.built-head p{margin-top:12px;font-size:15.5px;color:var(--graphite);}
.built-buy{display:flex;flex-direction:column;gap:9px;min-width:250px;}
.built-price{display:flex;align-items:baseline;gap:7px;margin-bottom:3px;}
.built-price b{font-stretch:118%;font-weight:700;font-size:38px;letter-spacing:-.035em;}
.built-price span{font-size:13px;color:var(--graphite);}
.built-viewport{min-height:660px;}
@media (max-width:760px){.built-viewport{min-height:460px;}.built-buy{min-width:0;width:100%;}}

/* ---------------------------------------------------------- questions */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:1px solid var(--hairline);}
@media (max-width:820px){.qa{grid-template-columns:1fr;gap:0;}}
.qa-item{padding:26px 0;border-bottom:1px solid var(--hairline-soft);}
.qa-item h3{font-size:var(--t-base);font-weight:600;letter-spacing:-.015em;margin-bottom:8px;}
.qa-item p{font-size:15px;color:var(--graphite);max-width:52ch;}

/* ---------------------------------------------------------- skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
padding:11px 18px;z-index:400;font-size:14px;font-weight:600;}
.skip:focus{left:8px;top:8px;}


/* ---------------------------------------------------------- credit */
.credit-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;
background:var(--paper);border:1px solid var(--hairline);padding:28px;}
.credit-balance{display:flex;align-items:baseline;gap:9px;}
.credit-balance b{font-stretch:118%;font-weight:700;font-size:42px;letter-spacing:-.035em;}
.credit-balance span{font-size:13px;color:var(--graphite);}
.credit-note{margin-top:10px;font-size:14px;color:var(--graphite);max-width:46ch;line-height:1.6;}
.credit-add{display:flex;gap:8px;flex-wrap:wrap;}
@media(max-width:700px){.credit-top{gap:22px;}.credit-add{width:100%;}}


/* Visually hidden but available to screen readers — used where the visible
   design carries meaning that markup alone would not convey. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
label.row-name{display:block;cursor:pointer;}

/* ---------------------------------------------------------- overflow guards
   Domains, emails and generated site names are user-supplied and arrive
   as long unbroken strings. Without these they push the layout sideways on
   a phone, which is the most common way a otherwise-fine responsive design
   breaks in the field. */
.item-name,.item-sub,.dns-val,.report-url,.ledger-meta,.addressbar,
#acctEmail,#checkEmailAddress{overflow-wrap:anywhere;min-width:0;}
.item-id{min-width:0;flex:1;}
.item-id > div{min-width:0;}

/* Wide content scrolls inside itself rather than the page. */
.dns,.table{overflow-x:auto;}


/* ---------------------------------------------------------- paint chips */
.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{width:26px;height:26px;border-radius:50%;background:var(--chip);
border:1px solid rgba(0,0,0,.14);padding:0;position:relative;
transition:transform .12s ease,box-shadow .12s ease;}
.chip:hover{transform:scale(1.12);}
/* Selection is a ring outside the swatch, so the colour itself is never
   obscured by the indicator. */
.chip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);}

/* ---------------------------------------------------------- first visit */
.welcome{position:fixed;inset:0;z-index:250;display:grid;place-items:center;
padding:24px;background:color-mix(in srgb,var(--floor) 94%,transparent);
backdrop-filter:blur(6px);animation:welcome-in .35s ease both;}
@keyframes welcome-in{from{opacity:0}to{opacity:1}}
.welcome-panel{max-width:620px;text-align:center;}
.welcome-panel h2{font-size:clamp(30px,5vw,50px);margin-bottom:16px;}
.welcome-panel > p{color:var(--graphite);font-size:17px;max-width:44ch;margin:0 auto 34px;}
.wchips{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:28px;}
@media (max-width:640px){.wchips{grid-template-columns:repeat(4,1fr);gap:10px;}}
.wchip{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;
background:none;border:none;transition:transform .14s ease;}
.wchip:hover{transform:translateY(-3px);}
.wchip-swatch{width:100%;aspect-ratio:1;background:var(--chip);border-radius:3px;
border:1px solid rgba(0,0,0,.12);transition:box-shadow .14s ease;}
.wchip:hover .wchip-swatch{box-shadow:0 6px 18px -6px var(--chip);}
.wchip-name{font-size:11.5px;color:var(--graphite);}
.welcome-skip{display:block;margin:0 auto;background:none;border:none;
text-decoration:underline;text-underline-offset:3px;}

/* The reveal: preview lifts in once a colour is chosen. */
.viewport.revealing{animation:reveal .55s cubic-bezier(.2,.8,.2,1) both;}
@keyframes reveal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .welcome{animation:none}
  .viewport.revealing{animation:none}
}


/* ============================================================
   Surface themes — four light, four dark, each a different temperature.

   Near-achromatic on purpose: the only saturated colour on the page is the
   website being configured, and tinting the chrome would pull the eye off
   it. These change the studio, never the paint.

   Every value below is measured, not eyeballed — text clears 4.5:1 and
   control borders clear 3:1 against both surfaces in all eight themes.
   ============================================================ */

[data-theme="paper"]{
  --floor:#f4efe6; --paper:#fffdf8; --ink:#1a1611;
  --graphite:#574f43; --graphite-soft:#6e6456;
  --strokes:#948976; --hairline:#ded5c7; --hairline-soft:#eae3d7;
}
[data-theme="mist"]{
  --floor:#eef1f4; --paper:#fbfcfd; --ink:#0e1419;
  --graphite:#4c5660; --graphite-soft:#636e79;
  --strokes:#808c98; --hairline:#d3dae1; --hairline-soft:#e3e8ed;
}
[data-theme="noir"]{
  --floor:#ffffff; --paper:#ffffff; --ink:#000000;
  --graphite:#3d3d3d; --graphite-soft:#5c5c5c;
  --strokes:#767676; --hairline:#c9c9c9; --hairline-soft:#e0e0e0;
}
[data-theme="night"]{
  --floor:#101114; --paper:#191b1f; --ink:#f4f5f6;
  --graphite:#b0b2b8; --graphite-soft:#93959b;
  --strokes:#63676f; --hairline:#2b2e33; --hairline-soft:#222529;
}
[data-theme="slate"]{
  --floor:#12171e; --paper:#1a2029; --ink:#e8edf4;
  --graphite:#a6b1c0; --graphite-soft:#8996a6;
  --strokes:#5f6b7b; --hairline:#252d38; --hairline-soft:#1e2630;
}
[data-theme="umber"]{
  --floor:#17130f; --paper:#211b15; --ink:#f5efe6;
  --graphite:#bdb0a0; --graphite-soft:#9e9184;
  --strokes:#716559; --hairline:#332a22; --hairline-soft:#28211a;
}
[data-theme="carbon"]{
  --floor:#000000; --paper:#0b0b0b; --ink:#ffffff;
  --graphite:#b4b4b4; --graphite-soft:#949494;
  --strokes:#5e5e5e; --hairline:#242424; --hairline-soft:#1a1a1a;
}

/* On dark surfaces a pure-white button reads as a hole punched in the page,
   so the primary control inverts to the surface colour instead. */
[data-theme="night"],[data-theme="slate"],[data-theme="umber"],[data-theme="carbon"]{ color-scheme: dark; }
[data-theme="night"] .btn,[data-theme="slate"] .btn,[data-theme="umber"] .btn,[data-theme="carbon"] .btn{color:var(--floor);}
[data-theme="night"] .btn:hover,[data-theme="slate"] .btn:hover,[data-theme="umber"] .btn:hover,[data-theme="carbon"] .btn:hover{color:var(--ink);}
[data-theme="night"] .toast,[data-theme="slate"] .toast,[data-theme="umber"] .toast,[data-theme="carbon"] .toast{color:var(--floor);}
[data-theme="night"] .chip,[data-theme="slate"] .chip,[data-theme="umber"] .chip,[data-theme="carbon"] .chip{border-color:rgba(255,255,255,.18);}
[data-theme="night"] .viewport,[data-theme="slate"] .viewport,[data-theme="umber"] .viewport,[data-theme="carbon"] .viewport{box-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 50px -20px rgba(0,0,0,.8);}
[data-theme="night"] .mini-danger,[data-theme="slate"] .mini-danger,[data-theme="umber"] .mini-danger,[data-theme="carbon"] .mini-danger{color:#ff9d9d;border-color:#6b3a3a;}
[data-theme="night"] .err,[data-theme="slate"] .err,[data-theme="umber"] .err,[data-theme="carbon"] .err{color:#ff9d9d;}

/* Surfaces move together so a theme change reads as one gesture. */
body,.masthead,.spec,.rail,.viewport,.table,.card,.modal,.trims,.credit-top,.report{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease;
}
@media (prefers-reduced-motion:reduce){
  body,.masthead,.spec,.rail,.viewport,.table,.card,.modal,.trims,.credit-top,.report{transition:none;}
}

/* ---------------------------------------------------------- theme control */
.themebar{display:flex;gap:5px;align-items:center;}
.tswatch{width:20px;height:20px;border-radius:50%;padding:0;
border:1px solid var(--strokes);transition:transform .12s ease;}
.tswatch:hover{transform:scale(1.15);}
.tswatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--floor),0 0 0 4px var(--ink);}
.t-studio{background:linear-gradient(135deg,#ffffff 50%,#f2f2f0 50%);}
.t-paper{background:linear-gradient(135deg,#fffdf8 50%,#f4efe6 50%);}
.t-mist{background:linear-gradient(135deg,#fbfcfd 50%,#eef1f4 50%);}
.t-noir{background:linear-gradient(135deg,#ffffff 50%,#ffffff 50%);}
.t-night{background:linear-gradient(135deg,#191b1f 50%,#101114 50%);}
.t-slate{background:linear-gradient(135deg,#1a2029 50%,#12171e 50%);}
.t-umber{background:linear-gradient(135deg,#211b15 50%,#17130f 50%);}
.t-carbon{background:linear-gradient(135deg,#0b0b0b 50%,#000000 50%);}
.themebar{flex-wrap:wrap;}

/* first-visit tiles */
.tcards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:26px;}
@media (max-width:640px){.tcards{grid-template-columns:repeat(2,1fr);gap:11px;}}
.tcard{padding:0;background:none;border:none;display:flex;flex-direction:column;
gap:8px;transition:transform .14s ease;}
.tcard:hover{transform:translateY(-4px);}
.tcard-preview{aspect-ratio:4/3;border:1px solid var(--strokes);border-radius:3px;
position:relative;overflow:hidden;}
.tcard-preview::before{content:'';position:absolute;inset:16% 12% auto 12%;height:9%;border-radius:1px;}
.tcard-preview::after{content:'';position:absolute;inset:36% 36% auto 12%;height:6%;border-radius:1px;}
.tcard-name{font-size:12px;color:var(--graphite);}
.tc-studio{background:#f2f2f0;} .tc-studio::before{background:#000000;} .tc-studio::after{background:#8a8a85;}
.tc-paper{background:#f4efe6;} .tc-paper::before{background:#1a1611;} .tc-paper::after{background:#948976;}
.tc-mist{background:#eef1f4;} .tc-mist::before{background:#0e1419;} .tc-mist::after{background:#808c98;}
.tc-noir{background:#ffffff;} .tc-noir::before{background:#000000;} .tc-noir::after{background:#767676;}
.tc-night{background:#101114;} .tc-night::before{background:#f4f5f6;} .tc-night::after{background:#63676f;}
.tc-slate{background:#12171e;} .tc-slate::before{background:#e8edf4;} .tc-slate::after{background:#5f6b7b;}
.tc-umber{background:#17130f;} .tc-umber::before{background:#f5efe6;} .tc-umber::after{background:#716559;}
.tc-carbon{background:#000000;} .tc-carbon::before{background:#ffffff;} .tc-carbon::after{background:#5e5e5e;}


/* ============================================================
   Mobile fitness
   ============================================================ */

/* iOS Safari zooms the whole page whenever a focused input renders below
   16px. That zoom is not undone on blur, so the layout is left enlarged and
   the visitor has to pinch back out — it reads as the site being broken.
   16px is the minimum that avoids it. */
@media (max-width:820px){
  .field,.form input,.card input,.grader-field input,.mini-select,select.cfg-select,
  input[type="text"],input[type="email"],input[type="password"],input[type="url"]{
    font-size:16px;
  }
}

/* Comfortable hit areas on touch devices. The visual size stays as designed;
   an invisible expanded target is layered over it, so nothing looks chunky
   on a desktop pointer but nothing is hard to hit with a thumb. */
@media (pointer:coarse){
  .chip,.tswatch{position:relative;}
  .chip::after,.tswatch::after{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;
  }
  .chips,.themebar{gap:12px;}
  .swatch{padding:14px 8px;}
  .mini{padding:11px 14px;}
  .tab{padding:14px 16px;}
  .option{padding:12px 0;}
  .option input{width:20px;height:20px;}
  .foot a{padding:4px 0;}
  .masthead nav a{padding:6px 0;}
}

/* Notched and gesture-bar devices: keep content clear of the hardware. */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
  }
  .rail{padding-bottom:max(24px,env(safe-area-inset-bottom));}
  .toast{bottom:max(26px,calc(env(safe-area-inset-bottom) + 12px));}
  .masthead .wrap{padding-top:env(safe-area-inset-top);}
}

/* The first-visit panel must never trap someone on a short screen: eight
   tiles plus copy is taller than a landscape phone. */
.welcome{overflow-y:auto;align-items:start;padding-top:max(24px,env(safe-area-inset-top));}
.welcome-panel{margin:auto 0;padding:24px 0;}
@media (max-height:620px){
  .welcome-panel h2{font-size:26px;margin-bottom:10px;}
  .welcome-panel > p{font-size:15px;margin-bottom:20px;}
  .tcards{gap:9px;margin-bottom:18px;}
  .tcard-name{font-size:11px;}
}

/* Small-screen layout corrections */
@media (max-width:820px){
  /* The spec sheet stops being a fixed rail and becomes normal flow, so the
     price is reachable by scrolling rather than pinned over the content. */
  .rail{position:static;}
  .showroom{padding-top:28px;}
  .viewport{min-height:420px;}
  .built-viewport{min-height:380px;}
}

@media (max-width:560px){
  .chips{gap:10px;}
  .swatches{flex-direction:column;}
  .swatch{border-right:none;border-bottom:1px solid var(--strokes);}
  .swatch:last-child{border-bottom:none;}
  .config-quote-cta,.rail-total{flex-wrap:wrap;gap:10px;}
  .built-head{gap:22px;}
  .account-head{gap:12px;}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tab{white-space:nowrap;}
}

/* ---------------------------------------------------------- settings */
.setting{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
padding:24px;background:var(--paper);border:1px solid var(--hairline);
margin-bottom:14px;flex-wrap:wrap;}
.setting-head h3{font-size:var(--t-base);font-weight:600;letter-spacing:-.015em;}
.setting-head p{font-size:14px;color:var(--graphite);margin-top:5px;max-width:40ch;}
.themebar-foot{margin-top:2px;}

.field-note{margin-top:9px;font-size:12px;color:var(--graphite-soft);line-height:1.55;}

/* ---------------------------------------------------------- products */
.product{display:grid;grid-template-columns:1fr 84px 28px;gap:6px;margin-bottom:7px;align-items:start;}
.product input{padding:9px 10px;border:1px solid var(--strokes);background:var(--paper);font-size:14px;width:100%;}
.product input:focus{outline:none;border-color:var(--ink);}
.product .rm{border:1px solid var(--strokes);background:transparent;color:var(--graphite);font-size:15px;line-height:1;padding:0;height:36px;}
.product .rm:hover{border-color:var(--ink);color:var(--ink);}
@media (max-width:820px){.product input{font-size:16px;}}
@media (max-width:560px){.product{grid-template-columns:1fr 70px 28px;}}

/* ---------------------------------------------------------- add-on help
   Inline disclosure rather than a hover tooltip: hover does not exist on a
   phone, and these explanations are exactly what someone deciding whether
   to pay $15 needs to read. */
.option-wrap{border-bottom:1px solid var(--hairline-soft);}
.option-wrap:last-child{border-bottom:none;}
.option-wrap .option{padding-right:30px;}
.option-tail{display:flex;align-items:center;gap:8px;}

.helpbtn{
  position:absolute;right:0;top:9px;
  width:19px;height:19px;border-radius:50%;
  border:1px solid var(--strokes);background:transparent;color:var(--graphite);
  font-size:11px;font-weight:700;line-height:1;
  display:grid;place-items:center;
  transition:border-color .12s ease,color .12s ease,background .12s ease;
}
.option-wrap{position:relative;}
.helpbtn:hover{border-color:var(--ink);color:var(--ink);}
.helpbtn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
@media (pointer:coarse){
  .helpbtn::after{content:'';position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;}
}

.help{padding:2px 0 16px;animation:help-in .2s ease both;}
@keyframes help-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.help{animation:none;}}
.help > p{font-size:13.5px;color:var(--graphite);line-height:1.6;margin-bottom:12px;max-width:44ch;}
.help-note{font-size:12.5px;color:var(--graphite-soft);margin-top:11px;margin-bottom:0;}

/* A miniature of the real section, so the explanation is shown not told. */
.help-mock{border:1px solid var(--hairline);background:var(--paper);padding:14px;font-size:11px;}
.hm-head{font-weight:700;font-stretch:112%;font-size:13px;margin-bottom:10px;color:var(--paint);}
.hm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;}
.hm-grid div{display:flex;flex-direction:column;gap:2px;}
.hm-grid b{font-size:10.5px;color:var(--graphite-soft);font-weight:600;}
.hm-grid span{font-size:11.5px;color:var(--ink);}
.hm-post{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
border-top:1px solid var(--hairline-soft);}
.hm-post:first-of-type{border-top:none;}
.hm-post b{font-size:11.5px;font-weight:600;}
.hm-post span{font-size:10.5px;color:var(--graphite-soft);white-space:nowrap;}
.hm-queue{display:flex;gap:6px;align-items:center;}
.hm-job{height:22px;flex:1;background:var(--hairline);border-radius:2px;}
.hm-job.hm-you{background:var(--paint);color:var(--paint-ink);flex:1.4;
display:grid;place-items:center;font-size:10px;font-weight:700;}
.hm-caption{margin-top:9px;font-size:10.5px;color:var(--graphite-soft);}