/* Client portal pages + My account. Small additions on top of portal.css; tokens only. Prefix: c- */

/* spacing helpers */
.c-gap{margin-top:20px}
.c-mt{margin-top:16px}
.c-mb{margin-bottom:20px}
.c-pad{padding:20px 22px}
.c-subnav{margin:-4px 0 22px}
.c-subnav .seg{margin:0}
.row.c-subnav{gap:12px 18px}
.c-narrow{max-width:860px}

/* a compact list inside a flush sheet (open requests, a site's files) */
.c-list li+li{border-top:1px dashed var(--dash)}
.c-list a{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 22px;transition:background .16s var(--ease)}
.c-list a:hover{background:var(--paper)}
.c-list a:hover b{color:var(--steel)}
.c-list-t{display:block;min-width:0}
.c-list-t b{display:block;color:var(--film);font-weight:500;overflow-wrap:anywhere}
.c-list-t small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.c-list .pill{margin-top:1px}

/* a file name with its icon */
.c-file{display:inline-flex;align-items:flex-start;gap:10px;min-width:0}
.c-file .ico{width:17px;height:17px;margin-top:2px;color:var(--steel)}
.c-file>span{overflow-wrap:break-word;word-break:normal}
a.c-file:hover{color:var(--steel)}
.c-indent{padding-left:27px}
.c-show-sm{display:none}
.c-acts{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 16px}
.c-acts-col{flex-direction:column;align-items:flex-end;gap:2px}
.c-acts-col .cmd{min-height:28px}
.c-pill-under{display:block;margin-top:4px}
.c-kv-stack .kv-row{grid-template-columns:minmax(0,1fr);gap:2px}
.c-files td:last-child{white-space:nowrap}

.tag.c-urgent{border-color:rgba(178,58,38,.35);color:var(--brick);margin-left:4px}

.c-inline-sm{display:none}
.feed-t,.feed-b,.c-list-t small{overflow-wrap:anywhere}

/* the site page */
.c-meter{max-width:260px;margin-top:9px}
.c-dns{margin-top:20px}
.c-dns p{min-width:0}
.c-dns-t{flex:1 0 100%;border:1px solid var(--rule);border-radius:10px;background:var(--paper-hi)}
.c-dns-t .table td{font-size:13.5px}
.c-dns-t .table th,.c-dns-t .table td{padding-top:10px;padding-bottom:10px}
.kv dd .pill{margin-right:8px}

/* forms */
.c-fieldset{min-width:0;margin:0;padding:0;border:0}
.c-fieldset legend{margin-bottom:10px;padding:0}
.c-fieldset .err{margin-top:8px}
.c-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
.c-aside{display:grid;gap:12px;color:var(--muted);font-size:14.5px}
.c-aside .label{margin-bottom:2px}
.c-half{max-width:calc(50% - 14px)}
.c-pw{position:relative}
.c-pw input{padding-right:64px}
.c-pw .reveal{bottom:7px}
.c-checks{display:grid;gap:16px}

/* billing: one column. What is owed and how to pay it first, then hosting, invoices, who we bill.
   2026-10-12 (James): status in words, real buttons (.btn-ink / .btn-line), no rings round the sheet, no lamps, no pills. */
.c-bill{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:28px 32px;align-items:start;max-width:1260px}
.c-bill-main{display:grid;gap:28px;min-width:0}
.c-owe{padding:26px 28px 22px}
.c-owe-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.c-owe-t{display:grid;gap:6px;min-width:0}
.c-due{color:var(--film);font:600 clamp(34px,3vw,44px)/1 var(--sans);letter-spacing:-.03em}
.c-due.bad{color:var(--brick)}
.c-owe-s{color:var(--plate);font-size:14.5px;max-width:56ch}
.c-owe-s+.c-owe-s{margin-top:-3px}
.c-owe-s .bad{font-weight:600}
/* several invoices open: one row each, with its own pay button */
.c-due-list{display:grid;margin-top:20px;border-top:1px dashed var(--dash)}
.c-due-list li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) auto minmax(150px,auto);align-items:center;gap:8px 20px;padding:14px 0;border-bottom:1px dashed var(--dash);font-size:14.5px}
.c-due-list li:last-child{border-bottom:0}
.c-due-i{display:grid;gap:1px;min-width:0}
.c-due-i small{color:var(--muted);font-size:13px}
.c-due-w{color:var(--plate)}
.c-due-w.bad{font-weight:600}
.c-due-a{color:var(--film);font-weight:600;text-align:right}
.c-due-list li>:last-child{justify-self:end}
.c-due-list .btn-line.b-sm{min-height:38px}
/* other ways to pay: a disclosure in a plain sentence, the chevron turns */
.c-howto{margin-top:20px;padding-top:16px;border-top:1px dashed var(--dash);color:var(--plate);font-size:14.5px}
p.c-howto{max-width:64ch}
.c-howto>summary{display:inline-flex;align-items:center;gap:8px;width:fit-content;list-style:none;cursor:pointer;color:var(--muted);font-weight:500}
.c-howto>summary::-webkit-details-marker{display:none}
.c-howto>summary:hover,.c-howto[open]>summary{color:var(--film)}
.c-howto>summary .ico{transition:transform .2s var(--out)}
.c-howto[open]>summary .ico{transform:rotate(90deg)}
.c-howto>p{margin-top:12px;max-width:64ch}
/* nothing due: in the page head, right side */
.c-head-none{display:grid;gap:3px;max-width:62ch;text-align:right}
.c-head-none .muted{font-size:14.5px}

/* one block per subscription */
.c-sub{display:grid;gap:20px;padding:22px 26px 24px}
.c-sub+.c-sub{border-top:1px dashed var(--dash)}
.c-sub.is-ended{opacity:.7}
.c-sub-head{display:grid;gap:3px;min-width:0}
.c-sub-head .h3{font-size:17px;overflow-wrap:anywhere}
.c-sub-m{color:var(--muted);font-size:14px}
.c-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;padding:16px 0 2px;border-top:1px dashed var(--dash)}
.c-facts dt{color:var(--dim);font:600 12px/1.6 var(--label);letter-spacing:.06em;text-transform:uppercase}
.c-facts dd{margin-top:2px;color:var(--film);font-size:15.5px;font-variant-numeric:tabular-nums}
.c-facts dd small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
/* standing news about this hosting: a tinted strip, a bold sentence, one button */
.c-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 18px;border:1px solid var(--rule);border-radius:10px}
.c-note p{flex:1 1 320px;min-width:0;color:var(--plate);font-size:14.5px}
.c-note p b{color:var(--film);font-weight:600}
.c-note.n-attn{border-color:rgba(245,158,11,.4);background:#fffaf0}
.c-note.n-bad{border-color:rgba(178,58,38,.3);background:#fdf6f4}
/* automatic payment (Stripe): the offer, on paper ground */
.c-auto{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 18px;border-radius:10px;background:var(--paper)}
.c-auto>p{flex:1 1 320px;min-width:0;color:var(--plate);font-size:14.5px}
.c-auto>p b{color:var(--film);font-weight:600}
.c-auto>p .muted{display:block;margin-top:2px}
.c-sub-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.c-sub-acts .btn-brick{margin-left:auto}   /* cancel hosting sits in the bottom right corner of the block */

/* invoices: the payment column says the state in words; the chevron says the row opens */
.c-inv th.c-go,.c-inv td.c-go{width:40px;padding-left:0;text-align:right}
.c-inv td.c-go .ico{color:var(--dim);vertical-align:middle;transition:color .16s var(--ease),transform .2s var(--out)}
.c-inv tbody tr:hover td.c-go .ico,.c-inv tbody tr.is-hover td.c-go .ico{color:var(--film);transform:translateX(2px)}
.c-inv td{padding-top:15px;padding-bottom:15px}

/* who we bill: the sidebar on the right, a sheet that stays in view */
.c-side{position:sticky;top:84px;min-width:0}
.c-contact{display:grid;gap:8px;padding:22px 24px 24px;font-size:14.5px;color:var(--plate);overflow-wrap:anywhere}
.c-contact .label{margin-bottom:4px}
.c-contact-name{color:var(--film);font:600 17px/1.3 var(--sans);letter-spacing:-.01em}
.c-contact-acts{display:grid;gap:10px;margin-top:14px;padding-top:18px;border-top:1px dashed var(--dash)}

/* cancel hosting: what happens, in order */
.c-steps{display:grid;gap:12px;counter-reset:c-step}
.c-steps li{position:relative;padding-left:34px;color:var(--plate);counter-increment:c-step}
.c-steps li::before{content:counter(c-step);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--hair);border-radius:50%;color:var(--film);font:600 11.5px/1 var(--sans);font-variant-numeric:tabular-nums}
.c-steps b{color:var(--film);font-weight:600}

/* team */
.c-person{display:flex;align-items:center;gap:12px;min-width:0}
.c-person>span:last-child{min-width:0}
.c-person .tag{margin-left:4px}

/* my account */
.c-jump{margin-bottom:24px}
.c-anchor{scroll-margin-top:24px}
.c-totp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
.c-qr{padding:12px;border:1px solid var(--rule);border-radius:12px;background:var(--paper-hi);line-height:0}
.c-qr svg{display:block;width:180px;height:180px}
.c-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.c-key code{padding:6px 10px;font-size:14px;letter-spacing:.06em;overflow-wrap:anywhere}
.c-code{max-width:240px}
/* two-step: a password (or phone) field with its key beside it, level with the input line */
.c-pwrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 20px}
.c-pwrow>.field{flex:0 1 340px}
.c-pwrow>.key{margin-top:26px}
.c-nowrap{white-space:nowrap}
.c-pwnew .pw-rules{margin-top:12px}
.c-more>summary{list-style:none;width:fit-content}
.c-more>summary::-webkit-details-marker{display:none}
.c-more[open]>summary{margin-bottom:10px}

/* request access (signed out): the honeypot stays off screen; city, state and ZIP share a row */
.c-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.c-req{gap:16px;margin-top:22px}
.c-req .form-grid{gap:16px 24px}
.c-req .field input{min-height:40px;padding-block:8px}
.c-req .field textarea{min-height:64px}
.c-req .form-acts{padding-top:4px}
.c-addr{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) 58px 84px;gap:16px 18px;align-items:end}
.split-form .flashes.c-req-err{margin:22px 0 0}

/* responsive */
@media (max-width:960px){
  .c-half{max-width:none}
}
@media (max-width:1200px){
  .c-first-md{order:-1}
  .c-bill{grid-template-columns:minmax(0,1fr);max-width:880px}
  .c-side{position:static}
  .c-contact-acts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
@media (max-width:640px){
  .c-head-none{text-align:left}
  .c-kinds{grid-template-columns:minmax(0,1fr)}
  .c-show-sm{display:block}
  .c-inline-sm{display:inline}
  .c-first-sm{order:-1}
  .c-list a{padding-inline:16px}
  .c-pad,.c-sub{padding-inline:16px}
  .c-owe{padding:20px 16px 18px}
  .c-owe-row>.btn-gold,.c-owe-row>.btn-ink{width:100%}
  .c-due-list li{grid-template-columns:minmax(0,1fr) auto}
  .c-due-list li>:nth-child(2n){justify-self:end;text-align:right}
  .c-facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .c-inv .c-go{display:none}
  .c-inv td.nowrap{white-space:normal}   /* the payment phrase wraps instead of clipping */
  .c-acts{flex-direction:column;align-items:flex-end;gap:4px}
  .c-acts .chip span{display:none}
  .c-totp{grid-template-columns:minmax(0,1fr)}
  .c-qr{justify-self:start}
  .c-pwrow>.field{flex:1 1 100%}
  .c-pwrow>.key{margin-top:0}
  .c-due-list li{grid-template-columns:auto 1fr;gap:4px 12px}
  .c-due-list li span:last-child{grid-column:1/-1}
  .c-addr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .c-addr>.field:nth-child(-n+2){grid-column:1/-1}
  .seg.c-subnav,.c-subnav .seg{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg.c-subnav::-webkit-scrollbar,.c-subnav .seg::-webkit-scrollbar{display:none}
}

/* ── websites: a card per site with a picture of the site itself (2026-10-12) ─────────────────────────────── */
.c-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.c-site{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;overflow:hidden}
.c-site.is-off{opacity:.72}
.c-site-pic{display:block}
.c-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy);border-bottom:1px solid var(--rule)}
.c-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ease)}
.c-site:hover .c-shot img{transform:scale(1.025)}
.c-shot-none{display:grid;place-content:center;height:100%;padding:24px;text-align:center;color:#a6aeb5;
  background:radial-gradient(120% 70% at 0% 0%,#22354a 0%,#1b2c3d 48%,#132130 100%);box-shadow:inset 0 1px 0 rgba(241,245,248,.1)}
.c-shot-none b{display:block;color:#f1f5f8;font:400 15px/1.35 var(--mark);letter-spacing:.05em;overflow-wrap:break-word}
.c-shot-none small{display:block;margin-top:8px;font-size:13px}
.c-site-b{display:grid;gap:3px;padding:18px 22px 4px}
.c-site-b .h3{font-size:17px;overflow-wrap:anywhere}
.c-site-b .h3 a{transition:color .16s var(--ease)}
.c-site-b .h3 a:hover{color:var(--steel)}
.c-site-d{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.c-site-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding:14px 22px 18px}
.c-site-f dt{color:var(--dim);font:600 12px/1.6 var(--label);letter-spacing:.06em;text-transform:uppercase}
.c-site-f dd{margin-top:1px;color:var(--film);font-size:14.5px;overflow-wrap:anywhere}
.c-site-a{display:flex;flex-wrap:wrap;gap:10px;padding:0 22px 20px}
/* the site page: the picture first, then the facts */
.c-hero .c-shot{aspect-ratio:16/9;border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.c-hero-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:14px 22px;border-top:1px solid var(--rule)}
.c-hero-f p{min-width:0;color:var(--muted);font-size:14.5px;overflow-wrap:anywhere}
.c-hero-f p b{color:var(--film);font-weight:600}
.c-head-state{align-self:center;color:var(--plate);font-size:15px}
/* a small picture beside a site's name in a table */
.c-mini{display:flex;align-items:center;gap:14px;min-width:0}
.c-mini .c-shot{flex:0 0 84px;width:84px;aspect-ratio:16/10;border:1px solid var(--rule);border-radius:6px}
.c-mini .c-shot-none b{font-size:9px;letter-spacing:0}
.c-mini .c-shot-none small{display:none}
.c-mini .c-shot-none{padding:4px}
.c-mini>span:last-child{min-width:0}
/* standing news on a page (overview, requests, account): a tinted strip, a bold sentence, one button, no lamp */
.c-note+.grid,.c-note+.stack{margin-top:24px}
/* tables: right-hand actions as small buttons */
.c-acts{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.c-acts .inline-form{display:inline-flex}
/* disclosures (account): a sentence with a chevron, not caps */
.c-more>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;width:fit-content;cursor:pointer;color:var(--steel);font-weight:500;font-size:14.5px}
.c-more>summary::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%232f6fae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s var(--out)}
.c-more[open]>summary::before{transform:rotate(90deg)}
.c-more>summary:hover{color:var(--film)}
.c-more>summary.c-danger{color:var(--brick)}
.c-more>summary.c-danger::before{filter:hue-rotate(150deg) saturate(1.4)}
@media (max-width:640px){
  .c-sites{grid-template-columns:minmax(0,1fr)}
  .c-site-f{grid-template-columns:minmax(0,1fr)}
  .c-mini .c-shot{display:none}
}

/* ── overview (2026-10-12): the welcome slab, then the websites as cards, the activity, and who is signed in ────────
   Evening of 10-12 (James: "better positioned to save screen real estate … an at a glance type page"): the slab is a
   band, not a hero — the greeting, the sentence and the action on the left, the three numbers as a strip on the
   right; the page starts 18px under the bar; websites are one-line cards with the picture at the left; five lines
   of activity; the profile card folded; the request prompt is a button on Open requests. */
/* 10-12 later, the bar gone (James: "we can afford some more spacing in the margins and from each container"):
   one column edge for everything (the slab is no longer inset), 32px under the top, 32px between the slab and the
   grid, 28px between containers, the sheets back to their full padding. */
.c-page-ov{padding-top:32px}
/* 2026-10-14 (James: "the overview slab is a bit much … like the side rail but a bit less opaque"), then the same day
   ("more colorful … dark enough to warrant the heading being white … in between what it was before and what you
   changed it to … not different colors"): the original slab's fluid (navy with amber currents) laid over the rail's
   paper-grey ground at .8, so it lands halfway between the old night slab and the paper; type in the night set, with
   two soft pools (about half the old scrims) under the copy and the numbers so the small type stays ≥ 4.5:1. */
.c-ov{--film:#f1f5f8;--plate:#dee4e9;--muted:#a6aeb5;--hair:rgba(241,245,248,.24);--dash:rgba(241,245,248,.2);
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);gap:20px 36px;align-items:end;margin:0;padding:clamp(24px,2.4vw,32px) clamp(26px,2.8vw,40px);
  border-radius:18px;overflow:hidden;color:var(--film);background:linear-gradient(180deg,#eef1f4 0%,#e9edf1 100%);border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(15,27,39,.03),0 30px 60px -38px rgba(15,27,39,.5)}
.c-ov-art{position:absolute;inset:0;z-index:-2;opacity:.8;pointer-events:none}
.c-ov-art>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.c-ov::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 62% 95% at 0% 70%,rgba(5,10,16,.4) 0%,rgba(5,10,16,.26) 46%,rgba(5,10,16,0) 100%),
  radial-gradient(ellipse 64% 120% at 100% 60%,rgba(5,10,16,.4) 0%,rgba(5,10,16,.25) 50%,rgba(5,10,16,0) 100%)}
.c-ov-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0}
.c-ov-h{color:var(--film);font:600 clamp(24px,2.2vw,32px)/1.1 var(--sans);letter-spacing:-.022em;text-shadow:0 2px 20px rgba(5,10,16,.35)}
.c-ov-s{max-width:44ch;color:var(--film);font-size:15.5px;line-height:1.45}
.c-ov-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
/* a second, quieter action on the slab (an invoice due while a request waits): the line button on the night */
.c-ov-act .btn-line{border-color:rgba(241,245,248,.3);background:rgba(241,245,248,.08);color:var(--film);box-shadow:none}
.c-ov-act .btn-line:hover{border-color:rgba(241,245,248,.7);background:rgba(241,245,248,.16)}
/* the three numbers, a strip on the slab's right */
.c-ov-facts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:end;gap:0;margin:0}
.c-ov-facts>a,.c-ov-facts>div{display:grid;align-content:start;gap:2px;padding:4px 14px 2px 16px;border-left:1px solid var(--hair);transition:border-color .2s var(--ease)}
.c-ov-facts>a:hover{border-left-color:var(--gold)}
.c-ov-facts dt{color:var(--plate);font:600 12px/1.5 var(--label);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.c-ov-facts dd{color:var(--film);font:600 22px/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-ov-facts dd.bad{color:#ff9a84}
.c-ov-facts small{color:var(--film);font-size:12.5px;line-height:1.35}
.c-ov-facts a:hover dd{color:var(--gold-hi)}
/* below the slab: main + side */
.c-ov-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:28px;align-items:start;margin-top:32px}
.c-ov-main,.c-ov-side{display:grid;gap:28px;min-width:0}
.c-ov-main .section-head{margin-bottom:16px;align-items:center}
.c-ov-main .sheet-body{padding:18px 22px 20px}
.c-ov-main .feed li{padding-bottom:14px}
.c-ov-main .feed-m{font-size:12.5px}
/* a website as one line: the picture at the left, the name and the two facts, the buttons at the right */
.c-sites-ov{grid-template-columns:minmax(0,1fr);gap:14px}
.c-site-sm{grid-template-columns:176px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center}
.c-site-sm .c-site-pic{grid-row:1/3;align-self:stretch}
.c-site-sm .c-shot{height:100%;min-height:100px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--rule)}
.c-site-sm .c-shot-none{padding:8px}
.c-site-sm .c-shot-none b{font-size:11px;letter-spacing:.02em}
.c-site-sm .c-shot-none small{margin-top:3px;font-size:12px}
.c-site-sm .c-site-b{grid-column:2;padding:12px 18px 0;gap:1px}
.c-site-sm .c-site-f{grid-column:2;grid-template-columns:repeat(2,minmax(0,max-content));gap:4px 26px;padding:7px 18px 12px}
.c-site-sm .c-site-f dt{white-space:nowrap}
/* the Websites page (10-12): the same one-line card with all four facts in a row */
.c-site-full .c-site-f{grid-template-columns:repeat(4,minmax(0,max-content));gap:4px 30px}
@media (max-width:1200px){.c-site-full .c-site-f{grid-template-columns:repeat(2,minmax(0,max-content))}}
.c-site-sm .c-site-a{grid-column:3;grid-row:1/3;flex-wrap:nowrap;padding:0 18px 0 0}
/* who is signed in */
.c-me{padding:22px 24px 24px}
.c-me-top{display:flex;align-items:center;gap:14px;min-width:0}
.c-me-t{min-width:0}
.c-me-t .h3{font-size:17px;overflow-wrap:anywhere}
.c-me-t .muted{font-size:14px;overflow-wrap:anywhere}
.c-me-f{display:grid;gap:10px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--dash)}
.c-me-f dt{color:var(--dim);font:600 12px/1.6 var(--label);letter-spacing:.06em;text-transform:uppercase}
.c-me-f dd{margin-top:1px;color:var(--film);font-size:14.5px}
.c-me-f dd small{display:block;margin-top:1px;color:var(--muted);font-size:13px}
.c-me-f dd.c-wrap{overflow-wrap:anywhere}
.c-me-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--dash)}
.c-ov-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:14px 22px;border-top:1px dashed var(--dash);color:var(--muted);font-size:13.5px}
@media (max-width:1200px){
  .c-ov-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .c-ov{grid-template-columns:minmax(0,1fr);gap:18px}
  .c-page-ov{padding-top:20px}
  .c-ov-facts>a,.c-ov-facts>div{padding:12px 14px 0 0;border-top:0;border-left:0}
  .c-ov-facts>a+a,.c-ov-facts>a+div,.c-ov-facts>div+a{padding-left:14px;border-left:1px solid var(--hair)}
}
@media (max-width:640px){
  .c-ov{padding:22px 18px 20px;min-height:0}
  .c-ov::after{background:linear-gradient(to top,rgba(5,10,16,.45) 0%,rgba(5,10,16,.35) 60%,rgba(5,10,16,.15) 100%)}
  .c-ov-facts{grid-template-columns:minmax(0,1fr);gap:0}
  .c-ov-facts>a,.c-ov-facts>div{padding:12px 0;border-left:0!important;border-top:1px dashed var(--dash)}
  .c-ov-facts>a+a,.c-ov-facts>a+div,.c-ov-facts>div+a{padding-left:0}
  .c-ov-facts>:first-child{border-top:0}
  .c-ov-act .btn-gold{width:100%}
  .c-site-sm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
  .c-site-sm .c-site-pic{grid-row:auto;align-self:auto}
  .c-site-sm .c-shot{height:auto;min-height:0;aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--rule)}
  .c-site-sm .c-site-b,.c-site-sm .c-site-f,.c-site-sm .c-site-a{grid-column:1;grid-row:auto}
  .c-site-sm .c-site-a{padding:0 18px 14px}
}

/* ── the account page (2026-10-12 redesign, James: "redesign the layout of the profile and security page"): two columns.
   Left, sticky: who is signed in (the overview's profile card) and the way down the page. Right: one sheet per section,
   each setting a ROW — what it is on the left (title, a sentence, its state in words), the form on the right. ───────── */
.c-page-acct{max-width:1280px}
.c-acct{display:grid;grid-template-columns:288px minmax(0,1fr);gap:28px;align-items:start}
.c-acct-side{position:sticky;top:24px;display:grid;gap:16px}
.c-acct-nav{display:grid;gap:2px;padding:0 4px}
.c-acct-nav a{display:block;padding:8px 14px;border-radius:8px;color:var(--muted);font-size:14.5px;font-weight:500;transition:background .16s var(--ease),color .16s var(--ease)}
.c-acct-nav a:hover{background:var(--paper-hi);color:var(--film)}
.c-set{display:grid;grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:16px 48px;padding:26px 28px 28px}
.c-set+.c-set{border-top:1px dashed var(--dash)}
.c-set-t{display:grid;gap:6px;align-content:start;min-width:0}
.c-set-t .h2{font-size:17.5px}
.c-set-t .h3{font-size:15.5px}
.c-set-s{color:var(--muted);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.c-set-w{margin-top:2px;font-size:14.5px}
.c-set-a{margin-top:10px}
.c-set-b{min-width:0}
.c-set-b.form{display:grid;gap:20px}
.c-fnarrow{max-width:440px}
.c-fstack{display:grid;gap:20px}
/* a row that needs the whole width (the sessions table): the title line across the top, the body under it */
.c-set-wide{grid-template-columns:minmax(0,1fr);gap:16px}
.c-set-wide .c-set-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.c-set-wide .c-set-s{flex:1 1 320px}
.c-set-wide .c-set-a{margin:0 0 0 auto}
/* each method's state at a glance, beside the section's title */
.c-methods{display:grid;align-content:start;margin:0;max-width:440px}
.c-methods>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--dash);font-size:14.5px}
.c-methods>div:first-child{padding-top:0}
.c-methods>div:last-child{border-bottom:0}
.c-methods dt{color:var(--plate)}
.c-methods dd{color:var(--film);white-space:nowrap}
/* the sessions table inside its row */
.c-sessions .table-wrap{border:1px solid var(--rule);border-radius:10px}
.c-sess th:first-child,.c-sess td:first-child{padding-left:16px}
.c-sess th:last-child,.c-sess td:last-child{padding-right:12px}
.c-sess td{padding-block:9px}
.c-sess-more{margin-top:10px;font-size:13.5px}
.c-codes-row .codes{margin-top:10px}
@media (max-width:1100px){
  .c-acct{grid-template-columns:minmax(0,1fr)}
  .c-acct-side{position:static;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .c-acct-nav{display:flex;flex-wrap:wrap;gap:4px;padding:0}
}
@media (max-width:800px){
  .c-set{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 16px 20px}
  .c-acct-side{grid-template-columns:minmax(0,1fr)}
}

/* ── the website tiles (Websites page, 2026-10-12): a picture, a name, one line of state, two small buttons ──────── */
.c-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.c-tile{display:grid;grid-template-rows:auto 1fr auto;min-width:0;overflow:hidden;transition:box-shadow .2s var(--ease),transform .2s var(--out)}
.c-tile:hover{box-shadow:0 1px 0 rgba(15,27,39,.03),0 18px 40px -24px rgba(15,27,39,.45);transform:translateY(-1px)}
.c-tile.is-off{opacity:.72}
.c-tile-pic{display:block}
.c-tile .c-shot{aspect-ratio:16/10;border-bottom:1px solid var(--rule)}
.c-tile-b{display:grid;gap:3px;padding:16px 18px 6px}
.c-tile-b .h3{font-size:16.5px;overflow-wrap:anywhere}
.c-tile-b .h3 a:hover{color:var(--steel)}
.c-tile-d{color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.c-tile-w{margin-top:6px;color:var(--film);font-size:14px}
.c-tile-a{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px 16px}