/* Client portal: sign-in and the account page. Sits on site.css (tokens, header,
   actions, close band, footer) and adds only what the account screens need. */

.account-hero { padding:clamp(40px,5vw,64px) var(--gutter) clamp(36px,4.4vw,56px); }
.account-hero h1 { max-width:18ch; text-wrap:balance; font-size:clamp(2.6rem,5.6vw,4.8rem); font-weight:700; line-height:.96; letter-spacing:-.045em; }
.account-hero .page-note { margin-top:16px; }
.account-hero .hero-actions { margin-top:24px; }

/* The account's own pages, one row at the foot of the blue band on every signed-in
   page: Dashboard, Billing, Visitors, Messages, Account. The current one is underlined
   in white. On a phone the row scrolls sideways rather than wrapping. */
.account-nav { display:flex; gap:0 30px; padding:0 var(--gutter); border-top:1px solid rgba(255,255,255,.24); overflow-x:auto; scrollbar-width:none; }
.account-nav::-webkit-scrollbar { display:none; }
.account-nav a { position:relative; flex:0 0 auto; padding:17px 0 15px; color:#dfe5ff; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; }
.account-nav a:hover { color:var(--white); }
.account-nav a[aria-current="page"] { color:var(--white); }
.account-nav a[aria-current="page"]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--white); }
.account-nav .count { display:inline-block; min-width:22px; margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.18); color:var(--white); font-size:12.5px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.lead:has(.account-nav) .account-hero { padding-bottom:clamp(28px,3.4vw,44px); }

.account { padding:clamp(28px,3.6vw,48px) var(--gutter) clamp(56px,6vw,88px); }
.account-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:22px; align-items:start; }
/* The column's one track is minmax(0,1fr), not the implicit auto: an auto track grows
   to its widest unbreakable line (a Studio request's design link), and that stretched
   the Dashboard past the screen. */
.account-col { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; min-width:0; }

.panel { padding:28px 28px 30px; background:var(--white); border-radius:var(--radius); }
/* The Styles page's controls also use .panel in site.css (a grid that spans its row
   under 1080px); the account pages' panels keep their own shape regardless. */
.account-page .panel { display:block; grid-column:auto; }
.panel > h2, .panel-head > h2 { font-size:22px; font-weight:600; letter-spacing:-.03em; line-height:1.15; }
/* A panel's title with its one action beside it (Billing's CSV download); the
   action drops under the title when the row runs out of room. */
.panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
.panel .panel-head .action { margin:0; }
.panel > h2 + p, .panel-lede { margin-top:10px; color:var(--muted); font-size:15px; }
.panel .action { margin-top:18px; }
.panel .action + .action { margin-left:10px; }
.panel-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.panel-actions .action, #download-csv { margin:0; max-width:100%; white-space:normal; }   /* a long label wraps inside the card at 320px */
.panel-actions .action + .action { margin-left:0; }   /* the gap spaces them; .panel .action + .action above would add 10px more */

/* Where the site is (home.html #progress-panel): five steps, then the one thing to do now. */
.progress-panel { margin-bottom:18px; }
.progress-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.progress-step { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:3px solid var(--rule); color:var(--muted); font-size:14px; font-weight:600; line-height:1.25; }
.progress-step.done { border-top-color:var(--blue); color:var(--ink); }
.progress-step.now { border-top-color:var(--blue); color:var(--ink); }
.progress-mark { display:inline-flex; flex:none; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--ground); font-size:13px; }
.progress-step.done .progress-mark { background:var(--blue); color:#fff; }
.progress-step.now .progress-mark { background:var(--ink); color:#fff; }
.progress-now { margin-top:22px; padding:20px 22px; border-radius:var(--radius-sm); background:var(--ground); }
.progress-now h3 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
.progress-now .panel-lede { margin-top:6px; }
@media (max-width:760px) {
  .progress-steps { grid-template-columns:1fr; gap:0; }
  .progress-steps { margin-top:12px; }
  .progress-step { padding:5px 0; border-top:0; }
  .progress-now { padding:16px; }
}
/* An outlined action that is a <button> would otherwise keep the browser's grey fill. */
.account-page .action-line { background:transparent; }
.account-page .action-line:hover { background:var(--blue); }

.status-line { margin-top:14px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.status-line small { display:block; margin-top:4px; color:var(--muted); font-size:15px; font-weight:400; }

.facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 22px; margin-top:18px; font-size:15px; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
.facts a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }

.money-list { margin-top:16px; }
.money-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; align-items:center; padding:14px 0; border-top:1px solid var(--rule); }
.money-list li:first-child { border-top:0; padding-top:4px; }
.money-list .what { font-weight:500; }
.money-list .when { display:block; margin-top:2px; color:var(--muted); font-size:14px; }
.money-list .amount { font-size:20px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.money-list .action { grid-column:1 / -1; justify-self:start; margin-top:4px; }
/* A bank payment on its way (up to four business days) in place of the Pay button, and
   why the last one bounced. */
.money-list .on-its-way { grid-column:1 / -1; justify-self:start; margin-top:4px; font-size:14px; font-weight:600; color:#1f2f6b; }
.money-list .pay-error, .billing-table .pay-error { color:#a7192f; font-weight:500; }
.money-list.paid .amount { color:var(--muted); font-weight:600; }
.money-total { display:flex; justify-content:space-between; gap:16px; margin-top:12px; padding-top:14px; border-top:1.5px solid var(--ink); font-weight:600; }
.money-total b { font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

.usage { margin-top:14px; font-size:17px; }
.usage b { font-size:2.4rem; font-weight:700; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; margin-right:6px; }

.request-form { display:grid; gap:14px; margin-top:20px; }
.request-form label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.request-form select, .request-form textarea, .signin-form input, .settings-form input, .settings-form select {
  display:block; width:100%; padding:13px 14px;
  border:1.5px solid #b9bfd2; border-radius:var(--radius-sm);
  background:var(--white); color:var(--ink); font:inherit;
}
.request-form textarea { min-height:120px; resize:vertical; }
.request-form select:focus-visible, .request-form textarea:focus-visible, .signin-form input:focus-visible, .settings-form input:focus-visible, .settings-form select:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.request-form .action { justify-self:start; margin-top:4px; }
.form-msg { margin-top:12px; font-size:15px; }
.form-msg.error { color:#a7192f; font-weight:600; }
.form-msg.ok { color:#0f6b3f; font-weight:600; }

.request-list { margin-top:20px; }
.request-list li { padding:14px 0; border-top:1px solid var(--rule); }
.request-list .req-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-size:14px; color:var(--muted); }
.request-list .req-head b { color:var(--ink); font-weight:600; }
.request-list p { margin-top:6px; white-space:pre-line; overflow-wrap:anywhere; }
.request-list p a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.request-list .reply { margin-top:8px; padding:10px 14px; background:var(--ground); border-radius:var(--radius-sm); font-size:15px; overflow-wrap:anywhere; }
.request-list .reply b { display:block; margin-bottom:2px; font-size:13px; color:var(--muted); font-weight:600; }

/* Photos on an update request (request-photos.js): the picker in the form, and the row
   of thumbnails under a sent request, each a link to the full photo. The admin app's
   Requests screen uses the same row. */
.req-label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.req-label span { color:var(--muted); font-weight:400; }
.photo-add-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.request-form .photo-add { position:relative; display:inline-flex; margin:0; font-size:14px; font-weight:700; cursor:pointer; }
.photo-add input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.photo-add:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:3px; }
.photo-hint { color:var(--muted); font-size:14px; }
.photo-strip { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.photo-item { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.photo-item img { display:block; width:88px; height:88px; object-fit:cover; border-radius:var(--radius-sm); background:var(--ground); }
a.photo-item:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-radius:var(--radius-sm); }
.photo-item .link-button { font-size:14px; }

/* Monthly care: the plan, then Upgrade with "Change plan" and "Card on file" as quiet
   links beside it. */
.care-actions { align-items:center; gap:10px 18px; }
.care-actions .link-button { font-size:15px; }
.care-next { margin-top:14px; font-size:15px; }
.care-next .link-button { font-size:15px; }
.care-site + .care-site { margin-top:22px; }
.care-site > .form-msg { margin-top:14px; }
.care-site .form-msg:empty { display:none; }
.care-site .form-msg:focus { outline:none; }
.int-dialog.plan-dialog { width:min(500px, calc(100vw - 32px)); }
.confirm-dialog .panel-actions { margin-top:20px; align-items:center; gap:10px 18px; }
.plan-dialog-body { padding:4px 28px 26px; }
.pay-choice { display:inline-flex; flex-direction:column; align-items:flex-end; gap:4px; }
.pay-choice .link-button { font-size:13px; }

/* The plan chooser (account.js, openPlans) is the integrations dialog's frame
   (.int-dialog), opened without showModal over its own scrim, so Stripe's bank sign-in
   and card checks, which it adds to the page, sit above it and take clicks. Step one
   is a rate card: plan, updates a month, price, the plans' shared terms said once
   beneath; then how to pay and one button. Step two is Stripe's form in the same frame. */
html.plan-open { overflow:hidden; }
.plan-scrim { position:fixed; inset:0; z-index:60; background:rgba(16,26,46,.55); }
.int-dialog.plan-chooser:focus { outline:none; }
.int-dialog.plan-chooser { position:fixed; inset:0; z-index:61; width:min(760px, calc(100vw - 32px)); height:fit-content; margin:auto; overflow:auto; overscroll-behavior:contain; }
.plan-lede { margin-top:4px; color:var(--muted); font-size:15px; }
.plan-sheet { margin:20px 0 0; padding:0; border:0; }
/* One grid for the header and every row (the rows are subgrids), so the updates and
   price columns line up down the card whatever each cell holds. */
.plan-grid { display:grid; grid-template-columns:18px minmax(0,1fr) max-content max-content; column-gap:18px; }
.plan-grid-head, .plan-row { grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:baseline; }
.plan-grid-head { padding:0 14px 8px; color:var(--muted); font-size:13px; font-weight:500; }
.plan-grid-head span:first-child { grid-column:2; }
.plan-grid-head span:nth-child(n+2), .plan-row-updates, .plan-row-price { text-align:right; }
.plan-row { padding:13px 14px; border-top:1px solid var(--rule); cursor:pointer; }
.plan-row:last-child { border-bottom:1px solid var(--rule); }
.plan-row:hover { background:#f6f7fb; }
.plan-row input { align-self:center; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.plan-row-name { font-size:17px; font-weight:600; letter-spacing:-.015em; }
.plan-row-name small { display:block; color:var(--blue); font-size:13px; font-weight:600; letter-spacing:0; }
.plan-row-updates { font-size:16px; font-variant-numeric:tabular-nums; }
.plan-row-price { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
.plan-row:has(input:checked) { background:var(--tint); }
.plan-row:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:-3px; }
.plan-row input:focus-visible { outline:none; }   /* the row carries the ring */
.plan-sheet-note { margin-top:12px; font-size:14.5px; line-height:1.5; }
.plan-sheet-extra { margin-top:8px; color:var(--muted); font-size:14px; }
.plan-sheet-note a { color:var(--ink); text-underline-offset:3px; white-space:nowrap; }
.plan-pay-by { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0 0; padding:0; border:0; }
.plan-pay-by[hidden] { display:none; }
.plan-pay-by legend { margin-bottom:8px; font-size:15px; font-weight:600; }
.plan-pay-by label { display:grid; grid-template-columns:18px minmax(0,1fr); gap:0 10px; align-items:baseline; padding:11px 14px; border:1.5px solid var(--rule); border-radius:var(--radius-sm); cursor:pointer; }
.plan-pay-by input { grid-row:1 / 3; align-self:center; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.plan-pay-by span { font-size:16px; font-weight:600; }
.plan-pay-by small { color:var(--muted); font-size:13.5px; font-variant-numeric:tabular-nums; }
.plan-pay-by label:has(input:checked) { border-color:var(--blue); background:var(--tint); }
.plan-pay-by label:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:2px; }
.plan-pay-by input:focus-visible { outline:none; }
.plan-form .int-how { margin-top:16px; color:var(--ink); }
.plan-form .panel-actions { align-items:center; gap:10px 18px; }
.plan-form .action:disabled { background:var(--ground); color:var(--muted); cursor:default; }   /* 5.3:1, not a faded blue */
.plan-form .form-msg:empty { display:none; }
.plan-form .panel-actions .form-msg { flex:1 0 100%; margin:0; }
.plan-due { flex:1 0 100%; margin:0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.plan-due[hidden] { display:none; }
/* The confirm button stays in view at the foot of the chooser while the plans scroll
   (the dialog is the scroll box on a short screen). */
.plan-form .panel-actions { position:sticky; bottom:0; margin:0 -28px; padding:16px 28px 20px; background:var(--white); }
@media (max-width:760px) { .plan-form .panel-actions { margin:0 -20px; padding:14px 20px 18px; } }
@media (max-width:440px) { .plan-pay-by { grid-template-columns:minmax(0,1fr); } }
/* Step two. Stripe's form runs the dialog's full width: it has its own margins. */
.plan-paying { margin-top:4px; font-size:15px; }
.plan-paying .link-button { font-size:15px; }
.plan-stripe { position:relative; min-height:320px; margin:10px -28px 0; }
.plan-stripe-slot { position:relative; z-index:1; }   /* over the waiting line */
.plan-stripe-wait { position:absolute; inset:0 0 auto; margin:0; padding:48px 28px; color:var(--muted); font-size:15px; }
.plan-fine { margin-top:10px; color:var(--muted); font-size:13.5px; }
.plan-dialog-body > .form-msg:empty { display:none; }

/* Sign-in and verify: one window, like the Studio. The blue header, then a single
   white card in the middle of the grey ground, and nothing else: no title band, no
   footer. Two steps share the card: the email, then the code. */
.signin-page { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--ground); }
.signin-main { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; flex:1 0 auto; padding:40px 20px 72px; }
.signin-card { width:100%; max-width:440px; padding:40px 40px 36px; background:var(--white); border-radius:var(--radius); }
.signin-card h1 { font-size:clamp(2rem, 3vw, 2.4rem); font-weight:700; line-height:1.05; letter-spacing:-.04em; }
.signin-lede { margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.5; }
.signin-lede b { color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.signin-form { display:grid; gap:16px; margin-top:24px; }
.signin-form label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.signin-form .action { width:100%; }
.signin-form .form-msg { margin-top:0; }
.signin-form .form-msg:empty { display:none; }
.signin-switch { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; margin-top:20px; font-size:15px; }
.resend-wait { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.resend-wait:empty { display:none; }
.link-button:disabled { color:var(--muted); text-decoration:none; cursor:default; }
.signin-foot { max-width:440px; color:var(--muted); font-size:14.5px; text-align:center; }
.signin-foot a { color:var(--blue); font-weight:600; }
.verify-title { margin-top:24px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
#verify-retry .action { width:100%; margin-top:22px; }
@media (max-width:760px) {
  .signin-main { justify-content:flex-start; padding:28px 18px 56px; }
  .signin-card { padding:28px 22px 26px; }
}
.dev-link { margin-top:14px; padding:12px 14px; background:#fff3bf; border-radius:var(--radius-sm); font-size:14px; overflow-wrap:anywhere; }

.banner { margin:0 var(--gutter); margin-top:22px; padding:14px 18px; background:#dff5e8; color:#0f4d2e; border-radius:var(--radius-sm); font-weight:600; }
.banner.warn { background:#fff3bf; color:#5c4300; }

.account .sign-out { background:none; border:0; padding:0; color:var(--blue); font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; cursor:pointer; }
.empty { margin-top:14px; color:var(--muted); font-size:15px; }
.hidden, .account-page [hidden] { display:none !important; }

/* Visitors page. One filter row scopes everything under it; six headline numbers
   lead (visitors biggest) each with its change on the range before; every chart is
   a single series in the site blue with a table twin; the rest is tables under
   plain group headings. */
.stats-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:22px; }
.range-tabs { display:flex; flex-wrap:wrap; gap:2px; padding:4px; background:var(--white); border-radius:var(--radius-sm); }
.range-tabs button { border:0; background:none; padding:9px 14px; border-radius:4px; font:inherit; font-size:14.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.range-tabs button:hover { color:var(--ink); background:var(--ground); }
.range-tabs button[aria-pressed="true"] { background:var(--ink); color:var(--white); }
.custom-range { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:14.5px; color:var(--muted); }
.custom-range input, .site-pick select { padding:8px 12px; border:1.5px solid #b9bfd2; border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font:inherit; font-size:14.5px; }
.custom-range input:focus-visible, .site-pick select:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.action-xs { min-height:40px; padding:0 16px; font-size:14px; }
.site-pick { margin-left:auto; }
.stats.loading .panel, .messages.loading .panel { opacity:.55; transition:opacity .15s ease; }

.stats-lead { padding-bottom:26px; }
.kpis { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(5, minmax(0,1fr)); gap:18px 22px; align-items:end; }
.kpi { display:flex; flex-direction:column; gap:4px; min-width:0; }
.kpi-label { font-size:13.5px; font-weight:600; color:var(--muted); }
.kpi-value { color:var(--ink); font-size:clamp(1.7rem,2.4vw,2.1rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; }
.kpi-hero .kpi-value { font-size:clamp(2.8rem,5vw,3.8rem); letter-spacing:-.045em; line-height:1; }
.kpi-delta { min-height:1.3em; font-size:13.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.kpi-delta.better { color:#0f7a45; }
.kpi-delta.worse { color:#b3261e; }
.kpi-delta.same { font-weight:400; }
.kpi-split { font-size:13.5px; color:var(--muted); }
.map-panel { padding:0; overflow:hidden; }
.map { height:380px; background:var(--ground); }
.map-note { margin:14px 28px 22px; }
.map-panel .map-note:empty { display:none; }
.map-panel .map.hidden + .map-note { margin-top:22px; }
.leaflet-container { font:inherit; }
.leaflet-tooltip { font-size:13.5px; line-height:1.3; }
.stats-lead .hero-sub { margin-top:16px; color:var(--muted); font-size:15px; }
.live-line { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:15px; font-weight:600; color:var(--ink); }
.live-dot { width:9px; height:9px; border-radius:50%; background:#0f7a45; box-shadow:0 0 0 3px #dff5e8; }
.chart-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; }
.metric-tabs { display:flex; gap:2px; padding:3px; background:var(--ground); border-radius:var(--radius-sm); }
.metric-tabs button { border:0; background:none; padding:6px 12px; border-radius:4px; font:inherit; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.metric-tabs button:hover { color:var(--ink); }
.metric-tabs button[aria-pressed="true"] { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(16,26,46,.08); }
.stats-heading { margin-top:34px; font-size:clamp(1.3rem,2vw,1.6rem); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.stats-heading + .panel, .stats-heading + .stats-grid { margin-top:14px; }
.actions-panel .panel-lede { margin-top:0; }
.actions-table tr.has-detail td { border-bottom:0; padding-bottom:2px; }
.actions-table tr.detail td { padding-top:0; font-size:13px; color:var(--muted); overflow-wrap:break-word; }
.stats-download { margin-top:18px; }
.stats-download .action { margin:0; }

.chart { position:relative; margin-top:12px; }
.chart-small { margin-top:16px; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .bar { fill:var(--blue); }
.chart .bar.is-hot { fill:var(--blue-deep); }
.chart .hit { fill:transparent; }
.chart .grid { stroke:var(--rule); stroke-width:1; }
.chart .axis { stroke:var(--rule); stroke-width:1; }
.chart .tick { fill:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.chart-tip { position:absolute; z-index:2; pointer-events:none; padding:8px 12px; background:var(--ink); color:var(--white); border-radius:var(--radius-sm); font-size:13.5px; line-height:1.3; white-space:nowrap; transform:translate(-50%, calc(-100% - 10px)); }
.chart-tip b { display:block; font-size:15px; }
.chart-table { margin-top:14px; font-size:15px; }
.chart-table summary { cursor:pointer; color:var(--muted); font-weight:600; }
.chart-table .stat-table { max-width:420px; }

.stats-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:22px; }
.stats-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
/* The basic level of the Visitors page (a plan without the full page, or none yet): the parts the
   plan does not unlock are marked data-full in the markup and simply do not show;
   the three headline numbers and the pages panel fill the space. */
.stats.analytics-basic [data-full] { display:none; }
.analytics-basic .kpis { grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)); }
.analytics-basic .stats-grid { grid-template-columns:minmax(0,1fr); }
.upgrade-panel { margin-top:22px; }
.stat-table { width:100%; margin-top:14px; border-collapse:collapse; font-size:15px; }
.stat-table th { padding:0 0 8px; border-bottom:1px solid var(--rule); font-size:13px; font-weight:600; color:var(--muted); text-align:left; }
.stat-table td { padding:9px 0; border-bottom:1px solid var(--ground); vertical-align:top; }
.stat-table tr:last-child td { border-bottom:0; }
.stat-table th.num, .stat-table td.num { padding-left:12px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stat-table td.num { font-weight:600; }
.stat-table td.num + td.num { color:var(--muted); font-weight:400; }
.stat-table td.name { overflow-wrap:anywhere; }
.stats-note { margin-top:26px; }

/* ---- Billing page ---------------------------------------------------------- */
.kpis-billing { grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); }
.kpi-value.kpi-small { font-size:clamp(1.15rem,1.6vw,1.35rem); letter-spacing:-.02em; padding-top:6px; }
.stats-lead .panel-actions { margin-top:22px; }
.stats-lead .panel-actions:empty { display:none; }
.billing-filters .range-tabs[hidden] { display:none; }
.billing > .panel + .panel { margin-top:22px; }
/* Messages keeps its CSV download at the end of its filter row. */
.billing-download { margin-left:auto; }
.billing-download .action { margin:0; }
.panel-link { margin-top:16px; font-size:15px; }
.panel-link a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.table-scroll { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.billing-table { min-width:640px; }
.billing-table th:nth-child(2) { width:40%; }
.billing-table th, .billing-table td { padding-right:16px; }
.billing-table th:last-child, .billing-table td:last-child { padding-right:0; }
.billing-table th.num, .billing-table td.num { padding-right:22px; }
.billing-table td { vertical-align:middle; }
.billing-table td small { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
.billing-table td.date { white-space:nowrap; color:var(--muted); }
.billing-table tr.is-open td.date { color:var(--ink); font-weight:600; }
.billing-table td.num { font-size:16px; }
.billing-table a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
/* Your plan: the package and care the client chose, and when each part is billed. */
.plan-table { min-width:600px; }
.plan-table th:nth-child(1) { width:36%; }
.plan-table th:nth-child(2) { width:auto; }
.plan-table td.when { color:var(--muted); }
.plan-site .status-line { margin-top:12px; }
.plan-site .site-name { margin-top:0; font-size:18px; font-weight:600; letter-spacing:-.02em; }
.plan-site + .plan-site { margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); }
.plan-next .panel-actions { margin-top:14px; }
.billing-table td.receipt .copy-pay-link { display:block; margin-top:6px; font-size:13px; white-space:nowrap; }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; background:var(--ground); color:var(--muted); font-size:12.5px; font-weight:600; white-space:nowrap; }
.pill-ok { background:#dff5e8; color:#0f4d2e; }
.pill-open { background:#dfe5ff; color:#1f2f6b; }
.pill-warn { background:#fff3bf; color:#5c4300; }
.pill-bad { background:#fbe1e4; color:#7a1224; }
.link-button { background:none; border:0; padding:0; color:var(--blue); font:inherit; font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
#code-form input { letter-spacing:.14em; font-size:20px; font-variant-numeric:tabular-nums; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Receipt page ---------------------------------------------------------- */
.receipt .receipt-sheet { max-width:680px; margin-inline:auto; }
.receipt-head { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.receipt-from { font-size:15px; line-height:1.5; color:var(--muted); }
.receipt-from b { color:var(--ink); font-size:18px; }
.receipt-meta p { display:grid; grid-template-columns:auto auto; gap:2px 14px; font-size:15px; text-align:right; }
.receipt-meta p + p { margin-top:4px; }
.receipt-meta span { color:var(--muted); }
.receipt-meta b { font-variant-numeric:tabular-nums; }
.receipt-to { margin-top:26px; }
.receipt-lines { margin-top:26px; }
.receipt-lines th:first-child, .receipt-lines td:first-child { padding-right:16px; }
.receipt-lines td small { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
.receipt-lines tfoot td { padding-top:12px; border-top:1px solid var(--rule); border-bottom:0; font-size:17px; }
.receipt-lines tfoot tr:first-child td { border-top:1px solid var(--rule); }
.receipt-lines tfoot tr + tr td { border-top:0; padding-top:4px; }
.receipt-how { margin-top:22px; }
.receipt-note { margin-top:26px; color:var(--muted); font-size:14px; }
.receipt .panel-actions .action { margin:0; }

/* ---- Account page ---------------------------------------------------------- */
.settings-form { display:grid; gap:16px; margin-top:20px; }
.settings-form label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.settings-form .hint { margin-top:6px; color:var(--muted); font-size:14px; }
.settings-form input[readonly] { background:var(--ground); color:var(--muted); border-color:transparent; }
.settings-form .check { display:flex; align-items:flex-start; gap:12px; font-size:15px; }
.settings-form .check input { width:20px; height:20px; margin:2px 0 0; padding:0; accent-color:var(--blue); flex:0 0 auto; }
.settings-form .check label { margin:0; font-weight:500; }
.settings-form .check .hint { margin-top:2px; }
.settings-form .form-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.settings-form .form-row .action { margin:0; }
.settings-form .form-row .form-msg { margin:0; }
.session-list { margin-top:16px; }
.session-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:13px 0; border-top:1px solid var(--rule); font-size:15px; }
.session-list li:first-child { border-top:0; padding-top:4px; }
.session-list b { font-weight:600; }
.session-list small { display:block; margin-top:2px; color:var(--muted); font-size:13.5px; }
.site-settings { margin-top:22px; }
.site-settings + .site-settings { margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); }
.site-settings h3 { font-size:17px; font-weight:600; letter-spacing:-.02em; }

/* ---- Site settings page -------------------------------------------------------
   Four equal cards (look, address, care plan, messages) two across, then the
   change-request form the full width under them. Every track is minmax(0,1fr)
   and each card clips its own overflow, so nothing can run under a neighbour. */
.settings-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-bottom:22px; }
.settings .panel { min-width:0; overflow:hidden; overflow-wrap:anywhere; }
.settings-cards .panel { display:flex; flex-direction:column; }
.settings-cards .panel > h2 + div { margin-top:16px; }
.settings-cards .site-settings { margin-top:0; }
.settings .facts { margin-top:0; }
.settings .empty { margin-top:12px; }
.settings .also-to { margin-top:10px; }
.settings .note { margin-top:14px; color:var(--muted); font-size:14.5px; line-height:1.45; }
#request-panel .request-form { max-width:720px; }
@media (max-width:1100px) { .settings-cards { grid-template-columns:minmax(0,1fr); } }

/* ---- Messages page --------------------------------------------------------- */
.msg-filters { justify-content:space-between; }
.msg-list { margin-top:8px; }
.msg-list li { padding:20px 0 22px; border-top:1px solid var(--rule); }
.msg-list li:first-child { border-top:0; padding-top:10px; }
.msg-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; }
.msg-who { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.msg-when { color:var(--muted); font-size:14px; white-space:nowrap; }
.msg-contact { margin-top:6px; font-size:15px; }
.msg-contact a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.msg-contact > * + *::before { content:' · '; color:var(--muted); }
.msg-body { margin-top:10px; white-space:pre-line; overflow-wrap:anywhere; }
.msg-draft { margin-top:14px; padding:12px 14px; border-radius:10px; background:color-mix(in srgb, var(--blue) 6%, transparent); }
.msg-draft .msg-body { margin-top:4px; }
.msg-draft-label { font-size:13px; font-weight:600; color:var(--muted); }
.msg-foot { margin-top:10px; color:var(--muted); font-size:13.5px; }
.msg-foot.failed { color:#a7192f; font-weight:600; }
.msg-count { margin-top:10px; color:var(--muted); font-size:15px; }

@media print {
  .site-header, .site-footer, .skip-link, .lead, .banner, .no-print, .nav-toggle { display:none !important; }
  body, .account-page { background:#fff !important; color:#000; }
  .account, .receipt { padding:0 !important; }
  .receipt .receipt-sheet { max-width:none; margin:0; padding:0 !important; border-radius:0; box-shadow:none; }
  .receipt-lines th, .receipt-lines td { border-color:#ccc; }
  a { color:inherit; text-decoration:none; }
}

@media (max-width:960px) {
  .account-grid { grid-template-columns:minmax(0,1fr); }
  .stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kpis { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .analytics-basic .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kpi-hero { grid-column:1 / -1; }
  .kpis-billing { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .account-hero { padding:36px 18px 32px; }
  /* Five tabs do not fit a phone in one row; wrap to two rather than cut one off. */
  .account-nav { flex-wrap:wrap; gap:0 22px; padding:4px 18px 0; overflow:visible; }
  .account-nav a { padding:12px 0 11px; font-size:14.5px; }
  .session-list li { grid-template-columns:minmax(0,1fr); }
  .msg-filters .range-tabs { width:100%; }
  .account { padding-left:18px; padding-right:18px; }
  .panel { padding:22px 20px 24px; }
  .facts { grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .facts dt { margin-top:10px; }
  .facts dt:first-child { margin-top:0; }
  .money-list li { grid-template-columns:minmax(0,1fr); }
  .money-list .amount { text-align:left; }
  .plan-dialog-body { padding:4px 20px 0; }
  .plan-dialog .int-dialog-head { padding-left:20px; padding-right:20px; }
  .plan-grid { column-gap:14px; }
  .plan-grid-head { padding:0 10px 8px; }
  .plan-row { padding:12px 10px; }
  .plan-stripe { margin:14px -20px 0; }
  .plan-form .int-how { font-size:14px; }
  .banner { margin-left:18px; margin-right:18px; }
  .stats-grid, .stats-grid.two { grid-template-columns:minmax(0,1fr); gap:16px; }
  .kpis, .kpis-billing { grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 14px; }
  .billing-download { margin-left:0; width:100%; }
  .billing-download .action { width:100%; }
  .receipt-meta p { text-align:left; }
  /* Each invoice as a small card: date and status up top, what it was, then the
     amount beside the card, and the receipt link last. */
  .billing-table { min-width:0; }
  .billing-table thead { display:none; }
  .billing-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--ground); }
  .billing-table tr:last-child { border-bottom:0; }
  .billing-table td, .billing-table th { display:block; padding:0; border:0; }
  .billing-table td.date { grid-area:1 / 1; font-size:13.5px; }
  .billing-table td.date small { display:inline; margin-left:4px; }
  .billing-table td.status { grid-area:1 / 2; justify-self:end; }
  .billing-table td.name { grid-area:2 / 1 / 3 / 3; font-weight:500; }
  .billing-table td.num { grid-area:3 / 1; padding-left:0; text-align:left; font-size:18px; }
  .billing-table td.card { grid-area:3 / 2; justify-self:end; color:var(--muted); font-size:13.5px; }
  .billing-table td.receipt { grid-area:4 / 1 / 5 / 3; }
  .billing-table td.receipt:empty { display:none; }
  /* Your plan, stacked: what and its status, then when, then the amount. */
  .plan-table td.name { grid-area:1 / 1; }
  .plan-table td.status { grid-area:1 / 2; }
  .plan-table td.when { grid-area:2 / 1 / 3 / 3; font-size:14px; }
  .plan-table td.num { grid-area:3 / 1; }
  .kpi-hero .kpi-value { font-size:2.6rem; }
  .map { height:300px; }
  .map-note { margin:12px 20px 18px; }
  .metric-tabs { width:100%; }
  .metric-tabs button { flex:1 1 auto; padding:7px 6px; font-size:13px; }
  .range-tabs { width:100%; }
  .range-tabs button { flex:1 1 auto; padding:9px 10px; font-size:14px; }
  .site-pick { margin-left:0; width:100%; }
  .site-pick select { width:100%; }
  .hero-figure { font-size:2.6rem; }
}


/* Site settings: the same panels as the rest of the backend, plus a row of actions
   under a block and a small heading inside one. */
.site-settings .site-name { margin-bottom:10px; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.settings-actions .action { margin-top:0; }
.settings-actions .action + .action { margin-left:0; }
.site-settings .sub-title { margin-top:26px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.site-settings + .site-settings .request-form { margin-top:0; }

/* Integrations: a search box, then a wall of white tiles per section on the grey
   ground, as many across as fit, each one a button that opens the dialog. A tile
   carries the service's own mark beside its name (Simple Icons, in the brand's colour,
   no box behind it; our own features get a line drawing in ink), one line on what it
   does, and where it stands, in type: blue for connected, red for broken. */
.int-tools { margin-bottom:clamp(30px,3.6vw,44px); }
.int-search { display:block; width:min(420px,100%); padding:12px 14px 12px 44px; border:1.5px solid #b9bfd2; border-radius:var(--radius-sm); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 14.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM13 13l4.5 4.5' fill='none' stroke='%235a6377' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 15px center / 18px 18px; color:var(--ink); font:inherit; font-size:15.5px; }
.int-search:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.int-search::-webkit-search-cancel-button { cursor:pointer; }
.int-group + .int-group { margin-top:clamp(36px,4vw,52px); }
.int-group > h2 { font-size:clamp(1.4rem,2.1vw,1.7rem); font-weight:700; letter-spacing:-.035em; line-height:1.1; }
.int-group > .panel-lede { margin-top:8px; }
.int-wall { display:grid; grid-template-columns:repeat(auto-fill, minmax(224px,1fr)); gap:14px; margin-top:18px; }
.int-tile { display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; height:100%; min-height:148px; padding:20px 20px 18px; border:1.5px solid transparent; border-radius:var(--radius); background:var(--white); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s ease; }
.int-tile:hover { border-color:var(--ink); }
.int-tile:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.int-head { display:flex; align-items:center; gap:12px; min-width:0; min-height:28px; }
.int-logo { flex:0 0 auto; width:28px; height:28px; color:var(--ink); }
.int-logo.is-wide { height:20px; }   /* a wordmark: its width is set from its own shape */
.int-name { font-size:18px; font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.int-with { color:var(--muted); font-size:14px; line-height:1.4; }
.int-state { margin-top:auto; padding-top:10px; font-size:14px; font-weight:700; color:var(--muted); }
.int-none { margin-top:0; max-width:60ch; }
.int-tile.is-ok .int-state { color:var(--blue); }
.int-tile.is-bad .int-state { color:#a7192f; }

.int-dialog { width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:var(--radius); background:var(--white); color:var(--ink); }
.int-dialog::backdrop { background:rgba(16,26,46,.55); }
.int-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px 0; }
.int-dialog-head h2 { font-size:26px; font-weight:700; letter-spacing:-.04em; }
.int-close { display:grid; place-items:center; width:40px; height:40px; margin-right:-8px; border:0; border-radius:var(--radius-sm); background:none; color:var(--ink); cursor:pointer; }
.int-close:hover { background:var(--ground); }
#dialog-body { padding:6px 28px 28px; }
#dialog-body .settings-form { margin-top:16px; }
.int-how { margin-top:14px; font-size:15px; color:var(--muted); }
.int-error { margin-top:14px; }
.int-inline { display:flex; gap:10px; }
.int-inline input { flex:1 1 auto; min-width:0; }
.int-inline .action { flex:0 0 auto; margin:0; }
.int-results { display:grid; gap:8px; }
.int-results:empty { display:none; }
.int-choice { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--ground); cursor:pointer; font-weight:500; }
.int-choice input { width:18px; height:18px; margin:3px 0 0; accent-color:var(--blue); flex:0 0 auto; }
.int-choice small { display:block; margin-top:2px; color:var(--muted); font-size:14px; }
.int-picked { font-size:15px; }
.int-copy { display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px 10px 10px 14px; border-radius:var(--radius-sm); background:var(--ground); }
.int-copy code { flex:1 1 auto; min-width:0; font-size:14px; overflow-wrap:anywhere; }
.int-copy .action { margin:0; flex:0 0 auto; }
.int-verify { display:grid; gap:10px; justify-items:start; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.int-verify > div { width:100%; }
.int-remove { margin-left:auto; border:0; background:none; padding:0; color:#a7192f; font:inherit; font-size:14.5px; font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.integrations .site-pick { display:block; margin-bottom:22px; }

@media (max-width:560px) {
  .int-wall { grid-template-columns:minmax(0,1fr); gap:10px; }
  .int-tile { min-height:0; }
  .int-inline { flex-direction:column; }
  .int-dialog-head, #dialog-body { padding-left:20px; padding-right:20px; }
  .int-remove { margin-left:0; }
}

/* Help page (account/help.html): one panel per topic, each a run of questions with
   the answer under each; beside them a plain list of the topics that stays in view
   on a wide screen, and on a phone comes first so the list is useful. */
.help-grid { grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); }
.help-side { position:sticky; top:108px; }   /* under the sticky site header (85px) */
.help-panel > h3 { margin-top:24px; font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.help-panel > h2 + h3 { margin-top:18px; }
.help-panel > h3 + p { margin-top:6px; }
.help-panel > p { font-size:16px; line-height:1.55; }
.help-panel > h2 + p { color:var(--ink); font-size:16px; }
.help-panel p a, .help-contents a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.help-panel .help-draft { margin-top:12px; font-weight:600; }
.help-panel p + p { margin-top:12px; }
.help-contents ul { margin-top:12px; }
.help-contents li + li { margin-top:8px; }
.help-contents a { font-size:16px; }
.help-main .panel { scroll-margin-top:104px; }
@media (max-width:960px) {
  .help-grid { grid-template-columns:minmax(0,1fr); }
  .help-side { position:static; display:contents; }
  .help-contents { order:-1; }
}

/* ---- The signed-in app shell ------------------------------------------------
   Every signed-in page is one window, the way the Studio is: the site's blue
   header across the top, the account's menu in a sidebar on the grey ground,
   and the page itself filling the rest. No blue title band and no marketing
   footer; the title sits at the top of the page in ink. Under 900px the sidebar
   folds into a row of tabs under the header and the page scrolls as one. */
.account-app-page { --head-h:84px; background:var(--ground); }
.account-shell { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - var(--head-h)); }

.account-side {
  position:sticky; top:var(--head-h); align-self:start;
  display:flex; flex-direction:column; gap:22px;
  height:calc(100vh - var(--head-h)); padding:26px 14px 72px;   /* the bottom 72px stays clear: the fixed language picker (nav.js, bottom-left) sits over it and covered Sign out */
  border-right:1px solid var(--rule); overflow-y:auto; overscroll-behavior:contain;
}
.side-shop { padding:0 12px; }
.side-shop b { display:block; font-size:17px; font-weight:700; letter-spacing:-.025em; line-height:1.2; overflow-wrap:anywhere; }
.side-shop span { display:block; margin-top:5px; color:var(--muted); font-size:14px; line-height:1.35; }
.side-shop a { display:inline-block; margin-top:10px; color:var(--blue); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.side-shop span:empty, .side-shop a[hidden] { display:none; }

.account-side .account-nav { display:flex; flex-direction:column; gap:2px; padding:0; border:0; overflow:visible; }
.account-side .account-nav a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); color:var(--ink); font-size:15px; font-weight:600; }
.account-side .account-nav a:hover { background:var(--white); color:var(--ink); }
.account-side .account-nav a[aria-current="page"] { background:var(--blue); color:var(--white); }
.account-side .account-nav a[aria-current="page"]::after { content:none; }
.account-side .account-nav .count { margin:0; background:var(--white); color:var(--ink); }
.account-side .account-nav a[aria-current="page"] .count { color:var(--blue); }
.account-side .account-nav a:focus-visible { outline:3px solid var(--ink); outline-offset:1px; }

.side-foot { margin-top:auto; padding:0 12px; color:var(--muted); font-size:14px; }
.side-foot span { display:block; margin-bottom:6px; overflow-wrap:anywhere; }
.side-foot span:empty { display:none; }
.side-foot .link-button { font-size:14.5px; }
/* A session that has not confirmed its email: pages that need the confirmed address say so in place (shell.js). */
.verify-gate { max-width:560px; margin:8px 0 0; padding:20px 22px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); }
.verify-gate p { margin:0 0 12px; line-height:1.5; }
.verify-gate p:last-child { margin-bottom:0; }
.account-main[data-unverified] > :not(.account-hero):not(.verify-gate):not(.confirm-email) { display:none !important; }

.account-main { min-width:0; padding:clamp(28px, 3vw, 44px) clamp(20px, 3.4vw, 64px) clamp(56px, 6vw, 88px); }
.account-app-page .account-hero { padding:0 0 clamp(22px, 2.4vw, 30px); }
.account-app-page .account-hero h1 { max-width:none; color:var(--ink); font-size:clamp(2rem, 3.1vw, 2.75rem); line-height:1.05; letter-spacing:-.04em; }
.account-app-page .account-hero .page-note { max-width:68ch; margin-top:10px; color:var(--muted); font-size:16px; }
.account-app-page .account-hero .page-note a { color:var(--blue); }
.account-app-page .account { padding:0; }
.account-app-page .banner { margin:0 0 22px; }
.account-app-page .account-main :focus-visible { outline-color:var(--ink); }

/* ---- Dashboard -------------------------------------------------------------
   Four figures in one white band, each a link into the page behind it; the
   figure is the biggest thing on the page after the title. */
.glance { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); align-items:stretch; margin-bottom:22px; background:var(--white); border-radius:var(--radius); overflow:hidden; }
.glance:empty { display:none; }
.glance-item { display:flex; flex-direction:column; gap:4px; min-width:0; padding:22px 26px 24px; color:var(--ink); text-decoration:none; transition:background-color .15s ease; }
.glance-item + .glance-item { box-shadow:inset 1px 0 0 var(--ground); }
.glance-item:hover { background:#f7f8fb; }
.glance-item:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }
.glance-label { color:var(--muted); font-size:14px; font-weight:600; }
.glance-item { justify-content:flex-end; }
.glance-value { font-size:clamp(1.4rem, 1.8vw, 1.7rem); font-weight:700; letter-spacing:-.045em; line-height:1.05; font-variant-numeric:tabular-nums; }
.glance-lead .glance-value { font-size:clamp(2.6rem, 4vw, 3.6rem); letter-spacing:-.05em; }
.glance-lead .glance-label { font-size:15px; color:var(--ink); }
.glance-sub { color:var(--blue); font-size:14px; font-weight:600; }
.overview .panel { scroll-margin-top:calc(var(--head-h) + 16px); }
.overview .account-grid { grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); }
.overview .site-name { margin-top:14px; font-size:19px; font-weight:600; letter-spacing:-.03em; }
.overview .site + .site { margin-top:22px; }
.overview .sub-title { margin-top:22px; font-size:15px; font-weight:700; }
.overview .panel-lede { margin-top:8px; }
.overview .request-form { margin-top:18px; }
.overview .req-row { max-width:260px; }
.overview .request-list { margin-top:10px; }
.overview .request-list li:first-child { border-top:0; padding-top:4px; }
.overview .form-msg:empty { display:none; }
.inbox-list { margin-top:12px; }
.inbox-list li { padding:12px 0; border-top:1px solid var(--rule); }
.inbox-list li:first-child { border-top:0; padding-top:2px; }
.inbox-list .req-head { display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted); }
.inbox-list .req-head b { color:var(--ink); font-size:15px; font-weight:600; }
.inbox-list p { margin-top:4px; font-size:15px; overflow-wrap:anywhere; }
.banner .link-button { color:inherit; }
@media (max-width:1180px) {
  .glance { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .glance-lead { grid-column:1 / -1; }
  .glance-item:nth-child(2) { box-shadow:inset 0 1px 0 var(--ground); }
  .glance-item:nth-child(n+3) { box-shadow:inset 1px 0 0 var(--ground), inset 0 1px 0 var(--ground); }
  .overview .account-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .glance-item { padding:18px 18px 20px; }
  .glance { grid-template-columns:minmax(0,1fr); }
  .glance-item:nth-child(n+2) { flex-direction:row; justify-content:flex-start; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:14px 18px; box-shadow:inset 0 1px 0 var(--ground); }
  .glance-item:nth-child(n+2) .glance-label { flex:1 0 100%; }
  .glance-lead .glance-value { font-size:2.8rem; }
  .overview .req-row { max-width:none; }
}

/* Under 900px the sidebar becomes the band under the header: every page, wrapped onto
   as many lines as the width needs and never scrolled sideways (a scrolled row hid
   Account and Help past the edge with nothing to say they were there, per E), and
   Sign out at the end of the last line. The nav keeps its landmark; display:contents
   only lets its links wrap in the same row as Sign out. */
@media (max-width:900px) {
  .account-shell { display:block; min-height:0; }
  .account-side {
    position:static; height:auto; overflow:visible;
    display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px;
    padding:8px clamp(12px, 3vw, 20px); border:0; border-bottom:1px solid var(--rule); background:var(--white);
  }
  .side-shop, .side-foot span { display:none; }
  .account-side .account-nav { display:contents; }
  .account-side .account-nav a { flex:0 0 auto; padding:9px 12px; font-size:14.5px; }
  .account-side .account-nav a:hover { background:var(--ground); }
  .side-foot { flex:0 0 auto; margin:0 0 0 auto; padding:9px 12px; white-space:nowrap; }
}
@media (max-width:420px) {
  .account-side { gap:2px; padding:8px 10px; }
  .account-side .account-nav a { padding:8px 9px; font-size:14px; }
  .side-foot { padding:8px 9px; }
}
@media (max-width:760px) {
  .account-main { padding:26px 18px 56px; }
  .account-app-page .account { padding:0; }
  .account-app-page .banner { margin:0 0 18px; }
}
@media print {
  .account-side, .receipt-page .account-hero { display:none !important; }
  .account-shell { display:block; }
  .account-main { padding:0; }
}

/* The preview waiting for approval, on the account home (approve.js). */
.approve-panel .approve-one + .approve-one { margin-top:28px; padding-top:24px; border-top:1px solid var(--rule); }
.approve-panel .panel-actions { margin-top:14px; }
.approve-lines { margin-top:20px; }
.approve-lines h3 { font-size:15px; font-weight:600; }
.approve-lines ul { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.approve-where { display:block; font-size:13px; color:var(--muted); }
.approve-lines q { display:block; margin-top:2px; font-size:16px; line-height:1.5; }
.approve-form { margin-top:22px; display:grid; gap:14px; }
.approve-form label { display:block; font-size:14px; font-weight:600; }
.approve-form input[type="text"] { display:block; margin-top:6px; width:100%; max-width:360px; padding:13px 14px; border:1.5px solid #b9bfd2; border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font:inherit; }
.approve-form input:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.approve-agree { display:flex; gap:10px; align-items:flex-start; }
.approve-agree input { margin-top:4px; flex:0 0 auto; }
.approve-agree label { font-weight:400; font-size:14.5px; line-height:1.5; }
.approve-form .form-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.approve-form .form-row .action, .approve-form .form-row .form-msg { margin:0; }

/* Balance due, on the account home: the total to pay now, a countdown to when it is
   due (red once it is late), and three small figures under it. The same small figures
   sit under each line of Your plan. */
.balance { margin-top:14px; }
.balance-amount { font-size:2.6rem; font-weight:700; letter-spacing:-.05em; line-height:1; }
.balance-when { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:10px; color:var(--muted); font-size:15px; }
.balance-when b { color:var(--ink); font-size:16px; font-weight:700; }
.balance.late .balance-amount, .balance.late .balance-when b { color:#a7192f; }
.mini-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }
.mini-stat { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mini-stat-label { color:var(--muted); font-size:13px; }
.mini-stat-value { font-size:17px; font-weight:700; letter-spacing:-.02em; overflow-wrap:anywhere; }
.mini-stat-sub { color:var(--muted); font-size:13px; line-height:1.35; }
.meter { display:block; height:6px; margin:5px 0 3px; border-radius:3px; background:var(--tint); overflow:hidden; }
.meter > span { display:block; height:100%; border-radius:3px; background:var(--blue); }

/* Your plan: the website, then monthly care, each with its price on the right. */
.plan-line { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:4px 18px; padding:16px 0 18px; border-top:1px solid var(--rule); }
.care-site > .plan-line:first-child, .care-site > .site-name + .plan-line { border-top:0; padding-top:12px; }
.plan-line-name { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.plan-line-price { font-size:20px; font-weight:700; letter-spacing:-.03em; white-space:nowrap; text-align:right; }
.plan-line-price small { margin-left:5px; color:var(--muted); font-size:13px; font-weight:500; letter-spacing:0; }
.plan-line-note { grid-column:1 / -1; color:var(--muted); font-size:15px; line-height:1.5; }
.plan-line .mini-stats { grid-column:1 / -1; margin-top:10px; }
@media (max-width:400px) {
  .mini-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* On the account home the bills sit in the narrow column: Pay and the card choice go
   on one line under the bill, not squeezed beside it. The first bill gets a rule
   under the balance. */
.balance ~ .money-list:first-of-type li:first-child { border-top:1px solid var(--rule); padding-top:14px; margin-top:4px; }
.money-list .pay-choice { grid-column:1 / -1; justify-self:start; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:4px; }
.glance-item.late .glance-value, .glance-item.late .glance-sub { color:#a7192f; }
.kpi.late .kpi-value, .kpi.late .kpi-split { color:#a7192f; }
#money-msg:focus { outline:none; }
/* Billing's lead figure sizes to its own column, not the window: beside the account's
   side menu a total with cents ("$2,229.50") ran into the Balance due figure. */
.kpis-billing .kpi-hero { container-type:inline-size; }
.kpis-billing .kpi-hero .kpi-value { font-size:clamp(2rem, 17cqi, 3.8rem); }
/* The same small figures at the top of Your requests and Latest messages, with a rule
   between them and the list under them. */
.panel-stats { margin-top:14px; padding-top:0; border-top:0; }
.panel-stats + .request-list, .panel-stats + .inbox-list { margin-top:16px; }
.overview .panel-stats + .request-list li:first-child, .panel-stats + .inbox-list li:first-child { border-top:1px solid var(--rule); padding-top:14px; }

/* Billing: the "Make a payment" panel (billing.js payNow) */
.paynow-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.paynow-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); }
.paynow-row:last-child { border-bottom: 0; }
.int-dialog.plan-chooser.pay-here { width:min(980px, calc(100vw - 32px)); }   /* Stripe lays its form out in two columns once it has about 800px */

.page-note:empty { display: none; }

/* The language picker floats over the page's bottom-left corner; on a phone it sits at the page's end instead (account-09). */
@media (max-width:760px) { .nav-lang { position:static; width:max-content; margin:16px; } }