/* =================================================================
   PAGE: For AI Agents — machine-readable build contract
   ================================================================= */

/* ---- Brief hero callout ---- */
.ai-brief{
  position:relative;overflow:hidden;
  background:var(--grad-primary);color:#fff;
  border-radius:var(--md-shape-xl);
  padding:36px 36px 32px;margin:8px 0 8px;
}
.ai-brief::after{
  content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(0,200,255,.55),transparent 70%);
  filter:blur(8px);pointer-events:none;
}
.ai-brief-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-label-medium);
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);
  padding:6px 12px;border-radius:var(--md-shape-full);margin-bottom:18px;
}
.ai-brief-tag .md-i{width:14px;height:14px}
.ai-brief h2{
  font-family:var(--md-font-brand);font-weight:800;font-size:var(--md-headline-medium);
  letter-spacing:-.01em;margin:0 0 10px;max-width:22ch;color:#fff;
}
.ai-brief p{
  font-size:var(--md-body-large);line-height:1.6;color:rgba(255,255,255,.82);
  max-width:56ch;margin:0 0 24px;
}
.ai-brief-actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
.ai-copybtn{
  --state:#fff;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;
  border-radius:var(--md-shape-full);
  font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-label-large);
  background:#fff;color:var(--atom-deep-blue);
  transition:transform var(--md-dur-short) var(--md-ease-standard);
}
.ai-copybtn:active{transform:scale(.98)}
.ai-copybtn .md-i{width:18px;height:18px}
.ai-copybtn--ghost{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px)}
.ai-copybtn.copied{background:var(--atom-highlight-green);color:var(--atom-deep-blue)}

/* ---- Numbered "how to wire it" steps ---- */
.ai-steps{display:grid;gap:14px;margin:8px 0 0}
.ai-step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-lg);padding:18px 20px;
}
.ai-step-n{
  width:32px;height:32px;flex:0 0 auto;border-radius:var(--md-shape-full);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--md-font-brand);font-weight:800;font-size:15px;
  background:var(--md-primary-container);color:var(--md-on-primary-container);
}
.ai-step-body h3{margin:2px 0 4px;font-family:var(--md-font-brand);font-weight:700;
  font-size:var(--md-title-medium);color:var(--md-on-surface)}
.ai-step-body p{margin:0;font-size:var(--md-body-medium);line-height:1.55;color:var(--md-on-surface-variant)}
.ai-step-body code{font-family:var(--md-font-mono);font-size:12px;
  background:var(--md-surface-container-high);padding:1px 6px;border-radius:var(--md-shape-xs);color:var(--md-on-surface)}

/* ---- Code block with copy ---- */
.ai-codewrap{position:relative}
.ai-codewrap .ai-mini-copy{
  position:absolute;top:12px;right:12px;z-index:2;
  --state:#fff;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--md-shape-sm);
  font-family:var(--md-font-brand);font-weight:600;font-size:12px;
  background:rgba(255,255,255,.1);color:#fff;
}
.ai-codewrap .ai-mini-copy:hover{background:rgba(255,255,255,.18)}
.ai-codewrap .ai-mini-copy .md-i{width:14px;height:14px}
.ai-codewrap .ai-mini-copy.copied{background:var(--atom-highlight-green);color:var(--atom-deep-blue)}

/* ---- Role / token reference table ---- */
.ai-roles{
  border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);overflow:hidden;
}
.ai-role{
  display:grid;grid-template-columns:32px 1.1fr 1.5fr;gap:16px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--md-outline-variant);
}
.ai-role:last-child{border-bottom:none}
.ai-role-sw{width:24px;height:24px;border-radius:var(--md-shape-sm);border:1px solid rgba(0,0,0,.08)}
.ai-role-token{font-family:var(--md-font-mono);font-size:13px;color:var(--md-on-surface);font-weight:500}
.ai-role-use{font-size:var(--md-body-medium);color:var(--md-on-surface-variant);line-height:1.45}

/* ---- Component vocabulary chips ---- */
.ai-vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ai-vocab-item{
  background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-md);padding:14px 16px;
}
.ai-vocab-item .vk{font-family:var(--md-font-mono);font-size:12.5px;color:var(--md-primary);font-weight:600;
  display:block;margin-bottom:4px;word-break:break-word}
.ai-vocab-item .vd{font-size:var(--md-body-small);color:var(--md-on-surface-variant);line-height:1.45}

/* ---- Do / Don't ---- */
.ai-rules{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ai-rulecol{border-radius:var(--md-shape-lg);padding:20px 22px;border:1px solid var(--md-outline-variant)}
.ai-rulecol--do{background:color-mix(in srgb,var(--md-success-container) 40%,var(--md-surface))}
.ai-rulecol--dont{background:color-mix(in srgb,var(--md-error-container) 38%,var(--md-surface))}
.ai-rulecol h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-title-medium)}
.ai-rulecol--do h3{color:var(--md-on-success-container)}
.ai-rulecol--dont h3{color:var(--md-on-error-container)}
.ai-rulecol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ai-rulecol li{display:flex;gap:10px;align-items:flex-start;font-size:var(--md-body-medium);
  line-height:1.5;color:var(--md-on-surface)}
.ai-rulecol li .md-i{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.ai-rulecol--do li .md-i{color:var(--md-success)}
.ai-rulecol--dont li .md-i{color:var(--md-error)}

/* ---- Checklist ---- */
.ai-check{display:grid;gap:10px}
.ai-check-item{display:flex;gap:12px;align-items:center;
  background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-md);padding:14px 16px}
.ai-check-item .md-i{width:20px;height:20px;color:var(--md-primary);flex:0 0 auto}
.ai-check-item span{font-size:var(--md-body-medium);color:var(--md-on-surface);line-height:1.45}
.ai-check-item b{color:var(--md-on-surface);font-weight:600}

@media(max-width:720px){
  .ai-rules{grid-template-columns:1fr}
  .ai-role{grid-template-columns:24px 1fr;gap:12px}
  .ai-role-use{grid-column:1 / -1;padding-left:36px}
}

/* =================================================================
   ACCORDION — expansion panels (default + numbered list)
   Built from the existing ATOM × Material 3 vocabulary: hairline
   dividers (--md-outline-variant), brand type, 220ms standard easing,
   the shared .md-state layer + ripple on every header.
   ================================================================= */
.md-accord{display:flex;flex-direction:column}

.md-accord-item{border-bottom:1px solid var(--md-outline-variant)}

.md-accord-head{
  --state:var(--md-on-surface);
  width:100%;display:flex;align-items:center;gap:16px;
  padding:20px 0;min-height:56px;
  background:none;border:none;text-align:left;cursor:pointer;
  color:var(--md-on-surface);
  font-family:var(--md-font-brand);font-weight:600;font-size:16px;line-height:1.45;
  border-radius:var(--md-shape-xs);
}
.md-accord-head .md-accord-label{flex:1;min-width:0}
.md-accord-head .md-i{
  width:24px;height:24px;flex:0 0 auto;margin-left:auto;
  color:var(--md-on-surface);
  transition:transform var(--md-dur-medium) var(--md-ease-standard);
}
.md-accord-item.is-open > .md-accord-head .md-i{transform:rotate(180deg)}
.md-accord-head[disabled]{cursor:not-allowed;color:color-mix(in srgb,var(--md-on-surface) 38%,transparent)}
.md-accord-head[disabled] .md-i{color:color-mix(in srgb,var(--md-on-surface) 38%,transparent)}

/* number column — the 'numbered list' variant */
.md-accord-num{flex:0 0 auto;min-width:40px;font-weight:600;color:var(--md-on-surface)}

/* panel — animates open on the standard curve */
.md-accord-panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--md-dur-medium) var(--md-ease-standard)}
.md-accord-item.is-open > .md-accord-panel{grid-template-rows:1fr}
.md-accord-panel > .md-accord-clip{overflow:hidden}
.md-accord-body{padding:0 0 24px;font-size:var(--md-body-large);line-height:1.6;
  color:var(--md-on-surface);text-wrap:pretty}
.md-accord-body p{margin:0}

/* nested numbered list inside a panel — 1.1 / (a) / (i) */
.accord-list{display:flex;flex-direction:column;gap:8px}
.accord-list .al-row{display:flex;gap:16px;font-size:var(--md-body-large);line-height:1.6;
  color:var(--md-on-surface)}
.accord-list .al-mark{flex:0 0 auto;min-width:40px;color:var(--md-on-surface)}
.accord-list .al-row--l3{padding-left:48px}
.accord-list p{margin:0;text-wrap:pretty}

/* compact — the mobile specimen */
.md-accord--compact .md-accord-head{padding:14px 0;min-height:48px;font-size:14px;gap:12px}
.md-accord--compact .md-accord-head .md-i{width:20px;height:20px}
.md-accord--compact .md-accord-num{min-width:28px}
.md-accord--compact .md-accord-body{padding-bottom:16px;font-size:var(--md-body-medium)}
.md-accord--compact .accord-list .al-row{font-size:var(--md-body-small);gap:12px}
.md-accord--compact .accord-list .al-mark{min-width:28px;color:var(--md-on-surface-variant)}
.md-accord--compact .accord-list .al-row--l3{padding-left:28px}

.accord-group{max-width:320px;padding:24px 20px}
.accord-group-title{margin:0 0 8px;font-family:var(--md-font-brand);font-weight:600;
  font-size:18px;color:var(--md-on-surface)}

.accord-specimens{display:flex;flex-wrap:wrap;gap:24px}
.accord-caption{margin:0 0 12px;font-size:var(--md-label-medium);
  color:var(--md-on-surface-variant)}

/* =================================================================
   BANNER (promotional) — measured from the ATOM Banner spec sheet.
   Photography-led. Copy sits DARK on the photograph (the sheet uses no
   scrim); the action is a violet --md-tertiary pill. 8px radius.
   ================================================================= */
.md-banner{position:relative;overflow:hidden;border-radius:var(--md-shape-sm);display:flex;
  background:var(--md-surface-container-low);
  /* content colour follows the plate's tone, never set per element */
  --mb-on:var(--md-on-surface);
  --mb-on-variant:var(--md-on-surface-variant);
  --mb-btn-bg:var(--md-tertiary);
  --mb-btn-fg:var(--md-on-tertiary)}
.md-banner--on-dark{--mb-on:#fff;--mb-on-variant:rgba(255,255,255,.88)}
.md-banner--on-light{--mb-on:var(--md-on-surface);--mb-on-variant:var(--md-on-surface-variant)}

.md-banner .mb-media{position:absolute;inset:0;z-index:0;min-width:0;
  background:var(--md-surface-container-high)}
.md-banner .mb-media image-slot{display:block;width:100%;height:100%}

.md-banner .mb-text{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;color:var(--mb-on)}
.md-banner .mb-title{margin:0;font-family:var(--md-font-brand);font-weight:800;
  font-size:36px;line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.md-banner .mb-body{margin:16px 0 0;color:var(--mb-on-variant);font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.md-banner .md-btn{margin-top:19px;height:26px;padding:0 18px;font-size:11px;font-weight:700;
  letter-spacing:.01em;background:var(--mb-btn-bg);color:var(--mb-btn-fg);--state:var(--mb-btn-fg)}
.md-banner .md-btn:hover{box-shadow:var(--md-elev-1)}

/* ---- overlay: copy laid on the photograph ------------------------- */
.md-banner--overlay{align-items:center;padding:0 60px}
/* dark copy needs the plate to stay pale where it lands — a soft directional
   wash, well below the sheet's scrim-free look, guarantees it */
.md-banner--overlay.md-banner--on-light::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.34) 42%,transparent 72%)}
.md-banner--overlay.md-banner--on-light.is-right::after{background:linear-gradient(270deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.34) 42%,transparent 72%)}
.md-banner--overlay.md-banner--on-light.is-center::after{background:rgba(255,255,255,.46)}
.md-banner--sm.md-banner--on-light::after{background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 58%,transparent 100%)}
.md-banner--overlay::before{content:"";flex:0 0 0;width:0;padding-top:37.9%}
.md-banner--overlay .mb-text{width:40%}
.md-banner--overlay.is-right{justify-content:flex-end}
.md-banner--overlay.is-right .mb-text{align-items:flex-end;text-align:right}
.md-banner--overlay.is-center{justify-content:center}
.md-banner--overlay.is-center .mb-text{align-items:center;text-align:center;width:52%}

/* ---- split: photograph beside a tonal text panel ------------------ */
.md-banner--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;border-radius:0;background:var(--md-surface-container-low)}
.md-banner--split .mb-media{position:relative;inset:auto;min-height:240px}
.md-banner--split .mb-text{padding:40px;justify-content:center;width:auto}
.md-banner--split .mb-title{font-size:30px}
.md-banner--split .mb-body{font-size:12px}
.md-banner--split .md-btn{padding:0 14px;font-size:10px}
.md-banner--split.is-media-right .mb-media{order:2}

/* ---- stacked: photograph above, centred panel below --------------- */
.md-banner--stacked{flex-direction:column;background:var(--md-surface-container-low)}
.md-banner--stacked .mb-media{position:relative;inset:auto;flex:0 0 auto;aspect-ratio:1.22/1}
.md-banner--stacked .mb-text{padding:16px 14px 18px;width:auto;align-items:center;text-align:center}
.md-banner--stacked .mb-title{font-size:16px;line-height:1.25}
.md-banner--stacked .mb-body{margin-top:8px;font-size:9px;-webkit-line-clamp:3}
.md-banner--stacked .md-btn{margin-top:12px;height:17px;padding:0 12px;font-size:8px}

/* ---- small / portrait: centred copy at the top of the photograph --- */
.md-banner--sm.md-banner--overlay{align-items:flex-start;justify-content:center;padding:11px 14px}
.md-banner--sm.md-banner--overlay::before{display:none}
.md-banner--sm .mb-text{width:100%;align-items:center;text-align:center}
.md-banner--sm .mb-title{font-size:19px;line-height:1.22}
.md-banner--sm .mb-body{margin-top:10px;font-size:9px}
.md-banner--sm .md-btn{margin-top:12px;height:17px;padding:0 12px;font-size:8px}

/* ---- media only, no copy ----------------------------------------- */
.md-banner--media{aspect-ratio:2.64/1}

/* =================================================================
   Specimen scaffolding for this page only
   ================================================================= */
.mb-caption{margin:0 0 10px;font-size:var(--md-label-medium);color:var(--md-on-surface-variant)}
.mb-stack{display:flex;flex-direction:column;gap:28px}
.mb-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.mb-portrait{width:158px;height:279px}
.mb-portrait .md-banner{height:100%}
.mb-portrait--stack{width:158px}

/* redline row: annotation left, specimen right, as laid out on the sheet */
.mb-sheet{container-type:inline-size}
.mb-red{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:start}
.mb-red + .mb-red{margin-top:28px;padding-top:28px;border-top:1px solid var(--md-outline-variant)}
.mb-red-h{margin:0 0 10px;font-family:var(--md-font-brand);font-weight:600;font-size:13px;
  color:var(--md-on-surface)}
.mb-spec{font-size:10.5px;line-height:1.65;color:var(--md-on-surface-variant)}
.mb-spec-lead{margin:0 0 4px;font-weight:600;color:var(--md-on-surface)}
.mb-spec ol{margin:0;padding-left:14px;list-style:decimal}
.mb-spec ol ol{padding-left:13px;list-style:lower-alpha;margin:2px 0 4px}
.mb-spec li{margin:0}
.mb-red-size{margin:0 0 8px;font-family:var(--md-font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--md-on-surface-variant)}

/* 12-column grid guide over the desktop specimens */
.mb-guide{position:relative;outline:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent)}
.mb-guide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--atom-cyan) 16%,transparent) 0 calc(100%/24),
    transparent calc(100%/24) calc(100%/12))}

/* ---- app slider, shown in a phone -------------------------------- */
.mb-phone{width:320px;border-radius:26px 26px 30px 30px;overflow:hidden;
  background:var(--atom-deep-blue);box-shadow:var(--md-elev-3);position:relative}
.mb-phone-status{position:absolute;top:0;left:0;right:0;z-index:4;height:46px;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;color:#fff;
  font-family:var(--md-font-brand);font-weight:600;font-size:14px;pointer-events:none}
.mb-phone-status .mb-status-icons{display:flex;align-items:center;gap:6px}
.mb-phone-status .md-i{width:16px;height:16px}
.mb-phone-back{position:absolute;top:60px;left:20px;z-index:4;color:#fff;display:flex}
.mb-phone-back .md-i{width:24px;height:24px}
.mb-phone-sheet{height:28px;margin-top:-16px;position:relative;z-index:3;
  border-radius:18px 18px 0 0;background:var(--md-surface)}

.mb-slider{position:relative;overflow:hidden}
.mb-track{display:flex;transition:transform var(--md-dur-long) var(--md-ease-standard)}
.mb-slide{flex:0 0 100%;min-width:0}
.mb-slide .md-banner{border-radius:0;height:430px}
.mb-dots{position:absolute;left:0;right:0;bottom:26px;z-index:4;display:flex;
  justify-content:center;align-items:center;gap:7px}
.mb-dot{width:7px;height:7px;padding:0;border:none;cursor:pointer;
  border-radius:var(--md-shape-full);background:rgba(255,255,255,.55);
  transition:width var(--md-dur-medium) var(--md-ease-standard),background var(--md-dur-medium) var(--md-ease-standard)}
.mb-dot.is-on{width:26px;background:#fff}

@container (max-width:820px){
  .mb-red{grid-template-columns:1fr;gap:14px}
  .md-banner--overlay:not(.md-banner--sm){padding:0 32px}
  .md-banner--overlay:not(.md-banner--sm) .mb-text{width:46%}
  .md-banner--overlay:not(.md-banner--sm) .mb-title{font-size:24px}
  .md-banner--overlay:not(.md-banner--sm) .mb-body{font-size:11px;margin-top:10px}
  .md-banner--overlay:not(.md-banner--sm) .md-btn{margin-top:12px}
  .md-banner--split .mb-title{font-size:20px}
  .md-banner--split .mb-body{font-size:11px}
  .md-banner--split .mb-text{padding:22px}
  .md-banner--split .mb-media{min-height:200px}
}
@container (max-width:440px){
  .md-banner--overlay:not(.md-banner--sm){padding:20px}
  .md-banner--overlay:not(.md-banner--sm) .mb-text,
  .md-banner--overlay.is-center:not(.md-banner--sm) .mb-text{width:100%}
  .md-banner--split{grid-template-columns:minmax(0,1fr)}
  .md-banner--split.is-media-right .mb-media{order:0}
}

/* =================================================================
   CAMPAIGN BANNERS — the XL-to-L artwork column from the sheet.
   Sampled: pale field #F7EBEA · red band #EE1A3A
   gradient #D41E43 → #D91D70 · yellow button #E2FB1C
   ================================================================= */
.cb{--cb-field:#F7EBEA; --cb-red:#EE1A3A; --cb-grad-a:#D41E43; --cb-grad-b:#D91D70;
  --cb-violet:#4D29E8; --cb-yellow:#E2FB1C}
.cb-stack{display:flex;flex-direction:column;gap:26px}
.cb-size{margin:0 0 8px;font-family:var(--md-font-brand);font-weight:600;font-size:10px;
  letter-spacing:.06em;color:var(--md-on-surface-variant)}

.cb-frame{position:relative;overflow:hidden;border-radius:var(--md-shape-sm);
  background:var(--cb-field);aspect-ratio:2.55/1;display:flex;align-items:center}
/* the 12-column guide the sheet lays over every campaign render */
.cb-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,235,238,.55) 0 calc(100%/24),
    transparent calc(100%/24) calc(100%/12))}

.cb-text{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;gap:9px;width:42%;padding:0 0 0 40px}
.cb-text h4{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:20px;
  line-height:1.22;color:#231F20;text-wrap:pretty}
.cb-text p{margin:0;font-size:8.5px;line-height:1.55;color:#4A4245;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cb-btn{height:20px;padding:0 13px;border:none;cursor:pointer;
  border-radius:var(--md-shape-full);background:var(--cb-violet);color:#fff;--state:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:8px}
.cb-btn--yellow{background:var(--cb-yellow);color:#231F20;--state:#231F20}

/* artwork side: photo plate plus the red campaign wedge */
.cb-art{position:absolute;z-index:1;top:0;bottom:0;width:56%;overflow:hidden}
.cb-art--right{right:0;clip-path:polygon(38% 0,100% 0,100% 100%,8% 100%)}
.cb-art--left{left:0;clip-path:polygon(0 0,62% 0,92% 100%,0 100%)}
/* the centre row's flanking columns are narrower — a shallower cut reads better */
.cb-frame--center .cb-art--right{clip-path:polygon(26% 0,100% 0,100% 100%,4% 100%)}
.cb-frame--center .cb-art--left{clip-path:polygon(0 0,74% 0,96% 100%,0 100%)}
/* the gradient row keeps its curved cut, no diagonal */
.cb-frame--grad .cb-art--left{clip-path:none}
.cb-frame--word .cb-art{clip-path:none}
/* the artwork paints above the wedge inside .cb-art (a transformed element
   still sits at z-index:auto, so the mirrored column needs this too) */
.cb-art image-slot{display:block;position:relative;z-index:2;width:100%;height:100%}
.cb-wedge{position:absolute;z-index:0;inset:0;background:var(--cb-red)}

/* QR block */
.cb-qr{width:34px;height:34px;flex:0 0 auto;background:
  repeating-conic-gradient(#231F20 0 25%, #fff 0 50%) 0 0/7px 7px;
  border:2px solid #fff;border-radius:2px}

/* row 2: gradient field, artwork in a curved cut on the left */
.cb-frame--grad{background:linear-gradient(100deg,var(--cb-grad-a),var(--cb-grad-b));
  justify-content:flex-end}
.cb-frame--grad .cb-text{align-items:flex-start;padding:0 40px 0 0;width:38%}
.cb-frame--grad .cb-text h4{color:#fff}
.cb-frame--grad .cb-text p{color:rgba(255,255,255,.9)}
.cb-frame--grad .cb-art{width:44%;border-radius:0 46% 46% 0/0 40% 40% 0}

/* row 3: text centred between two artwork columns */
.cb-frame--center{justify-content:center}
.cb-frame--center .cb-text{align-items:center;text-align:center;width:40%;padding:0}
.cb-frame--center .cb-art{width:30%}
.cb-art--mirror image-slot{transform:scaleX(-1)}

/* row 4: no text — the outline wordmark over the photo */
.cb-frame--word{align-items:stretch}
.cb-word{position:absolute;z-index:3;right:5%;top:50%;transform:translateY(-50%);
  text-align:right;font-family:var(--md-font-logotype),var(--md-font-brand);
  line-height:.92;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.92)}
.cb-word b{display:block;font-size:15px;-webkit-text-stroke-width:1px}
.cb-word span{display:block;font-size:52px;letter-spacing:.01em}
.cb-word i{display:block;font-style:normal;font-size:11px;letter-spacing:.34em;
  -webkit-text-stroke-width:1px}
.cb-frame--word .cb-art{width:100%;left:0}
.cb-frame--word .cb-wedge{clip-path:polygon(46% 100%,100% 34%,100% 100%);
  background:linear-gradient(120deg,var(--cb-red),var(--cb-grad-b));opacity:.92;z-index:1}

@container (max-width:560px){
  .cb-text{width:52%;padding-left:20px}
  .cb-text h4{font-size:15px}
  .cb-frame--grad .cb-text{padding-right:20px}
}


/* =================================================================
   BANNER & VIDEO — the sizes board, the Video-app and Video-Web
   inventories, and the app-only slider banner.
   ================================================================= */
.bv{--bv-panel:#3B3B3B; --bv-label:#8B6FE8; --bv-marker:#FF2FB0}
.bv-sheet{container-type:inline-size}

/* ---- board ------------------------------------------------------- */
.bv-board{display:flex;align-items:flex-start;gap:16px;padding:18px;
  background:var(--bv-panel);overflow-x:auto}
.bv-card{flex:0 0 auto;position:relative;border-radius:10px;overflow:hidden;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.bv-card img{display:block;width:100%;height:100%;object-fit:cover}
.bv-card-img{position:relative;overflow:hidden}
.bv-card-txt{padding:12px 13px 15px}
.bv-card-txt h5{margin:0 0 7px;font-family:var(--md-font-plain);font-weight:700;
  color:#2B2B2B;line-height:1.25}
.bv-card-txt p{margin:0;font-family:var(--md-font-plain);color:#4A4A4A;line-height:1.5}
.bv-marker{position:absolute;left:50%;bottom:0;width:11px;height:11px;
  transform:translate(-50%,50%);border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px var(--bv-marker);z-index:2}
.bv-marker--tick{width:5px;height:5px;background:var(--bv-marker);box-shadow:none}
/* the six graduated sizes */
.bv-c1{width:400px}.bv-c1 .bv-card-img{height:212px}
.bv-c1 .bv-card-txt h5{font-size:15px}.bv-c1 .bv-card-txt p{font-size:13px}
.bv-c2{width:158px}.bv-c2 .bv-card-img{height:152px}
.bv-c2 .bv-card-txt h5{font-size:13px}.bv-c2 .bv-card-txt p{font-size:12px}
.bv-c3{width:142px}.bv-c3 .bv-card-img{height:186px}
.bv-c3 .bv-card-txt h5{font-size:12px}.bv-c3 .bv-card-txt p{font-size:11px}
.bv-c4{width:110px}.bv-c4 .bv-card-img{height:120px}
.bv-c4 .bv-card-txt h5{font-size:11px}.bv-c4 .bv-card-txt p{font-size:10.5px}
.bv-c5{width:126px}.bv-c5 .bv-card-img{height:164px}
.bv-c5 .bv-card-txt h5{font-size:11px}.bv-c5 .bv-card-txt p{font-size:10.5px}
.bv-c6{width:86px}.bv-c6 .bv-card-img{height:96px}
.bv-c6 .bv-card-txt h5{font-size:10px}.bv-c6 .bv-card-txt p{font-size:9.5px}
.bv-c4,.bv-c6{align-self:flex-start;margin-top:24px}

/* ---- video inventories ------------------------------------------ */
.bv-vpanel{padding:20px 18px 24px;background:var(--bv-panel)}
.bv-vlabel{display:flex;align-items:center;gap:8px;margin:0 0 16px;
  font-family:var(--md-font-plain);font-size:15px;color:var(--bv-label)}
.bv-vlabel svg{width:13px;height:13px}
.bv-vlabel + .bv-vrow{margin-bottom:26px}
.bv-vrow{display:flex;align-items:flex-start;gap:14px;padding:14px;
  border:1px dashed rgba(190,168,255,.55);overflow-x:auto}
.bv-vrow--plain{border:none;padding:0}
.bv-thumb{flex:0 0 auto;position:relative;border-radius:4px;overflow:hidden}
.bv-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.bv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.28);color:#fff}
.bv-play svg{width:60%;height:60%}
.bv-cap{position:absolute;left:6px;bottom:5px;font-family:var(--md-font-plain);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.bv-more{position:absolute;right:6px;top:5px;font-family:var(--md-font-plain);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.bv-t1{width:130px;height:74px}
.bv-t2{width:122px;height:70px}
.bv-t3{width:106px;height:60px}
.bv-t4{width:70px;height:40px}
.bv-t5{width:58px;height:34px}
.bv-t1 .bv-play,.bv-t2 .bv-play,.bv-t3 .bv-play{width:20px;height:20px}
.bv-t4 .bv-play,.bv-t5 .bv-play{width:13px;height:13px}
.bv-t1 .bv-cap,.bv-t2 .bv-cap,.bv-t3 .bv-cap{font-size:6px}
.bv-t4 .bv-cap,.bv-t5 .bv-cap{font-size:4.5px;left:4px}
.bv-t1 .bv-more,.bv-t2 .bv-more,.bv-t3 .bv-more{font-size:5.5px}
.bv-t4 .bv-more,.bv-t5 .bv-more{font-size:4.5px;right:4px}
/* web row — larger 16:9 frames */
.bv-w{flex:0 0 auto;position:relative;width:280px;height:158px;border-radius:2px;
  overflow:hidden}
.bv-w img{display:block;width:100%;height:100%;object-fit:cover}
.bv-w .bv-play{width:26px;height:26px}
.bv-w .bv-cap{left:9px;bottom:8px;font-size:8px}
.bv-w .bv-more{right:9px;top:8px;font-size:8px}

/* ---- app-only slider banner ------------------------------------- */
.bv-slider-wrap{display:flex;flex-direction:column;gap:14px;max-width:340px}
.bv-phone{position:relative;border:1px dashed #B39DFF;background:#0E1418;
  overflow:hidden}
.bv-status{display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px 4px;font-family:var(--md-font-plain);font-weight:600;
  font-size:13px;color:#fff}
.bv-status-r{display:flex;align-items:center;gap:5px}
.bv-status-r svg{width:14px;height:14px}
.bv-back{position:absolute;left:14px;top:44px;z-index:2;display:grid;place-items:center;
  width:26px;height:26px;color:#fff}
.bv-back svg{width:20px;height:20px}
.bv-hero{position:relative;height:250px}
.bv-hero img{display:block;width:100%;height:100%;object-fit:cover}
.bv-pager{position:absolute;left:20px;bottom:14px;display:flex;align-items:center;gap:6px}
.bv-pager i{display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.95)}
.bv-pager i.is-on{width:18px;border-radius:3px;background:rgba(255,255,255,.55)}
.bv-phone-sheet{height:26px;margin:0 0 -10px;border-radius:14px 14px 0 0;background:#fff}
.bv-slider-cap{margin:0;font-family:var(--md-font-plain);font-weight:700;font-size:15px;
  line-height:1.35;color:var(--md-on-surface)}

@container (max-width:720px){
  .bv-w{width:200px;height:113px}
}

/* =================================================================
   CARD COMPONENT — additional families beyond the M3 card:
   Big image card · Content card · Thumbnail card.
   All three sit on .md-card containers and reuse ATOM tokens:
   12px radius, --md-elev-1, brand type, existing .md-btn pills.
   ================================================================= */

/* shared: tag / ribbon badge --------------------------------------- */
.xc-tag{position:absolute;z-index:3;top:0;left:0;display:inline-flex;align-items:center;
  height:20px;padding:0 10px;border-radius:0 0 var(--md-shape-sm) 0;
  background:var(--atom-deep-blue);color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:10px;letter-spacing:.02em}
.xc-tag--ribbon{background:var(--atom-sweet-pink)}

/* shared: photo plate (an image-slot fills it) --------------------- */
.xc-media{position:relative;overflow:hidden;background:var(--atom-deep-blue);
  color:rgba(255,255,255,.78)}
.xc-media image-slot{display:block;width:100%;height:100%}
.xc-media image-slot:not([data-filled]){opacity:1}
/* where a caption or badge sits on the plate, the placeholder text would
   collide with it — keep only the plate tone underneath */
.xc-media--quiet image-slot:not([data-filled]){opacity:0}
.xc-media--quiet::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.12),transparent 62%)}

/* shared: text tiers ---------------------------------------------- */
.xc-title{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:13px;
  line-height:1.3;color:var(--md-on-surface)}
.xc-sub{display:flex;align-items:center;gap:5px;font-size:10px;
  color:var(--md-on-surface-variant)}
.xc-sub::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--md-outline)}
.xc-body{margin:0;font-size:10.5px;line-height:1.5;color:var(--md-on-surface-variant)}
.xc-link{font-family:var(--md-font-brand);font-weight:600;font-size:11px;
  color:var(--md-primary);text-decoration:underline;text-underline-offset:2px}

/* shared: small pill buttons used across all three families -------- */
.xc-btn{flex:0 0 auto;height:26px;padding:0 14px;font-size:10.5px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap}
.xc-btn--outline{background:none;border:1px solid var(--md-tertiary);color:var(--md-tertiary);
  --state:var(--md-tertiary)}
.xc-btn--violet{background:var(--md-tertiary);color:var(--md-on-tertiary);--state:var(--md-on-tertiary)}
.xc-btn--cyan{background:var(--atom-game-blue);color:#fff;border:none;--state:#fff}
.xc-btn--cyan:hover{box-shadow:var(--md-elev-1)}
.xc-btn--block{width:100%}

/* shared: discount price ------------------------------------------ */
.xc-disc{display:flex;flex-direction:column;gap:2px;min-width:0}
.xc-disc-k{font-family:var(--md-font-brand);font-weight:700;font-size:9.5px;
  color:var(--atom-sweet-pink)}
.xc-price{display:flex;align-items:baseline;gap:5px;font-family:var(--md-font-brand)}
.xc-was{font-weight:600;font-size:10px;color:var(--md-on-surface-variant);
  text-decoration:line-through}
.xc-now{font-weight:800;font-size:12px;color:var(--md-on-surface)}
.xc-rate{font-family:var(--md-font-brand);font-weight:600;font-size:10px;
  color:var(--md-on-surface)}

/* specimen scaffolding -------------------------------------------- */
.xc-cols{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.xc-col{display:flex;flex-direction:column;gap:var(--sp-4)}
.xc-bp{margin:0 0 2px;font-family:var(--md-font-brand);font-weight:600;font-size:11px;
  color:var(--md-on-surface-variant)}
.xc-w-mobile{width:158px}
.xc-w-desktop{width:196px}
.xc-w-tn{width:215px}

/* =================================================================
   1 · BIG IMAGE CARD — photo on top, text and one action below
   ================================================================= */
.bi-card{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column}
.bi-card .xc-media{flex:0 0 auto}
.bi-card .bi-body{padding:9px 10px 10px;display:flex;flex-direction:column;
  align-items:flex-start;gap:0}
.bi-card .xc-title{font-size:11.5px;font-weight:700}
.bi-card .xc-sub{margin-top:4px;font-size:8.5px}
.bi-card .xc-sub::before{width:7px;height:7px}
.bi-card .bi-body .xc-body{margin-top:8px;font-size:9.5px;line-height:1.5}
/* the button hugs its label — it is not full width on the sheet */
.bi-card .bi-body .md-btn{margin-top:12px;height:19px;padding:0 16px;font-size:9px;font-weight:700}
/* tag sits on the photo, bottom-left, as drawn on the sheet */
.bi-card .xc-tag{top:auto;bottom:0;height:15px;padding:0 8px;font-size:9px;
  border-radius:0 var(--md-shape-sm) 0 0}
.bi-card .bi-over{text-shadow:0 1px 6px rgba(7,9,82,.55)}
/* caption laid over the photo */
.bi-card .bi-over{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;font-family:var(--md-font-brand);font-weight:700;font-size:13px;color:#fff}

/* =================================================================
   2 · CONTENT CARD — no photo. Eyebrow, title, body or bullets,
       then a price/label row with one action.
   ================================================================= */
.ct-card{padding:10px;display:flex;flex-direction:column;gap:0}
.ct-eyebrow{font-family:var(--md-font-brand);font-weight:700;font-size:7.5px;
  letter-spacing:.02em;color:var(--atom-sweet-pink)}
.ct-card .ct-h{margin:12px 0 0;font-family:var(--md-font-brand);font-weight:800;font-size:15px;
  line-height:1;color:var(--md-on-surface)}
.ct-card .ct-sub{margin:10px 0 0;font-family:var(--md-font-brand);font-weight:600;font-size:9px;
  color:var(--md-on-surface)}
.ct-card .xc-link{margin-top:10px}
.ct-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ct-list li{display:flex;gap:10px;font-size:9px;line-height:1.4;
  color:var(--md-on-surface-variant)}
.ct-list li::before{content:"•";flex:0 0 auto;color:var(--md-on-surface-variant)}
.ct-list--check li::before{content:"✳";font-size:9px;line-height:1.6}
.ct-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 10px;margin-top:8px;padding-top:11px;
  border-top:1px solid var(--md-outline-variant)}
.ct-card .xc-btn{height:22px;padding:0 14px;font-size:8.5px;font-weight:700}
/* at mobile width the price block is stacked so price and pill share one row */
.ct-card.xc-w-mobile .xc-price{flex-direction:column;gap:0;align-items:flex-start}
.ct-card.xc-w-mobile .xc-now{font-size:11.5px}
.ct-card.xc-w-mobile .xc-btn{padding:0 10px}
.ct-card .xc-disc-k{font-size:7.5px}
.ct-card .xc-was{font-size:8.5px}
.ct-card .xc-now{font-size:13px}
.ct-card .xc-rate{font-size:9px}

/* featured plan card — the outlined "Recommended" specimen --------- */
.plan-card{width:212px;padding:0;overflow:hidden;
  border:1.5px solid var(--md-tertiary);background:var(--md-surface)}
.plan-card .pc-top{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.plan-card .pc-k{font-family:var(--md-font-brand);font-weight:600;font-size:9px;
  color:var(--md-on-surface-variant)}
.plan-card .pc-hero{display:flex;align-items:center;gap:8px}
.plan-card .pc-hero b{font-family:var(--md-font-brand);font-weight:800;font-size:26px;
  line-height:1;color:var(--md-on-surface)}
.plan-card .pc-5g{display:inline-flex;align-items:center;height:18px;padding:0 8px;
  border-radius:var(--md-shape-full);background:var(--md-primary);color:var(--md-on-primary);
  font-family:var(--md-font-brand);font-weight:700;font-size:9.5px}
.plan-card .pc-note{font-size:9.5px;color:var(--md-on-surface-variant)}
.plan-card .pc-cols{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--md-outline-variant)}
.plan-card .pc-cols > div{padding:9px 14px}
.plan-card .pc-cols > div + div{border-left:1px solid var(--md-outline-variant)}
.plan-card .pc-cols b{display:block;font-family:var(--md-font-brand);font-weight:800;
  font-size:14px;color:var(--md-on-surface)}
.plan-card .pc-cols b span{font-weight:600;font-size:9px}
.plan-card .pc-benefits{padding:10px 14px 14px;background:var(--md-surface-container-high)}
.plan-card .pc-benefits .pc-k{margin-bottom:5px;display:block}

/* =================================================================
   3 · THUMBNAIL CARD — measured from the reference close-up.
   Card 215×auto, 12px radius, Pure White, --md-elev-1.
   ================================================================= */
.tn-card{position:relative;overflow:hidden;background:var(--md-surface);
  padding:12px 12px 10px;display:flex;flex-direction:column;gap:0}

/* tag badge: flush in the top-left corner, following the card's own corner */
.tn-card > .xc-tag{top:0;left:0;height:16px;padding:0 10px;font-size:9px;
  border-radius:var(--md-shape-md) 0 var(--md-shape-sm) 0}
.tn-card--tagged{padding-top:25px}

/* ribbon: pink text inside the padding, no fill */
.tn-ribbon{font-family:var(--md-font-brand);font-weight:700;font-size:9px;
  color:var(--atom-sweet-pink);margin-bottom:9px}

.tn-head{display:flex;align-items:center;gap:10px}
.tn-card .xc-media{width:46px;height:46px;flex:0 0 auto;border-radius:10px}
.tn-card .xc-media image-slot{border-radius:10px}
.tn-card .tn-heads{display:flex;flex-direction:column;gap:4px;min-width:0}
.tn-card .xc-title{font-size:11px;font-weight:600}
.tn-card .xc-sub{font-size:8.5px}
.tn-card .xc-sub::before{width:0;border:0}

.tn-card .xc-body{margin-top:13px;font-size:9.5px;line-height:1.4}

/* footer: the rule shows only where the reference draws one */
.tn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 10px;margin-top:12px}
.tn-foot--rule{margin-top:11px;padding-top:12px;border-top:1px solid var(--md-outline-variant)}
.tn-foot--block{justify-content:flex-start}
.tn-card .xc-btn{height:25px;padding:0 20px;font-size:9px;font-weight:700}
.tn-card .xc-rate{font-size:9.5px;font-weight:600}
.tn-card .xc-disc-k{font-size:8.5px}
.tn-card .xc-was{font-size:9px}
.tn-card .xc-now{font-size:10.5px}

/* =================================================================
   CAROUSEL — measured from the ATOM Carousel spec sheet.
   A slide track, dot indicators and circular chevron arrows.
   Slides are photographs, or the existing Banner component.
   Radius 8px (--md-shape-sm), arrows and dots on neutral tints
   derived from --md-on-surface.
   ================================================================= */
.md-carousel{position:relative;display:flex;flex-direction:column;align-items:center}

.mc-viewport{position:relative;width:100%;overflow:hidden;border-radius:var(--md-shape-sm)}
.mc-track{display:flex;transition:transform var(--md-dur-long) var(--md-ease-standard)}
.mc-slide{flex:0 0 100%;min-width:0;position:relative}
.mc-slide > image-slot{display:block;width:100%;height:100%}
.mc-slide .md-banner{border-radius:0;height:100%}

/* photo slide plate — an image-slot fills it */
.mc-plate{position:relative;overflow:hidden;background:var(--md-surface-container-high)}
.mc-plate image-slot{display:block;width:100%;height:100%}

/* ---- arrows: circular, light neutral fill, dark chevron ---------- */
.mc-arrow{position:absolute;z-index:3;display:grid;place-items:center;
  width:34px;height:34px;padding:0;border:none;cursor:pointer;
  border-radius:var(--md-shape-full);
  background:color-mix(in srgb,var(--md-on-surface) 12%,var(--md-surface));
  color:var(--md-on-surface);--state:var(--md-on-surface);
  transition:background var(--md-dur-short) var(--md-ease-standard)}
.mc-arrow .md-i{width:18px;height:18px}
.mc-arrow:hover{background:color-mix(in srgb,var(--md-on-surface) 20%,var(--md-surface))}
.mc-arrow:disabled{cursor:not-allowed;
  color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  background:color-mix(in srgb,var(--md-on-surface) 8%,var(--md-surface))}

/* corner pair — bottom-right inside the plate */
.mc-arrows--corner{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;gap:7px}
.mc-arrows--corner .mc-arrow{position:static}

/* edge pair — vertically centred, inset from each side */
.mc-arrow--prev{left:20px;top:50%;transform:translateY(-50%)}
.mc-arrow--next{right:20px;top:50%;transform:translateY(-50%)}

/* ---- dots: active is a pill, inactive are 5px dots -------------- */
.mc-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px}
.mc-dot{width:5px;height:5px;padding:0;border:none;cursor:pointer;
  border-radius:var(--md-shape-full);
  background:color-mix(in srgb,var(--md-on-surface) 12%,var(--md-surface));
  transition:width var(--md-dur-medium) var(--md-ease-standard),
             background var(--md-dur-medium) var(--md-ease-standard)}
.mc-dot.is-on{width:19px;height:6px;
  background:color-mix(in srgb,var(--md-on-surface) 45%,var(--md-surface))}
/* over dark photography the dots invert */
.mc-dots--inverse .mc-dot{background:rgba(255,255,255,.5)}
.mc-dots--inverse .mc-dot.is-on{background:#fff}

/* =================================================================
   Specimen scaffolding for this page only
   ================================================================= */
.mc-sheet{container-type:inline-size}
.mc-row{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.mc-cap{margin:0 0 10px;font-size:var(--md-label-medium);color:var(--md-on-surface-variant)}
.mc-w-sm{width:245px}
.mc-w-md{width:277px}
.mc-w-lg{width:515px}
.mc-w-portrait{width:275px}

/* 12-column grid guide, as drawn over the wide specimen */
.mc-guide .mc-viewport{outline:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent)}
.mc-guide .mc-viewport::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--atom-cyan) 16%,transparent) 0 calc(100%/24),
    transparent calc(100%/24) calc(100%/12))}

/* components panel — the dashed spec boxes from the sheet */
.mc-comp{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.mc-comp-k{margin:0 0 12px;font-family:var(--md-font-brand);font-weight:700;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--md-on-surface-variant)}
.mc-comp-box{padding:14px;border:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent);
  border-radius:var(--md-shape-xs)}
.mc-comp-box--stack{display:flex;flex-direction:column;gap:11px}
.mc-comp-box .mc-arrow{position:static}
.mc-states{display:grid;grid-template-columns:repeat(2,auto);gap:14px 34px}
.mc-states .mc-dots{margin:0}

@container (max-width:820px){
  .mc-row{gap:20px}
  .mc-w-lg{width:100%}
  .mc-arrow--prev{left:12px}
  .mc-arrow--next{right:12px}
}
@container (max-width:440px){
  .mc-w-sm,.mc-w-md,.mc-w-portrait{width:100%}
  .mc-arrow{width:28px;height:28px}
  .mc-arrow .md-i{width:15px;height:15px}
}

/* =================================================================
   DRAWER (bottom sheet) — measured from the ATOM Drawer spec sheet.
   A surface that rises from the bottom edge over a scrim, with a grab
   handle, 16px top corners and 16px side padding. Four content
   patterns: illustration, icon + copy, list, media.
   Reuses --md-scrim, --md-surface, brand type, existing .md-btn.
   ================================================================= */
.md-drawer{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;
  /* sampled from the spec sheet */
  --dw-surface:#F8F8F8;
  --dw-accent:#4D29E8;
  --dw-on-accent:#E2FB1C;
  --dw-handle:#C8C8CF;
  background:var(--dw-surface);
  border-radius:var(--md-shape-lg) var(--md-shape-lg) 0 0;
  box-shadow:var(--md-elev-3);
  transform:translateY(0);
  transition:transform var(--md-dur-long) var(--md-ease-emphasized)}
.md-drawer[hidden]{display:none}
.md-drawer.is-closed{transform:translateY(100%)}

/* grab handle — centred, 8px clear above it */
.md-drawer-handle{flex:0 0 auto;width:36px;height:4px;margin:8px auto 0;
  border-radius:var(--md-shape-full);background:var(--dw-handle)}

.md-drawer-body{padding:16px 16px 20px;display:flex;flex-direction:column}

/* ---- type tiers ------------------------------------------------- */
.md-drawer .dw-title{margin:0;font-family:var(--md-font-brand);font-weight:600;
  font-size:15px;line-height:1.35;color:var(--md-on-surface)}
.md-drawer .dw-body{margin:0;font-size:12.5px;line-height:1.5;
  color:var(--md-on-surface);text-wrap:pretty}
.md-drawer .dw-body + .dw-body{margin-top:14px}
.md-drawer .dw-link{color:var(--dw-accent);text-decoration:underline;
  text-underline-offset:2px;font-weight:600}

/* ---- actions: a full-width pill, then an underlined text link ---- */
.md-drawer-actions{align-self:stretch;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:20px}
.md-drawer-actions .md-btn{width:100%;height:33px;border-radius:var(--md-shape-full);
  font-size:11.5px;font-weight:700;letter-spacing:.01em}
.md-drawer-actions .md-btn--drawer{background:var(--dw-accent);color:var(--dw-on-accent);
  border:none;--state:var(--dw-on-accent)}
.md-drawer-actions .md-btn--drawer:hover{box-shadow:var(--md-elev-1)}
/* the sheet shows no outlined variant; a secondary action reads as the link below */
.md-drawer-actions .md-btn--drawer[disabled]{
  background:color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  --state:transparent;box-shadow:none;cursor:not-allowed}
.md-drawer-actions .dw-dismiss{background:none;border:none;cursor:pointer;padding:2px 4px;
  font-family:var(--md-font-brand);font-weight:600;font-size:11.5px;
  color:var(--dw-accent);text-decoration:underline;text-underline-offset:2px}

/* ---- 1 · illustration: centred art over centred copy ------------ */
.dw-art{width:100%;aspect-ratio:16/9;margin-bottom:16px;background:#fff;
  border-radius:var(--md-shape-sm);overflow:hidden;
  background:#EDEDF2;color:var(--md-on-surface-variant)}
.dw-art image-slot{display:block;width:100%;height:100%}
.md-drawer--center .md-drawer-body{align-items:center;text-align:center}

/* ---- 2 · icon row ---------------------------------------------- */
.dw-icons{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  color:var(--md-on-surface)}
.dw-icons .md-i{width:30px;height:30px;stroke-width:1.5}
.dw-icons-rule{width:1px;height:26px;background:var(--md-outline-variant)}
.md-drawer .dw-title + .dw-body{margin-top:10px}

/* ---- 3 · list: circular plate beside a title and body ----------- */
.dw-list{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.dw-row{display:flex;align-items:center;gap:14px}
.dw-plate{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  border-radius:var(--md-shape-full);overflow:hidden}
.dw-plate img{width:60%;height:auto;display:block}
.dw-plate--tile{border-radius:var(--md-shape-md);background:#EDEDF2}
.dw-plate--green{background:#F0FF60}
.dw-rowtext{min-width:0;display:flex;flex-direction:column;gap:3px}
.dw-rowtext b{font-family:var(--md-font-brand);font-weight:700;font-size:11.5px;
  color:var(--md-on-surface)}
.dw-rowtext span{font-size:11.5px;line-height:1.4;color:var(--md-on-surface)}

/* ---- 4 · media: photograph above an optional header ------------- */
.dw-media{width:100%;aspect-ratio:16/9;margin-bottom:16px;overflow:hidden;
  border-radius:var(--md-shape-sm);background:#EDEDF2}
.dw-media image-slot{display:block;width:100%;height:100%}
.md-drawer .dw-header{margin:0 0 10px;font-family:var(--md-font-brand);font-weight:700;
  font-size:15px;line-height:1.3;color:var(--md-on-surface);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* =================================================================
   Specimen scaffolding for this page only — the phone the drawer
   sits in, and the dimmed screen behind it.
   ================================================================= */
.dw-sheet{container-type:inline-size}
.dw-row-specimens{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.dw-cap{margin:0 0 10px;font-size:var(--md-label-medium);color:var(--md-on-surface-variant)}

.dw-phone{position:relative;width:314px;height:665px;overflow:hidden;
  border-radius:var(--md-shape-lg);background:#59595B;
  box-shadow:var(--md-elev-2)}
/* the underlying app screen is out of scope on the sheet — it is shown dimmed */
.dw-phone-scrim{position:absolute;inset:0;z-index:2;background:#3B3B3C;
  opacity:0;transition:opacity var(--md-dur-medium) var(--md-ease-standard)}
.dw-phone.is-open .dw-phone-scrim{opacity:1}
.dw-home{position:absolute;left:50%;bottom:9px;z-index:4;transform:translateX(-50%);
  width:120px;height:4px;border-radius:var(--md-shape-full);background:#111}

.dw-toggle{margin-top:12px}

@container (max-width:700px){
  .dw-row-specimens{gap:20px}
}
@container (max-width:380px){
  .dw-phone{width:100%;height:600px}
}

/* =================================================================
   FORM — additional form components beyond the standard M3 set.
   Colours sampled from the ATOM Form spec sheet:
     resting border #ADE8F7 · active/selected #00AAFF · radio #4D29E8
     link #2449FB · error #FF4D6D · selected row #E4FAFE · panel #F2F2F2
   ================================================================= */
.fm{
  --fm-border:#ADE8F7;
  --fm-active:#00AAFF;
  --fm-radio:#4D29E8;
  --fm-link:#2449FB;
  --fm-error:#FF4D6D;
  --fm-row-sel:#E4FAFE;
  --fm-surface:#FFFFFF;
  --fm-panel:#F2F2F2;
  --fm-label:#6F6F6F}

/* ---- shared shell: label inside the box ------------------------- */
.fm-field{position:relative;display:flex;flex-direction:column;width:100%}
.fm-box{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;
  background:var(--fm-surface);border:1px solid var(--fm-border);
  border-radius:var(--md-shape-sm);cursor:pointer;
  transition:border-color var(--md-dur-short) var(--md-ease-standard)}
.fm-box:hover{border-color:var(--fm-active)}
.fm-field.is-open > .fm-box,
.fm-box:focus-within{border-color:var(--fm-active);outline:none}
.fm-field.is-error > .fm-box{border-color:var(--fm-error)}
.fm-field.is-disabled > .fm-box{cursor:not-allowed;
  border-color:color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  background:color-mix(in srgb,var(--md-on-surface) 4%,var(--fm-surface))}

.fm-stack{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fm-lab{font-family:var(--md-font-brand);font-weight:400;font-size:11px;line-height:1.2;
  color:var(--fm-label)}
.fm-val{font-family:var(--md-font-brand);font-weight:500;font-size:14px;line-height:1.3;
  color:var(--md-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-val--ph{color:var(--fm-label);font-weight:400}
.fm-chev{flex:0 0 auto;width:18px;height:18px;color:var(--md-on-surface);
  transition:transform var(--md-dur-medium) var(--md-ease-standard)}
.fm-field.is-open .fm-chev{transform:rotate(180deg)}
.fm-flag{flex:0 0 auto;width:20px;height:14px;border-radius:2px;overflow:hidden;
  display:grid;place-items:center;background:#EF3340}
.fm-flag span{width:5px;height:5px;border-radius:50%;background:#fff}
.fm-suffix{flex:0 0 auto;font-family:var(--md-font-brand);font-weight:500;font-size:13px;
  color:var(--md-on-surface)}
.fm-caret{display:inline-block;width:1px;height:15px;background:var(--md-on-surface);
  animation:fm-blink 1s steps(1) infinite;vertical-align:-2px}
@keyframes fm-blink{50%{opacity:0}}

.fm-help{margin:5px 2px 0;font-size:11px;line-height:1.4;color:var(--fm-label)}
.fm-help--error{color:var(--fm-error)}
.fm-req{color:var(--fm-error)}
.fm-outer-lab{margin:0 0 6px;font-family:var(--md-font-brand);font-weight:500;font-size:11px;
  color:var(--md-on-surface)}

/* ---- dropdown menu panel --------------------------------------- */
.fm-menu{margin-top:6px;background:var(--fm-surface);border:1px solid var(--fm-border);
  border-radius:var(--md-shape-sm);overflow:hidden}
.fm-menu-head{padding:10px 12px 6px;font-family:var(--md-font-brand);font-weight:600;
  font-size:11px;color:var(--fm-label)}
.fm-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--md-font-brand);font-weight:400;font-size:12.5px;
  color:var(--md-on-surface);--state:var(--md-on-surface)}
.fm-opt.is-sel{background:var(--fm-row-sel)}
.fm-opt-grow{flex:1;min-width:0}
.fm-opt-price{flex:0 0 auto;font-weight:500;font-size:12px;color:var(--md-on-surface)}
.fm-opt--wrap{align-items:flex-start}
.fm-opt--wrap .fm-opt-grow{white-space:normal;line-height:1.35}

/* ---- quantity input -------------------------------------------- */
.fm-qty{display:flex;align-items:center;justify-content:space-between;gap:14px}
.fm-qty-lab{font-family:var(--md-font-brand);font-weight:500;font-size:12px;
  color:var(--md-on-surface)}
.fm-qty-ctl{display:flex;align-items:center;gap:10px}
.fm-step{width:20px;height:20px;padding:0;border:none;cursor:pointer;display:grid;
  place-items:center;border-radius:var(--md-shape-full);
  background:var(--fm-active);color:#fff;--state:#fff;
  transition:background var(--md-dur-short) var(--md-ease-standard)}
.fm-step .md-i{width:13px;height:13px;stroke-width:3}
.fm-step:disabled{cursor:not-allowed;background:#D3D3D8;color:#fff}
.fm-qty-val{min-width:20px;text-align:center;font-family:var(--md-font-brand);
  font-weight:500;font-size:12px;color:var(--md-on-surface)}

/* ---- radio ----------------------------------------------------- */
.fm-radio-row{display:flex;align-items:center;gap:34px}
.fm-radio-item{display:flex;align-items:center;gap:12px;cursor:pointer}
.fm-radio{appearance:none;width:26px;height:26px;flex:0 0 auto;cursor:pointer;
  border-radius:50%;border:2px solid #C9C9D0;background:var(--fm-surface);
  position:relative;transition:border-color var(--md-dur-short) var(--md-ease-standard)}
.fm-radio:checked{border-color:var(--fm-radio);border-width:3px}
.fm-radio:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--fm-radio)}
.fm-radio:disabled{cursor:not-allowed;border-color:#E2E2E6}
.fm-radio-lab{font-family:var(--md-font-brand);font-weight:600;font-size:16px;
  color:var(--md-on-surface)}

/* ---- checkbox -------------------------------------------------- */
.fm-check-row{display:flex;align-items:center;gap:9px;cursor:pointer}
.fm-check{appearance:none;width:15px;height:15px;flex:0 0 auto;cursor:pointer;
  border-radius:3px;border:1.5px solid #C9C9D0;background:var(--fm-surface);
  position:relative;transition:all var(--md-dur-short) var(--md-ease-standard)}
.fm-check:checked{background:var(--fm-active);border-color:var(--fm-active)}
.fm-check:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.fm-check:indeterminate{background:var(--fm-active);border-color:var(--fm-active)}
.fm-check:indeterminate::after{content:"";position:absolute;left:2.5px;top:6px;width:8px;
  height:1.5px;background:#fff}
.fm-check:disabled{cursor:not-allowed;background:#D3D3D8;border-color:#D3D3D8}
.fm-check:disabled:checked::after{border-color:#fff}
.fm-check-lab{font-family:var(--md-font-brand);font-weight:400;font-size:11.5px;
  color:var(--md-on-surface)}
.fm-check-grid{display:grid;grid-template-columns:repeat(7,20px);gap:12px 14px;
  padding:14px;border:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent);
  border-radius:var(--md-shape-xs);width:max-content}

/* ---- file input ------------------------------------------------ */
.fm-file{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:132px;padding:16px;background:var(--fm-surface);
  border:1px solid var(--fm-border);border-radius:var(--md-shape-sm)}
.fm-file-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  cursor:pointer;padding:2px;font-family:var(--md-font-brand);font-weight:600;
  font-size:12px;color:var(--fm-link);text-decoration:underline;text-underline-offset:2px}
.fm-file-btn .md-i{width:15px;height:15px}
.fm-file-note{font-size:10.5px;color:var(--fm-label)}

/* ---- upload / drag and drop ------------------------------------ */
.fm-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:110px;padding:18px;text-align:center;background:var(--fm-surface);
  border:1px solid var(--fm-border);border-radius:var(--md-shape-sm);cursor:pointer;
  transition:border-color var(--md-dur-short) var(--md-ease-standard),
             background var(--md-dur-short) var(--md-ease-standard)}
.fm-drop:hover,.fm-drop.is-over{border-color:var(--fm-active);background:var(--fm-row-sel)}
.fm-drop .md-i{width:26px;height:26px;color:var(--md-on-surface);stroke-width:1.5}
.fm-drop-t{font-family:var(--md-font-brand);font-weight:600;font-size:11.5px;
  color:var(--md-on-surface)}
.fm-drop-h{font-size:10px;line-height:1.45;color:var(--fm-label);max-width:34ch}

.fm-files{display:flex;flex-direction:column;gap:8px}
.fm-filerow{display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:var(--fm-surface);border:1px solid var(--fm-border);
  border-radius:var(--md-shape-xs)}
.fm-filerow .md-i{width:13px;height:13px;flex:0 0 auto;color:var(--md-on-surface)}
.fm-filerow span{flex:1;min-width:0;font-size:11px;color:var(--md-on-surface);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-filerow button{background:none;border:none;cursor:pointer;padding:0;display:flex;
  color:var(--md-on-surface)}
.fm-filerow--error{border-color:var(--fm-error)}
.fm-filerow--error span,.fm-filerow--error .md-i{color:var(--fm-error)}

/* ---- text area ------------------------------------------------- */
.fm-ta{width:100%;min-height:150px;padding:10px 12px;resize:vertical;
  background:var(--fm-surface);border:1px solid var(--fm-border);
  border-radius:var(--md-shape-sm);outline:none;
  font-family:var(--md-font-plain);font-size:11.5px;line-height:1.5;
  color:var(--md-on-surface);
  transition:border-color var(--md-dur-short) var(--md-ease-standard)}
.fm-ta:hover{border-color:var(--fm-active)}
.fm-ta:focus{border-color:var(--fm-active)}
.fm-count{margin-top:5px;text-align:right;font-size:10px;color:var(--fm-label)}

/* ---- pin / OTP input ------------------------------------------- */
.fm-pin{display:flex;gap:8px;width:max-content}
.fm-pin input{width:44px;height:64px;text-align:center;padding:0;
  background:var(--fm-surface);border:1px solid var(--fm-border);
  border-radius:var(--md-shape-sm);outline:none;
  font-family:var(--md-font-brand);font-weight:500;font-size:15px;
  color:var(--md-on-surface);
  transition:border-color var(--md-dur-short) var(--md-ease-standard)}
.fm-pin--desktop input{width:50px;height:72px;font-size:17px}
.fm-pin input:focus,
.fm-pin input[data-autofocus]{border-color:var(--fm-active);border-width:1.5px}
.fm-pin.is-error input{border-color:var(--fm-error)}
.fm-pin.is-loading input{border-color:var(--fm-border)}
.fm-pin-wrap{display:inline-flex;flex-direction:column;gap:6px;align-items:flex-start}
/* the spinner fills the cell it belongs to, not the row */
.fm-pin-cell{position:relative;display:inline-flex}
.fm-pin-spin{position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;
  width:18px;height:18px;border-radius:50%;border:2px solid #D3D3D8;
  border-top-color:var(--md-on-surface);animation:fm-spin .9s linear infinite}
@keyframes fm-spin{to{transform:rotate(360deg)}}

/* =================================================================
   Specimen scaffolding for this page only
   ================================================================= */
.fm-sheet{container-type:inline-size}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;
  align-items:start}
.fm-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.fm-cap{margin:0 0 10px;font-size:var(--md-label-medium);color:var(--md-on-surface-variant)}
.fm-sub{margin:0 0 12px;font-family:var(--md-font-brand);font-weight:700;font-size:13px;
  color:var(--md-on-surface)}
.fm-spec-box{padding:16px;border:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent);
  border-radius:var(--md-shape-xs)}
.fm-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px}
.fm-w-field{max-width:230px}

@container (max-width:560px){
  .fm-two{grid-template-columns:minmax(0,1fr)}
  .fm-radio-row{gap:20px}
  .fm-check-grid{grid-template-columns:repeat(4,20px)}
}

/* =================================================================
   ICONS — additional icon families beyond the line set: payment
   marks, country flags (circular and rectangular) and the system
   keyboard references, plus the size and state specimens.
   ================================================================= */
.ic-sheet{container-type:inline-size}
.ic-cap{margin:0 0 10px;font-size:var(--md-label-medium);color:var(--md-on-surface-variant)}
.ic-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--md-on-surface-variant)}

/* ---- size ladder ----------------------------------------------- */
.ic-sizes{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end}
.ic-size{display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--md-on-surface)}
.ic-size span{font-family:var(--md-font-mono);font-size:10px;letter-spacing:.04em;
  color:var(--md-on-surface-variant)}

/* ---- state row -------------------------------------------------- */
.ic-states{display:flex;flex-wrap:wrap;gap:18px}
.ic-state{display:flex;flex-direction:column;align-items:center;gap:8px}
.ic-state > span{font-size:10.5px;color:var(--md-on-surface-variant)}
.ic-btn{width:40px;height:40px;display:grid;place-items:center;padding:0;border:none;
  cursor:pointer;border-radius:var(--md-shape-full);background:transparent;
  color:var(--md-on-surface);--state:var(--md-on-surface)}
.ic-btn.is-hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}
.ic-btn.is-press{background:color-mix(in srgb,var(--md-on-surface) 12%,transparent)}
.ic-btn.is-sel{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.ic-btn:disabled{cursor:not-allowed;
  color:color-mix(in srgb,var(--md-on-surface) 38%,transparent)}

/* ---- asset tiles: payment marks and flags ---------------------- */
.ic-pay-grid{display:grid;grid-template-columns:repeat(auto-fill,38px);gap:8px}
.ic-pay{width:38px;height:24px;border-radius:var(--md-shape-xs);overflow:hidden;
  background:var(--md-surface-container-high);
  border:1px solid var(--md-outline-variant)}
.ic-pay image-slot{display:block;width:100%;height:100%}

.ic-flag-grid{display:grid;grid-template-columns:repeat(auto-fill,26px);gap:9px}
.ic-flag-grid--rect{grid-template-columns:repeat(auto-fill,26px)}
.ic-flag{width:26px;height:26px;overflow:hidden;border-radius:var(--md-shape-full);
  background:var(--md-surface-container-high)}
.ic-flag--rect{width:26px;height:18px;border-radius:2px}
.ic-flag image-slot{display:block;width:100%;height:100%}
/* shape-only tiles — no widget, no listeners */
.ic-flag--empty{background:var(--md-surface-container-high);
  border:1px solid var(--md-outline-variant)}
.ic-pay--empty{display:grid;place-items:center;padding:0 2px;
  font-family:var(--md-font-brand);font-weight:600;font-size:6.5px;letter-spacing:.02em;
  color:var(--md-on-surface-variant);text-align:center;line-height:1.1;overflow:hidden}

/* ---- system keyboard references -------------------------------- */
.ic-kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.ic-kb{--kb-bg:#D1D3D9;--kb-key:#FFFFFF;--kb-mod:#ABB0BA;--kb-fg:#000;--kb-panel:#F7F7F9;
  border-radius:var(--md-shape-sm);overflow:hidden;background:var(--kb-panel);
  border:1px solid var(--md-outline-variant)}
.ic-kb--dark{--kb-bg:#2C2C2E;--kb-key:#6C6C70;--kb-mod:#4A4A4E;--kb-fg:#fff;--kb-panel:#1C1C1E}
.ic-kb-pad{background:var(--kb-bg);padding:7px 4px 5px;
  display:flex;flex-direction:column;gap:5px}
.ic-kb-row{display:flex;justify-content:center;gap:4px}
.ic-key{flex:1;min-width:0;height:26px;display:grid;place-items:center;
  border-radius:4px;background:var(--kb-key);color:var(--kb-fg);
  font-family:var(--md-font-plain);font-size:11px;line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.18)}
.ic-key--mod{background:var(--kb-mod);flex:0 0 30px}
.ic-key--wide{flex:0 0 78px;font-size:9.5px}
.ic-key--sp{flex:0 0 26px;background:transparent;box-shadow:none}
.ic-kb-foot{display:flex;align-items:center;justify-content:space-between;
  padding:5px 10px 7px;background:var(--kb-bg);color:var(--kb-fg);font-size:10px}
.ic-kb-home{width:74px;height:3px;margin:0 auto;border-radius:var(--md-shape-full);
  background:var(--kb-fg);opacity:.85}

/* numeric pad */
.ic-kb-num{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:9px;
  background:var(--kb-panel)}
.ic-numkey{height:32px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border-radius:5px;background:var(--kb-key);color:var(--kb-fg);
  font-family:var(--md-font-plain);font-size:14px;line-height:1;
  border:1px solid color-mix(in srgb,var(--kb-fg) 10%,transparent)}
.ic-numkey small{font-size:6px;letter-spacing:.1em;opacity:.65;margin-top:2px}
.ic-numkey--blank{background:transparent;border-color:transparent}

/* voice / waveform */
.ic-kb-wave{height:96px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;background:var(--kb-wave,#99A0AA)}
.ic-kb--dark .ic-kb-wave{--kb-wave:#2F3137}
.ic-wave{display:flex;align-items:center;gap:2px;height:34px}
.ic-wave i{display:block;width:2px;border-radius:var(--md-shape-full);
  background:var(--kb-fg);opacity:.9}
.ic-kb-wavefoot{display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;color:var(--kb-fg);font-size:10px;background:var(--kb-wave,#99A0AA)}

/* emoji picker */
.ic-kb-emoji{padding:8px;background:var(--kb-panel)}
.ic-kb-search{display:flex;align-items:center;gap:6px;height:24px;padding:0 8px;
  border-radius:var(--md-shape-full);background:var(--kb-key);color:var(--kb-fg);
  font-size:10px;margin-bottom:8px;opacity:.9}
.ic-kb-search .md-i{width:11px;height:11px}
.ic-kb-grouplab{font-family:var(--md-font-brand);font-weight:600;font-size:7.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kb-fg);opacity:.6;
  margin-bottom:6px}
.ic-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;font-size:15px;
  line-height:1.15;text-align:center}

@container (max-width:520px){
  .ic-kb-grid{grid-template-columns:minmax(0,1fr)}
  .ic-sizes{gap:18px}
}

.ic-intro{margin:-6px 0 26px;font-family:var(--md-font-plain);font-size:15px;
  line-height:1.5;color:var(--md-on-surface);max-width:62ch}

/* the sheet frames both asset panels with a dashed boundary and groups the
   flags into regional blocks separated by clear space */
.ic-pay-grid,.ic-flag-panel{padding:12px;border:1px dashed #B6B6C2}
.ic-flag-group + .ic-flag-group{margin-top:16px}
.ic-flag-group .ic-flag-grid + .ic-flag-grid{margin-top:4px}

/* real flag glyphs — the regional-indicator pair, clipped to the tile */
.ic-flag--glyph{display:grid;place-items:center;overflow:hidden;background:none}
.ic-flag--glyph i{font-style:normal;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.ic-flag--glyph:not(.ic-flag--rect) i{font-size:39px}
.ic-flag--rect.ic-flag--glyph i{font-size:27px}
/* the two live drop targets sit below the panel, sized so their label reads */
.ic-flag-drops{display:flex;align-items:center;gap:20px;margin-top:14px}
.ic-flag-drop{display:flex;align-items:center;gap:10px;font-family:var(--md-font-plain);
  font-size:11px;color:var(--md-on-surface-variant)}
.ic-flag-drop .ic-flag{width:64px;height:64px}
.ic-flag-drop .ic-flag--rect{width:86px;height:60px;border-radius:var(--md-shape-xs)}

/* =================================================================
   TAG · TEXT LINK · TOGGLE · TOAST
   Colours sampled from the ATOM Tag, Text Link, Toggle & Toast sheet.
   ================================================================= */
.tg{
  --tg-navy:#080953;      --tg-navy-soft:#F4F4FC;
  --tg-green:#06CC45;     --tg-green-soft:#F3FDE6;  --tg-green-txt:#17D050;
  --tg-grey:#B5B5B5;      --tg-grey-soft:#F4F4FC;   --tg-grey-txt:#8F8F92;
  --tg-error:#FF4E6D;     --tg-error-soft:#FFEDF0;  --tg-error-txt:#FF5A79;
  --tg-lock:#FF6B6B;      --tg-lock-soft:#FFF1F1;
  --tg-toast:#262626;     --tg-toast-link:#B0E5FE;
  --tg-ok:#00D06A;        --tg-bad:#FF718A;
  --tg-blue:#00AAFF;      --tg-blue-soft:#7FD4FF}

/* ---- Tag: pill, solid or soft ----------------------------------- */
.tg-tag{display:inline-flex;align-items:center;height:22px;padding:0 11px;
  border-radius:var(--md-shape-full);
  font-family:var(--md-font-brand);font-weight:600;font-size:11px;line-height:1;
  white-space:nowrap}
.tg-tag--solid{color:#fff}
.tg-tag--progress.tg-tag--solid{background:var(--tg-navy)}
.tg-tag--success.tg-tag--solid{background:var(--tg-green)}
.tg-tag--inactive.tg-tag--solid{background:var(--tg-grey)}
.tg-tag--error.tg-tag--solid{background:var(--tg-error)}
.tg-tag--lock.tg-tag--solid{background:var(--tg-lock)}
.tg-tag--progress.tg-tag--soft{background:var(--tg-navy-soft);color:var(--tg-navy)}
.tg-tag--success.tg-tag--soft{background:var(--tg-green-soft);color:var(--tg-green-txt)}
.tg-tag--inactive.tg-tag--soft{background:var(--tg-grey-soft);color:var(--tg-grey-txt)}
.tg-tag--error.tg-tag--soft{background:var(--tg-error-soft);color:var(--tg-error-txt)}
.tg-tag--lock.tg-tag--soft{background:var(--tg-lock-soft);color:var(--tg-lock)}

/* ---- Tag: dot and label, no pill -------------------------------- */
.tg-dot{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--md-font-brand);font-weight:600;font-size:11px;line-height:1}
.tg-dot::before{content:"";width:4px;height:4px;flex:0 0 auto;border-radius:50%;
  background:currentColor}
.tg-dot--progress{color:var(--tg-navy)}
.tg-dot--success{color:var(--tg-green-txt)}
.tg-dot--inactive{color:var(--tg-grey-txt)}
.tg-dot--error{color:var(--tg-error-txt)}
.tg-dot--lock{color:var(--tg-lock)}
/* neutral label, coloured dot only */
.tg-dot--neutral{color:var(--md-on-surface)}
.tg-dot--neutral::before{background:var(--tg-dot-c,var(--md-on-surface))}

/* ---- Text link -------------------------------------------------- */
.tg-link{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  padding:0;cursor:pointer;font-family:var(--md-font-brand);font-weight:700;
  font-size:11.5px;line-height:1.2;color:var(--tg-navy)}
.tg-link span{text-decoration:underline;text-underline-offset:2px}
.tg-link .md-i{width:12px;height:12px;flex:0 0 auto}
.tg-link-ring{width:12px;height:12px;flex:0 0 auto;border-radius:50%;
  border:1.5px dashed currentColor}
.tg-link--loading .tg-link-ring{border-style:solid;border-top-color:transparent;
  animation:tg-spin .9s linear infinite}
@keyframes tg-spin{to{transform:rotate(360deg)}}
.tg-link:disabled{cursor:not-allowed;
  color:color-mix(in srgb,var(--tg-navy) 38%,transparent)}

/* ---- Toggle ----------------------------------------------------- */
.tg-toggle{appearance:none;width:30px;height:16px;flex:0 0 auto;cursor:pointer;
  border-radius:var(--md-shape-full);background:#E3E3E8;border:none;position:relative;
  transition:background var(--md-dur-short) var(--md-ease-standard)}
.tg-toggle::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.24);
  transition:transform var(--md-dur-short) var(--md-ease-standard)}
.tg-toggle:checked{background:var(--tg-blue)}
.tg-toggle:checked::after{transform:translateX(14px)}
.tg-toggle:hover{background:#D6D6DD}
.tg-toggle:checked:hover{background:color-mix(in srgb,var(--tg-blue) 88%,#000)}
.tg-toggle:disabled{cursor:not-allowed;background:#EAEAEF}
.tg-toggle:disabled:checked{background:var(--tg-blue-soft)}

/* ---- Toast ------------------------------------------------------ */
.tg-toast{display:flex;align-items:center;gap:12px;min-height:44px;padding:12px 16px;
  border-radius:var(--md-shape-sm);background:var(--tg-toast);color:#fff;
  font-family:var(--md-font-plain);font-size:12.5px;line-height:1.4}
.tg-toast-msg{flex:1;min-width:0}
.tg-toast-ico{width:16px;height:16px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--tg-ok);color:var(--tg-toast)}
.tg-toast-ico .md-i{width:11px;height:11px;stroke-width:3}
.tg-toast-ico--bad{background:var(--tg-bad)}
.tg-toast-link{flex:0 0 auto;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--md-font-brand);font-weight:700;font-size:12px;
  color:var(--tg-toast-link);text-decoration:underline;text-underline-offset:2px}
.tg-toast-icons{display:inline-flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--md-shape-sm);background:var(--tg-toast)}

/* ---- Toast, tooltip form: caret on any edge --------------------- */
.tg-tip{position:relative;width:78px;padding:9px 10px;border-radius:var(--md-shape-sm);
  background:var(--tg-toast);color:#fff;text-align:center;
  font-family:var(--md-font-plain);font-size:10px;line-height:1.5}
.tg-tip::after{content:"";position:absolute;width:9px;height:9px;
  background:var(--tg-toast);transform:rotate(45deg)}
.tg-tip--tl::after{top:-4px;left:9px}
.tg-tip--tc::after{top:-4px;left:50%;margin-left:-4.5px}
.tg-tip--tr::after{top:-4px;right:9px}
.tg-tip--bl::after{bottom:-4px;left:9px}
.tg-tip--bc::after{bottom:-4px;left:50%;margin-left:-4.5px}
.tg-tip--br::after{bottom:-4px;right:9px}
.tg-tip--lt::after{left:-4px;top:9px}
.tg-tip--lc::after{left:-4px;top:50%;margin-top:-4.5px}
.tg-tip--lb::after{left:-4px;bottom:9px}
.tg-tip--rt::after{right:-4px;top:9px}
.tg-tip--rc::after{right:-4px;top:50%;margin-top:-4.5px}
.tg-tip--rb::after{right:-4px;bottom:9px}

/* =================================================================
   Specimen scaffolding for this page only
   ================================================================= */
.tg-sheet{container-type:inline-size}
.tg-cap{margin:0 0 10px;font-size:var(--md-label-medium);color:var(--md-on-surface-variant)}
.tg-box{padding:18px;border:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent);
  border-radius:var(--md-shape-xs);width:max-content}
.tg-tag-grid{display:grid;grid-template-columns:auto auto;gap:14px 34px;
  justify-items:start;align-items:center}
.tg-link-grid{display:grid;grid-template-columns:auto auto;gap:14px 34px;
  justify-items:start}
.tg-toggle-col{display:flex;flex-direction:column;gap:14px}
/* narrow column beside a full-width one, as the sheet contrasts them */
.tg-toast-grid{display:grid;grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);
  gap:18px 34px;align-items:start}
.tg-tip-grid{display:grid;grid-template-columns:repeat(4,auto);gap:22px 28px;
  justify-items:start;width:max-content}
.tg-row{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}

@container (max-width:560px){
  .tg-toast-grid{grid-template-columns:minmax(0,1fr)}
  .tg-tip-grid{grid-template-columns:repeat(2,auto)}
  .tg-row{gap:20px}
}

/* =================================================================
   GRAPH — the dashboard graph cards from the ATOM Graph sheet.
   Sampled: title #070952 · axis #ADBACD · card #FFF · band #F2F2F2
   Customer Satisfaction #0081DB / #07E098
   Visitor Insights #A700FF / #EF4444 / #3BD856
   Total Revenue #0096FF / #06E096
   ================================================================= */
.gp{
  --gp-title:#070952; --gp-axis:#ADBACD; --gp-band:#F2F2F2;
  --gp-cs-a:#0081DB;  --gp-cs-b:#07E098;
  --gp-vi-a:#A700FF;  --gp-vi-b:#EF4444; --gp-vi-c:#3BD856;
  --gp-rv-a:#0096FF;  --gp-rv-b:#06E096}

.gp-sheet{container-type:inline-size}
.gp-band{background:var(--gp-band);border-radius:var(--md-shape-sm);padding:18px}
.gp-grid{display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1fr) minmax(0,1fr);
  gap:18px;align-items:stretch}

.gp-card{display:flex;flex-direction:column;background:#fff;
  border-radius:var(--md-shape-md);padding:20px 22px 16px;box-shadow:var(--md-elev-1)}
.gp-card h3{margin:0 0 14px;font-family:var(--md-font-brand);font-weight:700;font-size:16px;
  line-height:1.2;color:var(--gp-title)}
.gp-plot{position:relative;flex:1;min-height:150px}
.gp-plot svg{display:block;width:100%;height:100%;overflow:visible}

/* axes and gridlines */
/* axis labels live in HTML so they stay px-stable inside a scaled viewBox */
.gp-vi{position:relative;padding:0 0 20px 30px}
.gp-vi .gp-plot{min-height:130px}
.gp-vi-y{position:absolute;left:0;top:0;bottom:20px;width:24px;display:flex;
  flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-family:var(--md-font-plain);font-size:9px;line-height:1;color:var(--gp-axis)}
.gp-vi-x{display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--md-font-plain);font-size:9px;color:var(--gp-axis)}
.gp-vi-x span{flex:1;min-width:0;text-align:center}
.gp-gridline{stroke:#EDEFF4;stroke-width:1}
.gp-axisline{stroke:#E4E7EF;stroke-width:1}

/* line / area series */
.gp-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.gp-node{stroke:#fff;stroke-width:2}
.gp-marker{stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke}
.gp-vi .gp-plot{overflow:visible}
.gp-vline{stroke:var(--gp-vi-b);stroke-width:1;stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke}

/* draw-in */
.gp-grid .gp-line{stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.1s var(--md-ease-standard)}
.gp-grid.is-drawn .gp-line{stroke-dashoffset:0}
.gp-grid .gp-area{opacity:0;transition:opacity .6s var(--md-ease-standard) .3s}
.gp-grid.is-drawn .gp-area{opacity:1}
.gp-grid .gp-node,.gp-grid .gp-marker{opacity:0;transition:opacity .4s var(--md-ease-standard) .8s}
.gp-grid.is-drawn .gp-node,.gp-grid.is-drawn .gp-marker{opacity:1}

/* grouped bars */
.gp-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:2px;
  height:100%;padding-left:30px}
.gp-bargroup{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:8px;height:100%}
.gp-barpair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.gp-bar{width:9px;border-radius:var(--md-shape-full);height:0;
  transition:height .8s var(--md-ease-standard)}
.gp-bar--a{background:var(--gp-rv-a)}
.gp-bar--b{background:var(--gp-rv-b)}
.gp-barlab{font-family:var(--md-font-plain);font-size:9px;color:var(--gp-axis);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}
.gp-yaxis{position:absolute;left:0;top:0;bottom:22px;width:28px;display:flex;
  flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-family:var(--md-font-plain);font-size:9px;color:var(--gp-axis)}
.gp-hlines{position:absolute;left:30px;right:0;top:0;bottom:22px;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between}
.gp-hlines i{display:block;height:1px;background:#EDEFF4}

/* legends */
.gp-legend{display:flex;flex-wrap:nowrap;justify-content:center;gap:12px;margin-top:14px;
  padding-top:12px;border-top:1px solid #EDEFF4;overflow:hidden}
.gp-legend--plain{border-top:none;padding-top:0}
.gp-lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--md-font-plain);font-size:11px;color:#8A93A6}
.gp-lg i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
/* the satisfaction legend marks a line, not a category */
.gp-lg--line i{width:16px;height:2px;border-radius:var(--md-shape-full);position:relative}
.gp-lg--line i::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;background:currentColor}
.gp-figs{display:flex;justify-content:center;gap:60px;margin-top:6px;
  font-family:var(--md-font-brand);font-weight:600;font-size:13px;color:var(--gp-title)}

@container (max-width:1000px){
  .gp-grid{grid-template-columns:minmax(0,1fr)}
  .gp-card{padding:18px 18px 14px}
}
/* when a card column gets tight, the day labels turn rather than collide */
@container (max-width:420px){
  .gp-barlab{writing-mode:vertical-rl;transform:rotate(180deg);max-height:52px}
  .gp-bargroup{gap:6px}
}

/* =================================================================
   BALANCE GAUGE CARDS — the account summary band from the sheet.
   Sampled: header #242424 · gauge #009AE6 · calls #070952
   pill #00AAFF · link #2449FB · struck #CCCCCC · coin #FFCE05
   ================================================================= */
.gb{--gb-head:#242424; --gb-gauge:#009AE6; --gb-calls:#070952; --gb-track:#E9E9EE;
  --gb-pill:#00AAFF; --gb-link:#2449FB; --gb-struck:#CCCCCC; --gb-coin:#FFCE05}
.gb-row{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.gb-card{width:246px;background:#fff;border-radius:var(--md-shape-md);overflow:hidden;
  box-shadow:var(--md-elev-1)}
.gb-head{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--gb-head);
  color:#fff;font-family:var(--md-font-brand);font-weight:600;font-size:10.5px}
.gb-head .gb-sim{width:11px;height:15px;border-radius:2px;background:var(--gb-gauge);
  flex:0 0 auto}
.gb-head .gb-num{opacity:.92;padding-left:9px;border-left:1px solid rgba(255,255,255,.3)}
.gb-head .md-i{width:13px;height:13px;margin-left:auto;flex:0 0 auto}
.gb-body{display:flex;gap:12px;padding:12px}
.gb-gcol{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto}

/* arc gauge */
.gb-gauge{position:relative;width:74px;height:74px}
.gb-gauge svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.gb-gauge .gb-arc{fill:none;stroke-width:8;stroke-linecap:round}
.gb-gtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;text-align:center}
.gb-gtxt b{font-family:var(--md-font-brand);font-weight:700;font-size:12.5px;
  color:var(--md-on-surface);line-height:1}
.gb-gtxt small{font-size:7.5px;color:var(--md-on-surface-variant);line-height:1}
.gb-gtxt .gb-gkey{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;
  color:var(--md-on-surface-variant)}
.gb-gtxt .gb-gkey .md-i{width:7px;height:7px}

/* airtime panel */
.gb-panel{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:9px 10px;
  border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-sm)}
.gb-k{font-family:var(--md-font-brand);font-weight:500;font-size:8.5px;
  color:var(--md-on-surface-variant)}
.gb-v{font-family:var(--md-font-brand);font-weight:700;font-size:15px;line-height:1.1;
  color:var(--md-on-surface)}
.gb-struck{font-family:var(--md-font-brand);font-weight:600;font-size:9px;
  color:var(--gb-struck);text-decoration:line-through}
.gb-valid{font-size:8.5px;color:var(--md-on-surface-variant)}
.gb-act{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.gb-link{background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--md-font-brand);font-weight:700;font-size:9.5px;color:var(--gb-link)}
.gb-plus{width:16px;height:16px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--gb-link);color:#fff;border:none;cursor:pointer}
.gb-plus .md-i{width:10px;height:10px;stroke-width:3}
.gb-plus--pale{background:var(--gb-gauge)}

/* quick actions 2x2 */
.gb-quick{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gb-quick button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-height:56px;padding:8px 4px;cursor:pointer;background:#fff;
  border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-sm);
  font-family:var(--md-font-brand);font-weight:500;font-size:8.5px;
  color:var(--md-on-surface);--state:var(--md-on-surface);text-align:center;line-height:1.25}
.gb-quick .md-i{width:15px;height:15px}

.gb-foot{padding:0 12px 12px}
.gb-pill{height:24px;padding:0 16px;border:none;cursor:pointer;
  border-radius:var(--md-shape-full);background:var(--gb-pill);color:#fff;--state:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:9.5px}
.gb-chev{width:26px;height:26px;margin:8px auto 0;display:grid;place-items:center;
  border:none;cursor:pointer;border-radius:50%;background:#fff;box-shadow:var(--md-elev-1);
  color:var(--md-on-surface)}
.gb-chev .md-i{width:14px;height:14px}
.gb-stack{display:flex;flex-direction:column;align-items:center}

/* compact summary cards */
.gb-mini-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;padding:16px;border:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent);
  border-radius:var(--md-shape-xs)}
.gb-mini{display:flex;flex-direction:column;gap:2px;padding:11px;background:#fff;
  border-radius:var(--md-shape-sm);box-shadow:var(--md-elev-1)}
.gb-mini .gb-v{font-size:14px}
.gb-mini-points{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px;padding:7px 11px;background:#fff;border-radius:var(--md-shape-sm);
  box-shadow:var(--md-elev-1);font-size:9px;color:var(--md-on-surface-variant)}
.gb-mini-points b{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--md-font-brand);font-weight:700;font-size:10.5px;
  color:var(--md-on-surface)}
.gb-coin{width:11px;height:11px;border-radius:50%;background:var(--gb-coin)}
.gb-mini-cell{display:flex;flex-direction:column}

@container (max-width:560px){
  .gb-card{width:100%}
  .gb-row{gap:18px}
}

/* =================================================================
   STEPPER & STICKY FOOTER
   Stepper dots: navy #070952 active · grey #D3D3D8 idle
   complete #22C55E · error #FF4D6D. Footer actions use #00AAFF.
   ================================================================= */
.st{--st-navy:#070952; --st-idle:#D3D3D8; --st-ok:#22C55E; --st-err:#FF4D6D;
  --st-blue:#00AAFF; --st-line:#E4E4EA; --st-ink:#231F20}

/* ---- step dots -------------------------------------------------- */
.st-dots{display:flex;align-items:center;gap:26px}
.st-dot{width:15px;height:15px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--st-idle);color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:8px;line-height:1}
.st-dot--active{background:var(--st-navy)}
.st-dot--ring{background:#fff;border:2px solid var(--st-navy);color:var(--st-navy)}
.st-dot--ok{background:var(--st-ok)}
.st-dot--err{background:var(--st-err)}
.st-dot--out{background:#fff;border:1px solid var(--st-idle);color:#9A9AA2}
.st-dot--done{background:var(--st-idle);color:#fff}
.st-dot .md-i{width:8px;height:8px;stroke-width:3}
.st-dot--tiny{width:5px;height:5px}
.st-dot--tiny.st-dot--out{border-width:1px}

.st-labelled{display:flex;align-items:flex-start;gap:26px}
.st-lcol{display:flex;flex-direction:column;align-items:center;gap:7px}
.st-lcol span{font-family:var(--md-font-brand);font-weight:500;font-size:7.5px;
  color:var(--md-on-surface-variant)}

/* ---- horizontal stepper with connectors ------------------------- */
.st-rail{display:flex;align-items:flex-start}
.st-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.st-pill{display:inline-flex;align-items:center;gap:7px;height:20px;padding:0 10px 0 3px;
  border-radius:var(--md-shape-full);border:1px solid var(--st-navy);background:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:8.5px;color:var(--st-navy)}
.st-pill .st-dot{width:14px;height:14px}
.st-circle{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1.5px solid var(--st-idle);color:#9A9AA2;
  font-family:var(--md-font-brand);font-weight:700;font-size:8.5px}
.st-circle--navy{border-color:var(--st-navy);color:var(--st-navy)}
.st-circle--err{border-color:var(--st-err);color:var(--st-err)}
.st-circle .md-i{width:10px;height:10px;stroke-width:3}
.st-node span{font-family:var(--md-font-brand);font-weight:500;font-size:7.5px;
  color:var(--md-on-surface-variant)}
.st-node--err span{color:var(--st-err)}
.st-conn{flex:1;min-width:22px;height:1px;margin-top:10px;background:var(--st-line)}

/* ---- counter stepper ------------------------------------------- */
.st-count{display:flex;flex-direction:column;gap:6px;padding:11px 13px 12px}
.st-count-n{font-family:var(--md-font-brand);font-weight:800;font-size:15px;line-height:1;
  color:var(--st-ink)}
.st-count-n i{font-style:normal;font-weight:600;font-size:9.5px;color:#9A9AA2}
.st-bar{height:2px;border-radius:var(--md-shape-full);background:var(--st-line);
  overflow:hidden}
.st-bar i{display:block;height:100%;border-radius:var(--md-shape-full);
  background:var(--st-navy);transition:width var(--md-dur-long) var(--md-ease-standard)}
.st-count b{font-family:var(--md-font-brand);font-weight:700;font-size:9.5px;
  color:var(--st-ink)}
.st-count small{font-size:7.5px;color:#9A9AA2}

.st-side{display:flex;flex-direction:column;gap:9px;padding-left:14px;
  border-left:1px solid var(--st-line)}
.st-side-head{display:flex;align-items:center;gap:8px}
.st-side-head .st-dot{width:5px;height:5px}
.st-side-head b{flex:1;font-family:var(--md-font-brand);font-weight:700;font-size:8.5px;
  color:var(--md-primary)}
.st-side-head .md-i{width:10px;height:10px;color:#9A9AA2}
.st-side small{font-size:7.5px;color:#9A9AA2}
.st-side-field{display:flex;align-items:center;padding:0 5px;font-size:5.6px;color:#9A9AA2;height:19px;border:1px solid var(--st-line);border-radius:3px;
  background:#fff}
.st-side a{font-family:var(--md-font-brand);font-weight:700;font-size:8px;
  color:var(--md-primary);text-decoration:underline;text-underline-offset:2px}

/* ---- sticky footer --------------------------------------------- */
.st-foot{display:flex;align-items:center;gap:20px;padding:11px 16px;background:#fff;
  box-shadow:0 -2px 10px rgba(7,9,82,.08)}
.st-foot-total{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.st-foot-total span{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;
  color:#9A9AA2}
.st-foot-total span .md-i{width:8px;height:8px}
.st-foot-total b{font-family:var(--md-font-brand);font-weight:800;font-size:12px;
  color:var(--md-primary)}
.st-foot-meta{display:grid;grid-template-columns:auto auto;gap:2px 22px;font-size:7.5px;
  color:#9A9AA2}
.st-foot-meta b{font-family:var(--md-font-brand);font-weight:700;font-size:8px;
  color:var(--st-ink)}
.st-foot-acts{margin-left:auto;display:flex;align-items:center;gap:9px}

.st-btn{height:22px;padding:0 14px;border-radius:var(--md-shape-full);cursor:pointer;
  border:1px solid var(--st-line);background:#fff;color:var(--st-ink);--state:var(--st-ink);
  font-family:var(--md-font-brand);font-weight:700;font-size:8.5px;white-space:nowrap}
.st-btn--fill{background:var(--st-blue);border-color:var(--st-blue);color:#fff;--state:#fff}
.st-btn--out{border-color:var(--st-blue);color:var(--st-blue);--state:var(--st-blue)}
.st-btn--block{width:100%}
.st-btn .md-i{width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.st-btn:disabled{cursor:not-allowed;background:#F1F1F5;border-color:#F1F1F5;color:#B5B5BC}

/* button-combination matrix */
.st-combo{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.st-combo-row{display:flex;gap:9px}

/* app footer */
.st-app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px 8px;
  background:#fff;box-shadow:0 -2px 10px rgba(7,9,82,.08)}
.st-app-row{display:flex;gap:9px;width:100%}
.st-app-row .st-btn{flex:1}
.st-app a{font-family:var(--md-font-brand);font-weight:700;font-size:8.5px;
  color:var(--md-primary);text-decoration:underline;text-underline-offset:2px}
.st-app small{font-size:8px;color:#9A9AA2}
.st-home{width:56px;height:2.5px;border-radius:var(--md-shape-full);background:var(--st-ink)}
.st-spin{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:st-spin .9s linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-app-check{display:flex;align-items:center;gap:6px;font-size:8px;color:var(--st-ink)}
.st-app-check input{width:11px;height:11px;accent-color:var(--st-blue)}

/* =================================================================
   Specimen scaffolding for this page only
   ================================================================= */
.st-sheet{container-type:inline-size}
.st-box{padding:16px;border:1px dashed color-mix(in srgb,var(--md-tertiary) 55%,transparent);
  border-radius:var(--md-shape-xs)}
.st-stack{display:flex;flex-direction:column;gap:22px}
.st-row{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.st-cap{margin:0 0 10px;font-family:var(--md-font-brand);font-weight:700;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--md-on-surface-variant)}
.st-phone{width:236px;border-radius:var(--md-shape-sm);overflow:hidden;
  border:1px solid var(--st-line)}
.st-card{border:1px solid var(--st-line);border-radius:var(--md-shape-xs);background:#fff}
.st-w-foot{max-width:620px}

@container (max-width:560px){
  .st-foot{flex-wrap:wrap;gap:12px}
  .st-foot-acts{margin-left:0;width:100%;justify-content:flex-end}
  .st-row{gap:18px}
}

/* =================================================================
   TEXT TOKENS — the ATOM Text Component sheet: Poppins titles and
   Roboto content, specified per breakpoint with usage notes.
   Scoped to this section; the M3 role scale above is untouched.
   ================================================================= */
.tx{--tx-rule:#E4E4EA; --tx-meta:#6F6F76; --tx-ink:#231F20; --tx-link:#2449FB;
  --tx-tertiary:#9A9AA2;
  font-family:'Roboto',var(--md-font-plain)}

/* font cards */
.tx-fonts{display:flex;flex-wrap:wrap;gap:34px;align-items:center;
  padding-bottom:20px;border-bottom:1px solid var(--tx-rule)}
.tx-font{display:flex;align-items:center;gap:16px}
.tx-swatch{display:grid;place-items:center;width:118px;height:52px;
  border-radius:var(--md-shape-xs);background:#2E2E33;color:#fff;
  font-size:22px;font-weight:700;letter-spacing:-.01em}
.tx-swatch--poppins{font-family:'Poppins',var(--md-font-brand)}
.tx-swatch--roboto{font-family:'Roboto',var(--md-font-plain)}
.tx-font-meta b{display:block;font-family:'Poppins',var(--md-font-brand);font-weight:700;
  font-size:13px;color:var(--tx-ink)}
.tx-font-meta a{font-size:11px;color:var(--tx-link);text-decoration:underline;
  text-underline-offset:2px}

/* table */
.tx-table{margin-top:0}
.tx-head,.tx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:26px}
.tx-head{padding:11px 14px;background:#F1F1F4;font-size:9.5px;color:var(--tx-meta)}
.tx-head b{display:block;font-family:'Poppins',var(--md-font-brand);font-weight:700;
  font-size:9.5px;color:var(--tx-ink)}
.tx-group{margin:0;padding:18px 14px 10px;font-family:'Poppins',var(--md-font-brand);
  font-weight:700;font-size:15px;color:var(--tx-ink)}
.tx-row{padding:16px 14px;border-bottom:1px solid var(--tx-rule);align-items:start}
.tx-cell{min-width:0}
.tx-name{margin:0 0 8px;font-family:'Poppins',var(--md-font-brand);font-weight:700;
  color:var(--tx-ink);line-height:1.1}
.tx-name--sm{font-size:15px}
.tx-spec{margin:0;font-size:9.5px;line-height:1.55;color:var(--tx-meta)}
.tx-use{margin:0;padding-left:14px;font-size:10px;line-height:1.6;color:var(--tx-ink)}
.tx-use li{margin:0 0 3px}

/* specimen name variants, per the sheet */
.tx-name--roboto{font-family:'Roboto',var(--md-font-plain)}
.tx-name--reg{font-weight:400}
.tx-name--semi{font-weight:600}
.tx-name--strike{font-weight:400;color:var(--tx-tertiary);text-decoration:line-through}
.tx-name--link{color:var(--tx-link);text-decoration:underline;text-underline-offset:2px}

@container (max-width:640px){
  .tx-head,.tx-row{grid-template-columns:minmax(0,1fr);gap:10px}
}
.tx-sheet{container-type:inline-size}

/* =================================================================
   ALERT — the ATOM Alert Component sheet. Four semantic variants
   (info · alert · maintenance · success), optional title, optional
   bullets (capped at 3), mobile and desktop widths.
   ================================================================= */
.al{--al-ink:#231F20; --al-meta:#6F6F76; --al-rule:#E4E4EA;
  --al-info-bg:#E2F4FD; --al-info-bd:#7CC6E8; --al-info-ic:#1B9AD6;
  --al-alert-bg:#FDF0F2; --al-alert-bd:#F5B9C2; --al-alert-ic:#E8283C;
  --al-warn-bg:#FDF0F2; --al-warn-bd:#F5B9C2; --al-warn-ic:#E8283C;
  --al-ok-bg:#F2FBE0; --al-ok-bd:#B9DA6E; --al-ok-ic:#3EA935;
  --al-link:#2449FB}

/* ---- the component ---------------------------------------------- */
.alert{display:flex;align-items:flex-start;gap:8px;
  padding:12px;border-radius:4px;border:1px solid transparent;
  font-family:var(--md-font-plain);text-align:left}
.alert-ic{flex:0 0 auto;display:grid;place-items:center;width:12px;height:12px;
  margin-top:1px}
.alert-ic .md-i{width:12px;height:12px;stroke-width:2.2}
.alert-body{min-width:0}
.alert-t{margin:0 0 2px;font-family:var(--md-font-brand);font-weight:700;
  font-size:11px;line-height:1.45;color:var(--al-ink)}
.alert-p{margin:0;font-size:11px;line-height:1.5;color:var(--al-ink)}
.alert-p b{font-weight:700}
.alert-p a{color:var(--al-link);text-decoration:underline;text-underline-offset:2px}
.alert-list{margin:2px 0 0;padding-left:15px;font-size:11px;line-height:1.55;
  color:var(--al-ink)}
.alert-list li{margin:0}

.alert--info{background:var(--al-info-bg);border-color:var(--al-info-bd)}
.alert--info .alert-ic{color:var(--al-info-ic)}
.alert--alert{background:var(--al-alert-bg);border-color:var(--al-alert-bd)}
.alert--alert .alert-ic{color:var(--al-alert-ic)}
.alert--maintenance{background:var(--al-warn-bg);border-color:var(--al-warn-bd)}
.alert--maintenance .alert-ic{color:var(--al-warn-ic)}
.alert--success{background:var(--al-ok-bg);border-color:var(--al-ok-bd)}
.alert--success .alert-ic{color:var(--al-ok-ic)}
/* the borderless treatment used by the narrow gallery plates */
.alert--flat{border-color:transparent}

/* ---- gallery ----------------------------------------------------- */
.al-gallery{display:flex;flex-direction:column;gap:20px;max-width:640px}
.al-trio{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.al-w-sm{width:196px;flex:0 0 auto}
.al-w-md{width:196px;flex:0 0 auto}
.al-w-lg{width:100%}
.al-pair{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}

/* ---- specs ------------------------------------------------------- */
.al-spec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);
  gap:30px;padding:22px 0;border-bottom:1px solid var(--al-rule);align-items:start}
.al-spec > h4{grid-column:1/-1;margin:0;font-family:var(--md-font-brand);font-weight:700;
  font-size:19px;color:var(--al-ink)}
.al-spec-col > h5{margin:0 0 9px;font-family:var(--md-font-brand);font-weight:700;
  font-size:12px;color:var(--al-ink)}
.al-text{display:grid;grid-template-columns:auto 1fr;gap:3px 22px;margin:0 0 18px;
  font-size:10px;color:var(--al-ink)}
.al-text dt{color:var(--al-ink)}
.al-text dd{margin:0;color:var(--al-ink)}
.al-tok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 18px;
  font-size:9.5px;line-height:1.6;color:var(--al-ink)}
.al-tok span{min-width:0;overflow-wrap:anywhere}
.al-tok .is-h{padding-bottom:3px;text-decoration:underline;text-underline-offset:2px}
.al-tok .is-b{font-weight:700}
.al-frame{margin:0 0 10px;font-family:var(--md-font-brand);font-weight:700;font-size:12px;
  color:var(--al-ink)}
.al-mobile{max-width:196px}

.al-sheet{container-type:inline-size}
@container (max-width:760px){
  .al-spec{grid-template-columns:minmax(0,1fr);gap:18px}
  .al-w-sm,.al-w-md{width:100%}
}

/* =================================================================
   AMOUNT FORMAT — the ATOM Amount Format sheet. Two panels (neutral
   and Game Blue), each carrying the prefix and suffix currency
   arrangements at six sizes in two ink treatments.
   ================================================================= */
.af{--af-panel:#F1F1F1; --af-blue:#00A6F5;
  --af-ink:#231F20; --af-deep:#070952; --af-white:#FFFFFF}

.af-sheet{container-type:inline-size}
.af-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:760px}
.af-panel{padding:26px 22px 30px}
.af-panel--neutral{background:var(--af-panel)}
.af-panel--blue{background:var(--af-blue)}
.af-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px}
.af-col{display:flex;flex-direction:column}
.af-group + .af-group{margin-top:26px}

.amount{display:block;font-family:var(--md-font-brand);font-weight:700;
  letter-spacing:-.005em;line-height:1.18;white-space:nowrap}
.amount--ink{color:var(--af-ink)}
.amount--deep{color:var(--af-deep)}
.amount--white{color:var(--af-white)}
.amount--s1{font-size:32px}
.amount--s2{font-size:26px}
.amount--s3{font-size:22px}
.amount--s4{font-size:19px}
.amount--s5{font-size:15px}
.amount--s6{font-size:12px}
.af-row{display:flex;align-items:flex-end;min-height:0;padding:6px 0}

/* spec strip */
.af-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  max-width:760px;margin-top:18px}
.af-spec div{padding:12px 14px;background:var(--md-surface-container-low);
  border-radius:var(--md-shape-xs)}
.af-spec b{display:block;font-family:var(--md-font-brand);font-weight:700;font-size:11px;
  color:var(--md-on-surface)}
.af-spec span{font-size:10px;line-height:1.5;color:var(--md-on-surface-variant)}

@container (max-width:700px){
  .af-board{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   BREADCRUMBS — the ATOM Breadcrumbs Component sheet: the truncated
   two-line frame and the four-level rail with its redline.
   ================================================================= */
.bcx{--bcx-link:#7B7B82; --bcx-cur:#231F20; --bcx-sep:#B4B4BB;
  --bcx-frame:#2E9BF0; --bcx-red:#FBD9DE; --bcx-line:#F4737F}

.bcx-sheet{container-type:inline-size}

/* the component */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;
  font-family:var(--md-font-plain);font-size:15px;line-height:1.4}
.crumbs a,.crumbs button{padding:0;border:0;background:none;font:inherit;
  color:var(--bcx-link);cursor:pointer;text-decoration:none}
.crumbs a:hover,.crumbs button:hover{color:var(--md-primary);
  text-decoration:underline;text-underline-offset:2px}
.crumbs a:focus-visible,.crumbs button:focus-visible{outline:2px solid var(--md-primary);
  outline-offset:3px;border-radius:2px}
.crumbs [aria-disabled="true"]{color:#C8C8CE;cursor:not-allowed;text-decoration:none}
.crumbs i{font-style:normal;color:var(--bcx-sep)}
.crumbs b{font-weight:700;color:var(--bcx-cur)}
.crumbs .crumbs-ell{letter-spacing:.06em}

/* the dashed spec frame — two stacked instances */
.bcx-frame{display:flex;flex-direction:column;justify-content:space-between;
  min-height:206px;padding:44px 34px;
  outline:3px dashed var(--bcx-frame);outline-offset:-2px;background:#fff}

/* the redline plate */
.bcx-red{position:relative;background:#fff;max-width:840px}
.bcx-red-top{position:relative;height:24px;background:var(--bcx-red);
  border-bottom:1px solid var(--bcx-line);margin-right:64px}
.bcx-red-bar{padding:5px 0 6px 12px;border-bottom:1px solid var(--bcx-line)}
.bcx-red-bar .crumbs{font-size:13px;gap:0 8px;flex-wrap:nowrap;white-space:nowrap}
.bcx-red-bot{height:120px;background:var(--bcx-red)}
.bcx-red-guide{position:absolute;left:12px;top:0;bottom:0;width:0;
  border-left:2px dotted var(--bcx-frame)}
.bcx-red-num{position:absolute;left:-30px;font-family:var(--md-font-plain);
  font-size:12px;font-weight:600;color:var(--bcx-line)}
.bcx-red-wrap{position:relative;padding-left:32px}
.bcx-n24{top:2px}
.bcx-n80{top:52%}

@container (max-width:460px){
  .bcx-frame{padding:28px 20px;min-height:170px}
  .crumbs{font-size:13px}
}

/* =================================================================
   BADGE — additions to the existing .md-badge: the count-overflow
   pill, the dot form, and the badged navigation bar from the sheet.
   ================================================================= */
.md-badge--dot{min-width:9px;width:9px;height:9px;padding:0;
  box-shadow:0 0 0 2px var(--md-surface)}
.md-badge--pill{padding:0 6px;border-radius:var(--md-shape-full)}
.md-badge--lg{min-width:20px;height:20px;font-size:12px;padding:0 6px}

/* ---- badged navigation bar --------------------------------------- */
.bg-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:22px 20px 18px;background:#F1ECF8;border-top:3px solid #E2DAF3}
.bg-item{display:flex;flex-direction:column;align-items:center;gap:10px;
  border:0;background:none;font:inherit;color:#3C4043;cursor:pointer}
.bg-ico{position:relative;display:grid;place-items:center;
  width:74px;height:44px;border-radius:var(--md-shape-full)}
.bg-item.is-active .bg-ico{background:#E6E8F8}
.bg-ico > .md-i{width:30px;height:30px;stroke-width:2}
.bg-ico .md-badge{position:absolute;top:-2px;left:50%;margin-left:2px;
  background:#C5221F;color:#fff;font-size:12px;height:20px;min-width:20px;
  box-shadow:0 0 0 2px #F1ECF8}
.bg-ico .md-badge--dot{top:0;margin-left:8px;width:11px;height:11px;min-width:11px;
  padding:0}
.bg-label{font-family:var(--md-font-plain);font-size:15px;line-height:1;color:#3C4043}

@container (max-width:520px){
  .bg-ico{width:56px}
  .bg-label{font-size:13px}
}
.bg-sheet{container-type:inline-size}

/* =================================================================
   COACHMARK (app only) — the ATOM Coachmark sheet: one bubble at
   twelve pointer positions, grouped by the edge the pointer sits on.
   ================================================================= */
.cm{--cm-panel:#F5F5F5; --cm-fill:#4C24E0; --cm-accent:#E8FF00}
.cm-sheet{container-type:inline-size}
.cm-panel{padding:22px 24px 26px;background:var(--cm-panel)}
.cm-group + .cm-group{margin-top:30px}
.cm-glabel{margin:0 0 14px;font-family:var(--md-font-plain);font-weight:600;font-size:15px;
  color:#3C3C43}
.cm-row{display:flex;flex-wrap:wrap;gap:22px 42px;align-items:flex-start}
.cm-slot{flex:0 0 auto;padding:14px 0}
.cm-slot--l,.cm-slot--r{padding:0}

/* the bubble */
.coach{position:relative;width:296px;padding:18px 18px 16px;border-radius:4px;
  background:var(--cm-fill);color:#fff;font-family:var(--md-font-plain)}
.coach-body{margin:0 0 14px;font-size:15px;line-height:1.4;color:#fff}
.coach-actions{display:flex;justify-content:flex-end}
.coach-btn{padding:7px 17px;border:1.5px solid var(--cm-accent);border-radius:999px;
  background:transparent;color:var(--cm-accent);font-family:var(--md-font-plain);
  font-weight:600;font-size:15px;line-height:1.15;cursor:pointer;
  transition:background var(--md-dur-medium) var(--md-ease-standard),
    color var(--md-dur-medium) var(--md-ease-standard)}
.coach-btn:hover{background:var(--cm-accent);color:var(--cm-fill)}
.coach-btn:active{background:var(--cm-accent);color:var(--cm-fill);
  border-color:var(--cm-accent);filter:brightness(.94)}
.coach-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* the pointer — a 15x11 wedge in the bubble fill */
.coach-tip{position:absolute;width:0;height:0}
.coach--top .coach-tip{top:-11px;border-left:8px solid transparent;
  border-right:8px solid transparent;border-bottom:11px solid var(--cm-fill)}
.coach--bottom .coach-tip{bottom:-11px;border-left:8px solid transparent;
  border-right:8px solid transparent;border-top:11px solid var(--cm-fill)}
.coach--left .coach-tip{left:-11px;border-top:8px solid transparent;
  border-bottom:8px solid transparent;border-right:11px solid var(--cm-fill)}
.coach--right .coach-tip{right:-11px;border-top:8px solid transparent;
  border-bottom:8px solid transparent;border-left:11px solid var(--cm-fill)}
/* horizontal placement (top/bottom edges) */
.coach--at-start .coach-tip{left:14px}
.coach--at-center .coach-tip{left:50%;margin-left:-8px}
.coach--at-end .coach-tip{right:14px}
/* vertical placement (left/right edges) */
.coach--at-top .coach-tip{top:14px}
.coach--at-middle .coach-tip{top:50%;margin-top:-8px}
.coach--at-bottom .coach-tip{bottom:14px}
/* the flush corner treatments the sheet shows on the start/end pointers */
.coach--top.coach--at-start{border-top-left-radius:0}
.coach--top.coach--at-end{border-top-right-radius:0}
.coach--bottom.coach--at-start{border-bottom-left-radius:0}
.coach--bottom.coach--at-end{border-bottom-right-radius:0}
.coach--left.coach--at-top{border-top-left-radius:0}
.coach--left.coach--at-bottom{border-bottom-left-radius:0}
.coach--right.coach--at-top{border-top-right-radius:0}
.coach--right.coach--at-bottom{border-bottom-right-radius:0}
.coach--top.coach--at-start .coach-tip,.coach--bottom.coach--at-start .coach-tip{left:0}
.coach--top.coach--at-end .coach-tip,.coach--bottom.coach--at-end .coach-tip{right:0}
.coach--left.coach--at-top .coach-tip,.coach--right.coach--at-top .coach-tip{top:0}
.coach--left.coach--at-bottom .coach-tip,.coach--right.coach--at-bottom .coach-tip{bottom:0}

/* in-context demo */
.cm-stage{position:relative;display:flex;justify-content:center;padding:26px 18px 40px;
  border-radius:var(--md-shape-md);background:var(--md-surface-container-low)}
.cm-scrim{position:absolute;inset:0;border-radius:var(--md-shape-md);
  background:rgba(7,9,82,.40)}
.cm-target{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--md-shape-full);background:#fff;color:#231F20;
  font-family:var(--md-font-plain);font-size:14px;
  box-shadow:0 0 0 4px rgba(255,255,255,.34)}
.cm-stage .coach{position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  top:calc(100% - 4px)}
.cm-stage-wrap{position:relative;padding-bottom:150px}

/* the sheet renders the bubble at 0.52 scale so the three placements in each
   group sit side by side as the reference shows; the in-context bubble below
   is the real 296px component. */
.cm-panel .coach{width:296px;transform:scale(.52);transform-origin:top left}
.cm-panel .cm-slot{width:154px;height:0;padding:0}
.cm-panel .cm-slot--l,.cm-panel .cm-slot--r{width:154px}
.cm-panel .cm-row{gap:8px 18px;align-items:flex-start}
.cm-panel .cm-group{padding-bottom:8px}
.cm-panel .cm-slot{height:78px}

@container (max-width:460px){
  .cm-panel .cm-row{gap:8px 12px}
}

/* ---- the COMPONENTS library panel ------------------------------- */
.cm-lib-field{position:relative;display:flex;justify-content:center;
  padding:52px 20px 58px;overflow:hidden;background:#F4FBFE}
.cm-lib-field i{position:absolute;display:block;border-radius:26px}
.cm-lib-d1{width:210px;height:210px;left:14%;top:-46px;background:#C6C2FB;
  transform:rotate(45deg)}
.cm-lib-d2{width:220px;height:220px;right:8%;top:-8px;background:#AEEEFB;
  transform:rotate(45deg)}
.cm-lib-d3{width:200px;height:200px;left:26%;bottom:-84px;background:#B4B9E4;
  transform:rotate(45deg)}
.cm-lib-card{position:relative;z-index:2;width:230px;padding:14px 12px 16px;
  background:#fff}
.cm-lib-title{margin:0 0 14px;font-family:var(--md-font-plain);font-weight:700;
  font-size:8px;letter-spacing:.06em;color:#5A5A62}
.cm-lib-box{padding:8px;border:1px dashed #8A5CF6}
.cm-lib-box + .cm-lib-box{margin-top:16px}
.cm-lib-arrows{display:flex;flex-direction:column;gap:8px;width:max-content}
.cm-lib-arrow{display:grid;place-items:center;width:26px;height:26px;border:0;
  border-radius:50%;background:#E6E6E8;color:#5A5A62;cursor:pointer}
.cm-lib-arrow svg{width:13px;height:13px}
.cm-lib-arrow:hover{background:#DADADD}
.cm-lib-dots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 22px;padding:14px 10px}
.cm-lib-drow{display:flex;align-items:center;gap:5px}
.cm-lib-drow span{display:block;width:5px;height:5px;border-radius:50%;
  background:#DCDCE0}
.cm-lib-drow span.is-on{width:14px;border-radius:3px;background:#8E8E96}
.cm-lib-drow span.is-mid{background:#B9B9BF}

/* =================================================================
   MAP — the ATOM Map Component sheet: a 16:9 basemap carrying
   location pins, a fullscreen control and (desktop) zoom controls.
   ================================================================= */
.mp{--mp-pin:#E01A4F; --mp-pin-sel:#1FA2F0; --mp-ink:#231F20; --mp-ctl:#FFFFFF}
.mp-sheet{container-type:inline-size}

.mp-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#F2F1EF}
.mp-frame img{display:block;width:100%;height:100%;object-fit:cover}
.mp-frame--mobile{max-width:536px}

/* controls */
.mp-ctl{position:absolute;display:grid;place-items:center;background:var(--mp-ctl);
  color:#3C4043;border:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.mp-ctl:hover{background:#F1F1F1}
.mp-ctl:active{background:#E6E6E6}
.mp-full{top:12px;right:12px;width:34px;height:34px}
.mp-full svg{width:17px;height:17px}
.mp-zoom{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;
  background:var(--mp-ctl);box-shadow:0 1px 3px rgba(0,0,0,.22)}
.mp-zoom button{width:36px;height:36px;display:grid;place-items:center;border:0;
  background:none;color:#3C4043;font-family:var(--md-font-plain);font-size:22px;
  line-height:1;cursor:pointer}
.mp-zoom button:first-child{border-bottom:1px solid #E3E3E3}
.mp-zoom button:hover{background:#F1F1F1}

/* pin */
.mp-pin{position:absolute;transform:translate(-50%,-100%);display:flex;
  flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.mp-pin svg{display:block;width:26px;height:26px;color:var(--mp-pin);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}
.mp-pin--sel svg{width:34px;height:34px;color:var(--mp-pin-sel)}
.mp-pin b{max-width:110px;font-family:var(--md-font-plain);font-weight:600;
  font-size:11px;line-height:1.25;color:var(--mp-ink);text-align:center;
  text-wrap:pretty}
.mp-pin--nolabel b{display:none}

/* usage column */
.mp-usage h4{margin:0 0 8px;font-family:var(--md-font-brand);font-weight:700;
  font-size:15px;color:var(--md-on-surface)}
.mp-usage ul{margin:0;padding-left:16px;font-family:var(--md-font-plain);font-size:12px;
  line-height:1.65;color:var(--md-on-surface)}
.mp-rule{width:64px;height:0;margin:22px 0;border-top:1px dashed #B9B9BF}
.mp-text{display:grid;grid-template-columns:auto 1fr;gap:4px 60px;
  font-family:var(--md-font-plain);font-size:12px;color:var(--md-on-surface)}
.mp-cap{margin:0 0 12px;font-family:var(--md-font-brand);font-weight:700;font-size:22px;
  color:#3C3C43}

@container (max-width:520px){
  .mp-frame--mobile{max-width:100%}
  .mp-pin b{font-size:10px;max-width:92px}
}

/* =================================================================
   STORE LOCATOR — search, map, nearby list and the view-more toggle.
   ================================================================= */
.mp-loc{width:100%;font-family:var(--md-font-plain)}
.mp-loc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;
  align-items:start}
.mp-note{margin:0 0 8px;font-family:var(--md-font-plain);font-size:10px;
  color:var(--md-on-surface-variant)}
.mp-loc-cap{margin:0 0 10px;font-family:var(--md-font-brand);font-weight:700;
  font-size:13px;color:var(--md-on-surface)}

/* postal-code search */
.mp-search{position:relative;display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:#F1F1F4}
.mp-search-in{flex:1 1 auto;min-width:0}
.mp-search-in span{display:block;font-size:8px;line-height:1.4;
  color:var(--md-on-surface-variant)}
.mp-search-in input{display:block;width:100%;border:0;background:none;padding:0;
  font-family:var(--md-font-plain);font-size:11px;color:var(--md-on-surface)}
.mp-search-in input:focus{outline:none}
.mp-search button{flex:0 0 auto;display:grid;place-items:center;width:17px;height:17px;
  border:0;background:none;color:#3C3C43;cursor:pointer}
.mp-search button svg{width:14px;height:14px}
.mp-search button:hover{color:var(--md-primary)}

/* list */
.mp-listhead{display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px}
.mp-listhead h5{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:11px;
  color:var(--md-on-surface)}
.mp-listhead button{display:grid;place-items:center;width:17px;height:17px;border:0;
  background:none;color:#3C3C43;cursor:pointer}
.mp-listhead button svg{width:14px;height:14px}
.mp-list{display:flex;flex-direction:column;gap:9px}
.mp-item{width:100%;text-align:left;padding:9px 11px;border:1px solid #E0E0E6;
  border-radius:3px;background:#fff;cursor:pointer;
  transition:border-color var(--md-dur-short) var(--md-ease-standard)}
.mp-item b{display:block;font-family:var(--md-font-brand);font-weight:700;font-size:10px;
  color:var(--md-on-surface)}
.mp-item span{display:block;font-size:8px;color:var(--md-on-surface-variant)}
.mp-item:hover{border-color:#B8B8C0}
.mp-item.is-sel{border-color:#4B3FE4;border-width:1.5px;border-radius:5px}
.mp-item:focus-visible{outline:2px solid #4B3FE4;outline-offset:1px}
.mp-more{display:inline-flex;align-items:center;gap:5px;margin-top:12px;border:0;
  background:none;padding:0;font-family:var(--md-font-brand);font-weight:700;
  font-size:10px;color:#4B3FE4;text-decoration:underline;text-underline-offset:2px;
  cursor:pointer}
.mp-more svg{width:11px;height:11px}

/* the locator frame keeps the map at 16:9 with its controls */
.mp-loc .mp-frame{aspect-ratio:16/9}
.mp-loc-col{min-width:0}

/* redlines */
.mp-red{position:relative}
.mp-red-h{position:absolute;left:-10px;right:-10px;border-top:1px solid #F5325B;
  pointer-events:none;z-index:3}
.mp-red-v{position:absolute;top:-14px;bottom:-14px;border-left:1px solid #F5325B;
  pointer-events:none;z-index:3}
.mp-red-t{position:absolute;z-index:4;padding:0 2px;color:#F5325B;
  font-family:var(--md-font-plain);font-size:7px;background:#fff}

@container (max-width:820px){
  .mp-loc-grid{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   MODAL POPUP — the ATOM Modal Popup sheet: the app confirmation
   modal, the long-content desktop modal, and the compact two-button
   modal. Scoped to this component.
   ================================================================= */
.mo{--mo-scrim:#4A4A4A; --mo-accent:#00AEEF; --mo-link:#1A4BE0; --mo-ink:#231F20;
  --mo-rule:#E4E4EA}
.mo-sheet{container-type:inline-size}
.mo-row{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}

/* stages */
.mo-stage{position:relative;display:grid;place-items:center;background:var(--mo-scrim)}
.mo-stage--phone{width:250px;height:500px;padding:0 22px;align-items:start;
  padding-top:44px}
.mo-phone-home{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:96px;height:4px;border-radius:999px;background:#fff}
.mo-stage--desktop{width:400px;height:270px;padding:20px}
.mo-stage--dark{width:340px;min-width:340px;height:250px;background:#1B1B1B}

/* the modal surface */
.modal{width:100%;background:#fff;border-radius:14px;overflow:hidden;
  font-family:var(--md-font-plain);box-shadow:0 6px 24px rgba(20,22,46,.18)}
.modal-body{padding:20px 18px 22px;text-align:center}
.modal-art{width:100%;margin:0 auto 6px;max-width:180px}
.modal-art img{display:block;width:100%;height:auto}
.modal-title{margin:0 0 8px;font-family:var(--md-font-brand);font-weight:700;
  font-size:17px;line-height:1.25;color:var(--mo-ink)}
.modal-text{margin:0;font-size:12px;line-height:1.5;color:var(--mo-ink)}
.modal-actions{margin-top:18px;display:flex;flex-direction:column;align-items:center;
  gap:12px}
.mo-btn{display:inline-grid;place-items:center;height:34px;padding:0 20px;
  border:1.5px solid var(--mo-accent);border-radius:999px;background:var(--mo-accent);
  color:#fff;font-family:var(--md-font-brand);font-weight:700;font-size:13px;
  cursor:pointer;transition:filter var(--md-dur-medium) var(--md-ease-standard)}
.mo-btn:hover{filter:brightness(1.06)}
.mo-btn:active{filter:brightness(.94)}
.mo-btn:focus-visible{outline:2px solid var(--mo-link);outline-offset:2px}
.mo-btn--block{width:100%}
.mo-btn--outline{background:#fff;color:var(--mo-accent)}
.mo-btn--sm{height:24px;padding:0 14px;font-size:9px;border-width:1px}
.mo-link{background:none;border:0;padding:2px;font-family:var(--md-font-brand);
  font-weight:700;font-size:12px;color:var(--mo-link);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}

/* long-content variant */
.modal--doc{display:flex;flex-direction:column;max-height:100%;border-radius:6px}
.modal-head{position:relative;flex:0 0 auto;padding:14px 34px 8px 16px}
.modal-head h4{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:12px;
  color:var(--mo-ink)}
.modal-close{position:absolute;top:11px;right:11px;display:grid;place-items:center;
  width:20px;height:20px;border:0;border-radius:50%;background:none;color:#3C3C43;
  cursor:pointer}
.modal-close svg{width:13px;height:13px}
.modal-close:hover{background:#F1F1F4}
.modal-scroll{flex:1 1 auto;overflow-y:auto;padding:0 16px 12px;
  font-size:5.4px;line-height:1.5;color:#4A4A52;text-align:justify}
.modal-scroll p{margin:0 0 7px}
.modal-foot{flex:0 0 auto;display:flex;justify-content:center;padding:9px 16px;
  border-top:1px solid var(--mo-rule)}

/* compact two-button variant */
.modal--compact{border-radius:6px}
.modal--compact .modal-body{padding:12px 14px 12px}
.modal--compact .modal-text{font-size:5.4px;line-height:1.55}
.modal--compact .modal-actions{margin-top:12px;flex-direction:row;gap:8px}
.modal--compact .mo-btn{flex:1 1 0}

.mo-cap{margin:10px 0 0;font-size:var(--md-label-medium);
  color:var(--md-on-surface-variant)}

@container (max-width:400px){
  .mo-stage--desktop{width:100%;max-width:400px}
  .mo-stage--dark{width:100%;min-width:0;max-width:340px}
}

/* =================================================================
   NOTIFICATION — the ATOM Notification Component sheet: four
   semantic tints across four content patterns, mobile and desktop.
   ================================================================= */
.nt{--nt-ink:#231F20; --nt-msg:#3C3C43; --nt-link:#1A4BE0; --nt-btn:#00AEEF;
  --nt-stage:#DEDEDE}
.nt-sheet{container-type:inline-size}

/* the component */
.notif{display:flex;align-items:flex-start;gap:7px;padding:9px 10px;
  border-radius:4px;background:#fff;border:1px solid #E4E4EA;
  font-family:var(--md-font-plain)}
.notif-ic{flex:0 0 auto;display:grid;place-items:center;width:11px;height:11px;
  margin-top:1px;color:var(--nt-ink)}
.notif-ic svg{width:11px;height:11px;stroke-width:2}
.notif-body{min-width:0;flex:1 1 auto}
.notif-t{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:8px;
  line-height:1.4;color:var(--nt-ink)}
.notif-m{margin:0;font-size:6.5px;line-height:1.45;color:var(--nt-msg)}
.notif-list{margin:1px 0 0;padding-left:9px;font-size:6.5px;line-height:1.5;
  color:var(--nt-msg)}
.notif-link{display:inline-block;margin-top:4px;font-family:var(--md-font-brand);
  font-weight:700;font-size:7px;color:var(--nt-link);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;background:none;border:0;padding:0}
.notif-link:hover{filter:brightness(1.25)}
.notif-btn{margin-top:6px;display:inline-grid;place-items:center;height:15px;
  min-width:74px;padding:0 12px;border:0;border-radius:999px;background:var(--nt-btn);
  color:#fff;font-family:var(--md-font-brand);font-weight:700;font-size:7px;
  cursor:pointer;transition:filter var(--md-dur-medium) var(--md-ease-standard)}
.notif-btn:hover{filter:brightness(1.08)}
.notif-btn:active{filter:brightness(.92)}
.notif-btn:focus-visible{outline:2px solid var(--nt-link);outline-offset:2px}
.notif-btn:disabled{background:color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);cursor:not-allowed;
  filter:none}

/* semantic tints */
.notif--neutral{background:#fff;border-color:#E4E4EA}
.notif--alert{background:#FCE0E2;border-color:transparent}
.notif--info{background:#DEF3FC;border-color:transparent}
.notif--warning{background:#F4FAC7;border-color:transparent}
.notif--alert .notif-ic{color:#C7344A}
.notif--info .notif-ic{color:#1B7FB0}
.notif--warning .notif-ic{color:#8A8A2E}

/* the sheet stage */
.nt-stage{padding:16px 14px 20px;background:var(--nt-stage);border-radius:2px}
.nt-cap{margin:0 0 12px;font-family:var(--md-font-plain);font-size:15px;
  color:#231F20}
.nt-cap--sub{margin-top:22px}
.nt-grid{display:grid;gap:16px 22px;align-items:start}
.nt-grid--mobile{grid-template-columns:repeat(4,minmax(0,1fr))}
.nt-grid--desktop{grid-template-columns:minmax(0,1fr)}
.nt-grid--desktop .nt-drow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px}
.nt-drow + .nt-drow{margin-top:22px}

@container (max-width:720px){
  .nt-grid--mobile{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nt-grid--desktop .nt-drow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:420px){
  .nt-grid--mobile,.nt-grid--desktop .nt-drow{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   NAVIGATION VARIANTS — the ATOM Navigation Component sheet: six
   top-app-bar variants and the bottom navigation matrix.
   ================================================================= */
.nv{--nv-stage:#D9D9D9; --nv-ink:#231F20; --nv-blue:#0A84FF; --nv-link:#1A4BE0;
  --nv-muted:#3C3C43; --nv-badge:#F5325B}
.nv-sheet{container-type:inline-size}
.nv-stage{padding:18px 16px 22px;background:var(--nv-stage)}

.nv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px}
.nv-vh{margin:0 0 2px;font-family:var(--md-font-brand);font-weight:700;font-size:17px;
  color:#5A5A60}
.nv-vs{margin:0 0 10px;font-family:var(--md-font-plain);font-size:8px;color:#5A5A60}

/* ---- phone chrome ---------------------------------------------- */
.nv-phone{background:#fff;overflow:hidden}
.nv-status{display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px 3px;font-family:var(--md-font-plain);font-weight:600;font-size:9px;
  color:var(--nv-ink)}
.nv-status-r{display:flex;align-items:center;gap:3px}
.nv-status-r svg{width:9px;height:9px}
.nv-batt{width:15px;height:8px;border-radius:2px;background:var(--nv-ink)}

.nv-bar{position:relative;display:flex;align-items:center;gap:8px;
  padding:6px 11px 11px;min-height:28px}
.nv-back{flex:0 0 auto;display:grid;place-items:center;width:16px;height:16px;
  border:0;background:none;color:var(--nv-ink);cursor:pointer}
.nv-back svg{width:15px;height:15px}
.nv-title{flex:1 1 auto;text-align:center;font-family:var(--md-font-brand);
  font-weight:700;font-size:10px;color:var(--nv-ink)}
.nv-title--icon{display:flex;align-items:center;justify-content:center;gap:4px}
.nv-title--icon svg{width:11px;height:11px}
.nv-acts{flex:0 0 auto;display:flex;align-items:center;gap:9px}
.nv-acts button{display:grid;place-items:center;width:14px;height:14px;border:0;
  background:none;color:var(--nv-ink);cursor:pointer}
.nv-acts svg{width:13px;height:13px}
.nv-acts button:hover{color:var(--nv-blue)}
.nv-link{flex:0 0 auto;border:0;background:none;padding:0;
  font-family:var(--md-font-brand);font-weight:700;font-size:9px;color:var(--nv-link);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.nv-spacer{flex:1 1 auto}
.nv-badge{display:inline-grid;place-items:center;min-width:15px;height:10px;
  padding:0 3px;border-radius:999px;background:var(--nv-badge);color:#fff;
  font-family:var(--md-font-plain);font-weight:600;font-size:6px;
  transform:translate(-3px,-5px)}

/* image-background variant */
.nv-phone--img{position:relative;color:#fff;
  background:linear-gradient(90deg,#4A4A4A,#8E8E8E 45%,#C9C9C9)}
.nv-phone--img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12));pointer-events:none}
.nv-phone--img > *{position:relative;z-index:1}
.nv-phone--img .nv-status,.nv-phone--img .nv-back,.nv-phone--img .nv-title{color:#fff}
.nv-phone--img .nv-batt{background:#fff}

/* ---- bottom navigation ----------------------------------------- */
.nv-bottom{background:#fff}
.nv-tabs{display:grid;padding:7px 0 6px}
.nv-tab{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;
  background:none;cursor:pointer;color:var(--nv-muted);
  font-family:var(--md-font-plain);font-size:6.5px;line-height:1}
.nv-tab svg{width:13px;height:13px;stroke-width:1.9}
.nv-tab.is-active{color:var(--nv-blue)}
.nv-tab.is-active svg{fill:currentColor;stroke:currentColor}
.nv-tab:hover{color:var(--nv-blue)}
.nv-tab:focus-visible{outline:2px solid var(--nv-link);outline-offset:1px}
.nv-tab:disabled{color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  cursor:not-allowed}

/* raised centre action */
.nv-fab{display:grid;place-items:center;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;background:var(--nv-blue);color:#FFC24A;
  box-shadow:0 2px 5px rgba(0,0,0,.28)}
.nv-fab svg{width:13px;height:13px;fill:currentColor;stroke:currentColor}

/* device chrome under the bar */
.nv-home{display:flex;justify-content:center;padding:2px 0 5px}
.nv-home i{display:block;width:78px;height:2.5px;border-radius:999px;background:#231F20}
.nv-android{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;
  padding:5px 0;background:#C9C9C9;color:#3C3C43}
.nv-android svg{width:9px;height:9px}
.nv-android span{font-family:var(--md-font-plain);font-size:8px;letter-spacing:.1em}

.nv-brow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;
  margin-top:26px;align-items:start}

@container (max-width:760px){
  .nv-cols,.nv-brow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:430px){
  .nv-cols,.nv-brow{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   RATING · RIBBON · SECTION DIVIDER
   Built from the ATOM Rating, Ribbon & Section divider sheet.
   ================================================================= */
.rr{--rr-star:#F5A623; --rr-star-off:#C9C9CE; --rr-count:#6F6F76;
  --rr-pink:#E8285F; --rr-blue:#1A6FE0; --rr-pink-bg:#FCE4EC; --rr-blue-bg:#E1F1FB;
  --rr-rule:#4A4A52; --rr-label:#4A4A52; --rr-stage:#D9D9D9}
.rr-sheet{container-type:inline-size}
.rr-stage{padding:18px 16px 22px;background:var(--rr-stage)}
.rr-h{margin:0 0 12px;font-family:var(--md-font-brand);font-weight:700;font-size:29px;
  color:#5A5A60}
.rr-h--sub{margin-top:30px}
.rr-plate{display:inline-block;padding:9px 11px;background:#fff;
  border:1px dashed #9A7BE0}
.rr-plates{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}

/* ---- rating ------------------------------------------------------ */
.rating{display:inline-flex;align-items:center;gap:5px}
.rating-stars{display:inline-flex;align-items:center;gap:1px;color:var(--rr-star)}
.rating-stars svg{width:9px;height:9px;fill:currentColor;stroke:currentColor}
.rating-stars .is-off{color:var(--rr-star-off)}
.rating-half{position:relative;display:inline-grid;color:var(--rr-star-off)}
.rating-half > span{position:absolute;inset:0;width:50%;overflow:hidden;
  color:var(--rr-star)}
.rating-half > span svg{width:9px;height:9px}
.rating-count{font-family:var(--md-font-plain);font-size:7px;color:var(--rr-count)}
.rating--lg .rating-stars svg,.rating--lg .rating-half > span svg{width:11px;height:11px}
.rating--lg .rating-count{font-size:8px}

/* ---- ribbon ------------------------------------------------------ */
.ribbon{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--md-font-brand);font-size:7px;line-height:1.4}
.ribbon--pink{color:var(--rr-pink)}
.ribbon--blue{color:var(--rr-blue)}
.ribbon--reg{font-weight:400}
.ribbon--bold{font-weight:700}
.ribbon-ic{display:grid;place-items:center;width:15px;height:15px;border-radius:4px}
.ribbon-ic svg{width:9px;height:9px}
.ribbon--pink .ribbon-ic{background:var(--rr-pink-bg);color:var(--rr-pink)}
.ribbon--blue .ribbon-ic{background:var(--rr-blue-bg);color:var(--rr-blue)}
.rr-ribbons{display:flex;flex-direction:column;gap:14px}
.rr-ribbons--icon{gap:11px}

/* ---- section divider --------------------------------------------- */
.sdiv{display:flex;align-items:center;gap:11px;width:100%}
.sdiv::before,.sdiv::after{content:'';height:1px;background:var(--rr-rule)}
.sdiv::before{flex:0 0 auto;width:88px}
.sdiv::after{flex:1 1 auto}
.sdiv span{flex:0 0 auto;font-family:var(--md-font-plain);font-size:6px;
  letter-spacing:.14em;color:var(--rr-label);text-transform:uppercase}
.sdiv--center::before{flex:1 1 auto;width:auto}
.rr-divs{display:flex;flex-direction:column;gap:14px;padding:11px 13px;background:#fff;
  border:1px dashed #9A7BE0}

@container (max-width:520px){
  .sdiv::before{width:44px}
}

/* ---- attached file rows ------------------------------------------ */
.rr-files{display:flex;flex-direction:column;gap:12px;max-width:262px}
.rr-file{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:6px;
  background:#fff;font-family:var(--md-font-plain)}
.rr-file > .md-i{flex:0 0 auto;width:13px;height:13px;color:#6F6F76}
.rr-file span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:11px;color:#231F20}
.rr-file button{flex:0 0 auto;display:grid;place-items:center;width:16px;height:16px;
  border:0;border-radius:50%;background:none;color:#4A4A52;cursor:pointer}
.rr-file button svg{width:12px;height:12px}
.rr-file button:hover{background:color-mix(in srgb,#231F20 8%,transparent)}
.rr-file button:focus-visible{outline:2px solid var(--rr-blue);outline-offset:1px}
.rr-file--error{background:#FDEBEF}
.rr-file--error span{color:#F5325B}
.rr-file--error button{color:#F5325B}
.rr-file--error button:hover{background:color-mix(in srgb,#F5325B 10%,transparent)}

/* =================================================================
   PAGINATION — the ATOM Pagination Component sheet: range summary,
   page input states, page-size select, chevron pairs, and the
   bordered numbered bar with Go.
   ================================================================= */
.pg{--pg-ink:#231F20; --pg-muted:#6F6F76; --pg-fill:#F1F1F4; --pg-bd:#D9D9DF;
  --pg-focus:#8B6FE8; --pg-sel:#EFEBFB; --pg-rule:#E4E4EA}
.pg-sheet{container-type:inline-size}
.pg-plate{padding:16px 18px;border:1px dashed #C9B8F0;border-radius:2px;background:#fff}
.pg-plate + .pg-plate{margin-top:18px}
.pg-stack{display:flex;flex-direction:column;gap:14px}
.pg-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.pg-row--split{justify-content:space-between}
.pg-group{display:flex;align-items:center;gap:9px}

.pg-summary{font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink)}
.pg-of{font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink)}

/* page number input */
.pg-num{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 7px;
  border:1px solid transparent;border-radius:4px;background:var(--pg-fill);
  font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink);cursor:text}
.pg-num--focus{background:#fff;border-color:var(--pg-focus)}
.pg-num--focus::after{content:'';display:inline-block;width:1px;height:12px;
  margin-left:1px;background:var(--pg-ink);animation:pgCaret 1s step-end infinite}
.pg-num--bare{background:none;border-color:transparent}
@keyframes pgCaret{50%{opacity:0}}

/* page-size select */
.pg-sel{position:relative;display:inline-flex;align-items:center;gap:14px;height:28px;
  padding:0 9px;border:1px solid transparent;border-radius:4px;background:var(--pg-fill);
  font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink);cursor:pointer}
.pg-sel svg{width:13px;height:13px;color:var(--pg-muted)}
.pg-sel--bare{background:none}
.pg-sel--open{background:#fff;border-color:var(--pg-focus)}
.pg-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:107px;padding:4px 0;
  background:#fff;border-radius:4px;box-shadow:0 3px 12px rgba(20,22,46,.16);z-index:2}
.pg-menu button{display:block;width:100%;padding:6px 12px;border:0;background:none;
  text-align:left;font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink);
  cursor:pointer}
.pg-menu button:hover{background:#F5F3FC}
.pg-menu button.is-sel{background:var(--pg-sel)}

/* chevron controls */
.pg-nav{display:grid;place-items:center;width:22px;height:22px;border:0;
  border-radius:4px;background:none;color:var(--pg-muted);cursor:pointer}
.pg-nav svg{width:13px;height:13px}
.pg-nav:hover{background:var(--pg-fill);color:var(--pg-ink)}
.pg-nav:focus-visible{outline:2px solid var(--pg-focus);outline-offset:1px}
.pg-nav:disabled{color:color-mix(in srgb,var(--pg-ink) 30%,transparent);cursor:not-allowed;
  background:none}
.pg-nav--lg{width:26px;height:26px}
.pg-nav--lg svg{width:15px;height:15px}

/* bordered control cells */
.pg-cell{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;
  border:1px solid var(--pg-bd);border-radius:4px;background:#fff;
  font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink);cursor:pointer}
.pg-cell svg{width:12px;height:12px;color:var(--pg-muted)}
.pg-cell:hover{border-color:var(--pg-focus)}
.pg-cell:focus-visible{outline:2px solid var(--pg-focus);outline-offset:1px}
.pg-cell.is-active{border-color:var(--pg-focus);color:var(--pg-focus)}
.pg-cell:disabled{color:color-mix(in srgb,var(--pg-ink) 30%,transparent);
  border-color:var(--pg-rule);cursor:not-allowed}
.pg-cell:disabled svg{color:color-mix(in srgb,var(--pg-ink) 30%,transparent)}
.pg-cell--sel{gap:5px;grid-auto-flow:column;padding:0 7px}
.pg-cell--sel svg{width:9px;height:9px}
.pg-go{width:48px;height:26px;padding:0 6px;border:1px solid var(--pg-bd);
  border-radius:4px;background:#fff;font-family:var(--md-font-plain);font-size:11px;
  color:var(--pg-ink)}
.pg-go:focus{outline:none;border-color:var(--pg-focus)}
.pg-cells{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pg-lab{font-family:var(--md-font-plain);font-size:11px;color:var(--pg-ink)}

@container (max-width:520px){
  .pg-row--split{gap:12px}
}

/* =================================================================
   SELECTION TABLE — the ATOM Table Component sheet: a two-column
   selectable table, redlined on mobile and full-width on desktop.
   ================================================================= */
.tb{--tb-stage:#D9D9D9; --tb-ink:#231F20; --tb-head:#EDEDEF; --tb-rule:#EDEDF0;
  --tb-sel:#EAF6FD; --tb-check:#1AA3F0; --tb-red:#F5325B}
.tb-sheet{container-type:inline-size}
.tb-stage{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:30px;
  padding:20px 22px 26px;background:var(--tb-stage)}
.tb-cap{margin:0 0 16px;font-family:var(--md-font-brand);font-weight:700;font-size:20px;
  color:#5A5A60}

/* the table */
.tb-card{background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px rgba(20,22,46,.10)}
.tb-card--lg{border-radius:16px}
.tb-tbl{width:100%;border-collapse:collapse;font-family:var(--md-font-plain);
  table-layout:fixed}
.tb-tbl thead th{padding:12px 8px;background:var(--tb-head);text-align:left;
  font-family:var(--md-font-brand);font-weight:700;font-size:11px;color:var(--tb-ink)}
.tb-tbl tbody td{padding:12px 8px;font-size:11px;line-height:1.35;color:var(--tb-ink);
  vertical-align:middle}
.tb-tbl tbody tr td{border-bottom:1px solid var(--tb-rule)}
.tb-tbl tbody tr:last-child td{border-bottom:0}
.tb-tbl tbody tr.is-sel td{background:var(--tb-sel)}
.tb-tbl tbody tr:hover td{background:#F7F7FA}
.tb-tbl tbody tr.is-sel:hover td{background:#E1F1FB}
.tb-col-check{width:44px;padding-left:16px !important}
.tb-tbl--lg thead th{padding:20px 10px;font-size:15px}
.tb-tbl--lg tbody td{padding:22px 10px;font-size:15px}
.tb-tbl--lg .tb-col-check{width:74px;padding-left:30px !important}
/* the desktop rule is segmented per column, with a gutter between */
.tb-tbl--lg tbody td{border-bottom-color:#F0F0F3}
.tb-tbl--lg tbody td.tb-col-check{border-bottom:0}
.tb-tbl--lg tbody td.tb-c-brn{border-bottom-width:1px}

/* checkbox */
.tb-chk{appearance:none;-webkit-appearance:none;display:block;width:17px;height:17px;
  margin:0;border:1px solid #D2D2D8;border-radius:4px;background:#fff;cursor:pointer;
  position:relative;transition:background var(--md-dur-short) var(--md-ease-standard)}
.tb-chk:checked{background:var(--tb-check);border-color:var(--tb-check)}
.tb-chk:checked::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tb-chk:focus-visible{outline:2px solid var(--tb-check);outline-offset:2px}
.tb-chk:disabled{background:#F1F1F4;border-color:#E4E4EA;cursor:not-allowed}
.tb-tbl--lg .tb-chk{width:23px;height:23px;border-radius:5px}
.tb-tbl--lg .tb-chk:checked::after{left:7px;top:3px;width:6px;height:12px}

/* redlines */
/* the wrapper reserves the annotation gutters so nothing spills into
   the neighbouring grid item */
.tb-red{position:relative;padding:14px 26px 74px 0}
.tb-red-v,.tb-red-h{position:absolute;pointer-events:none;z-index:3}
.tb-red-v{top:0;bottom:58px;border-left:1px dashed var(--tb-red)}
.tb-red-h{left:-12px;right:2px;border-top:1px dashed var(--tb-red)}
.tb-tag{position:absolute;z-index:4;padding:1px 3px;border-radius:2px;
  background:var(--tb-red);color:#fff;font-family:var(--md-font-plain);font-size:6px;
  line-height:1.3}

@container (max-width:820px){
  .tb-stage{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   TAB VARIANTS — the ATOM Tab Component sheet: filled pill,
   outlined pill, icon card, underline, subtitle and icon-above tabs.
   ================================================================= */
.tx{--tx-cyan:#12B0F0; --tx-blue:#0A9BE0; --tx-ink:#231F20; --tx-muted:#6F6F76;
  --tx-bd:#E0E0E6; --tx-stage:#D9D9D9}
.tx-sheet{container-type:inline-size}
.tx-stage{padding:18px;background:var(--tx-stage)}
.tx-frame{padding:16px;border:1px dashed #9A7BE0}
.tx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:start}
.tx-col{display:flex;flex-direction:column;gap:14px}

/* the bar */
.txbar{display:flex;align-items:center;background:#fff;border-radius:2px;
  font-family:var(--md-font-plain)}
.txbar--pad{padding:9px 12px;gap:10px}
.txtab{flex:1 1 0;display:grid;place-items:center;min-width:0;padding:7px 10px;
  border:0;background:none;border-radius:999px;cursor:pointer;
  font-family:var(--md-font-brand);font-weight:400;font-size:10px;color:var(--tx-muted);
  white-space:nowrap;transition:background var(--md-dur-short) var(--md-ease-standard),
    color var(--md-dur-short) var(--md-ease-standard)}
.txtab:hover{color:var(--tx-ink)}
.txtab:focus-visible{outline:2px solid var(--tx-cyan);outline-offset:1px}
.txtab:disabled{color:color-mix(in srgb,var(--tx-ink) 38%,transparent);cursor:not-allowed}

/* filled pill */
.txtab--fill.is-active{background:var(--tx-cyan);color:#fff;font-weight:700}
/* outlined pill */
.txtab--out.is-active{box-shadow:inset 0 0 0 1px var(--tx-cyan);color:var(--tx-cyan);
  font-weight:700}

/* icon card */
.txcards{display:flex;gap:11px;padding:11px 12px;background:#fff;border-radius:2px;
  overflow-x:auto;scrollbar-width:none}
.txcards::-webkit-scrollbar{display:none}
.txcard{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:88px;padding:9px 10px;border:1px solid var(--tx-bd);border-radius:5px;
  background:#fff;cursor:pointer;font-family:var(--md-font-brand);font-weight:400;
  font-size:9px;color:var(--tx-muted)}
.txcard svg{width:13px;height:13px;color:var(--tx-muted)}
.txcard:hover{border-color:#C4C4CC}
.txcard.is-active{border-color:var(--tx-cyan);color:var(--tx-cyan);font-weight:700}
.txcard.is-active svg{color:var(--tx-cyan)}
.txcard:focus-visible{outline:2px solid var(--tx-cyan);outline-offset:1px}

/* underline */
.txbar--rule{padding:0}
.txtab--rule{position:relative;border-radius:0;padding:11px 12px}
.txtab--rule::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:transparent}
.txtab--rule.is-active{color:var(--tx-cyan);font-weight:700}
.txtab--rule.is-active::after{background:var(--tx-cyan)}

/* subtitle */
.txtab--sub{flex-direction:column;gap:2px;padding:9px 10px;place-items:start}
.txtab--sub b{font-weight:700;font-size:9px}
.txtab--sub span{font-weight:400;font-size:8px;color:var(--tx-muted)}
.txtab--sub.is-active b{color:var(--tx-cyan)}
.txtab--sub.is-active span{color:var(--tx-cyan)}

/* icon above */
.txtab--ico{flex-direction:column;gap:5px;padding:8px 10px}
.txtab--ico .txtab-ic{display:grid;place-items:center;width:15px;height:15px;
  border-radius:50%;border:1px solid currentColor}
.txtab--ico .txtab-ic svg{width:9px;height:9px}
.txtab--ico.is-active{color:var(--tx-cyan);font-weight:700}

.tx-lo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  margin-top:16px;align-items:start}

@container (max-width:820px){
  .tx-cols{grid-template-columns:minmax(0,1fr)}
  .tx-lo{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   TREE — the ATOM Tree Component sheet: caret and square toggles,
   with or without checkboxes, folder icons, guide lines,
   connector ticks and a drag handle.
   ================================================================= */
.tr{--tr-ink:#231F20; --tr-muted:#5A5A60; --tr-line:#C9C9CE; --tr-check:#2449FB;
  --tr-bd:#B4B4BC}
.tr-sheet{container-type:inline-size}
.tr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px;
  align-items:start}

.tree{font-family:var(--md-font-plain);font-size:11px;color:var(--tr-ink)}
.tr-row{position:relative;display:flex;align-items:center;gap:5px;height:21px}
.tr-row:hover .tr-label{color:#000}
.tr-row.is-sel .tr-label{font-weight:600}

/* toggle */
.tr-tog{flex:0 0 auto;display:grid;place-items:center;width:13px;height:13px;border:0;
  background:none;color:var(--tr-muted);cursor:pointer;padding:0}
.tr-tog svg{width:9px;height:9px;fill:currentColor;stroke:currentColor}
.tr-tog:hover{color:#000}
.tr-tog:focus-visible{outline:1px solid var(--tr-check);outline-offset:1px}
.tr-tog--sq{width:11px;height:11px;border:1px solid var(--tr-line);border-radius:1px;
  font-family:var(--md-font-plain);font-size:9px;line-height:1;color:var(--tr-muted)}
.tr-tog--sq svg{width:7px;height:7px;fill:none}
.tr-pad{flex:0 0 auto;width:13px}

/* checkbox */
.tr-chk{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:13px;height:13px;
  margin:0;border:1px solid var(--tr-bd);border-radius:2px;background:#fff;
  position:relative;cursor:pointer}
.tr-chk:checked{background:var(--tr-check);border-color:var(--tr-check)}
.tr-chk:checked::after{content:'';position:absolute;left:4px;top:1.5px;width:3.5px;
  height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.tr-chk:indeterminate{background:var(--tr-check);border-color:var(--tr-check)}
.tr-chk:indeterminate::after{content:'';position:absolute;left:2px;top:5px;width:7px;
  height:1.6px;background:#fff;transform:none;border:0}
.tr-chk:focus-visible{outline:2px solid var(--tr-check);outline-offset:1px}
.tr-chk:disabled{background:#F1F1F4;border-color:#E0E0E6;cursor:not-allowed}

.tr-ic{flex:0 0 auto;display:grid;place-items:center;width:13px;height:13px;
  color:var(--tr-muted)}
.tr-ic svg{width:12px;height:12px}
.tr-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-grip{flex:0 0 auto;display:grid;place-items:center;width:11px;height:13px;
  color:#B4B4BC;cursor:grab}
.tr-grip svg{width:9px;height:9px}

/* indentation */
.tr-d1{padding-left:18px}
.tr-d2{padding-left:36px}

/* vertical guide lines */
.tree--guides .tr-d1::before{content:'';position:absolute;left:6px;top:0;bottom:0;
  border-left:1px solid var(--tr-line)}
.tree--guides .tr-d2::before{content:'';position:absolute;left:24px;top:0;bottom:0;
  border-left:1px solid var(--tr-line)}
/* connector ticks: the guide plus a horizontal stub into the row */
.tree--conn .tr-d1::before{content:'';position:absolute;left:6px;top:0;bottom:0;
  border-left:1px solid var(--tr-line)}
.tree--conn .tr-d1.is-leaf::after{content:'';position:absolute;left:6px;top:50%;
  width:8px;border-top:1px solid var(--tr-line)}

@container (max-width:900px){
  .tr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:480px){
  .tr-grid{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   VOUCHER — the ATOM Voucher Component sheet: a media voucher with
   a tag, and a selectable perforated ticket. Mobile and desktop.
   ================================================================= */
.vc{--vc-ink:#231F20; --vc-muted:#6F6F76; --vc-pink:#E8285F; --vc-expire:#F5325B;
  --vc-check:#1AA3F0; --vc-perf:#C9C9CE; --vc-off:#EDEDF0; --vc-stage:#C6C4D6}
.vc-sheet{container-type:inline-size}
.vc-stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px;
  padding:20px 22px 26px;background:var(--vc-stage);align-items:start}
.vc-cap{margin:0 0 14px;font-family:var(--md-font-brand);font-weight:700;font-size:15px;
  color:#4A4A52}
.vc-col{display:flex;flex-direction:column;gap:16px}

/* ---- media voucher ---------------------------------------------- */
.vch{position:relative;display:flex;align-items:stretch;margin:7px 0;padding-left:82px;
  background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(20,22,46,.14);
  font-family:var(--md-font-plain)}
.vch-media{position:absolute;left:0;top:-7px;bottom:-7px;z-index:1;width:88px;
  border-radius:6px;overflow:hidden}
.vch-media img{display:block;width:100%;height:100%;object-fit:cover}
.vch-media--navy{display:grid;place-items:center;background:#122A52;color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:8px;letter-spacing:.02em;
  text-align:center;padding:0 6px}
.vch-tag{position:absolute;left:0;right:0;bottom:0;padding:3px 0;background:var(--vc-check);
  color:#fff;font-family:var(--md-font-brand);font-weight:700;font-size:8px;
  text-align:center}
.vch-tag--navy{background:#0E2246}
.vch-body{flex:1 1 auto;min-width:0;padding:11px 13px;display:flex;
  flex-direction:column;gap:5px;justify-content:center}
.vch-title{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:11px;
  line-height:1.35;color:var(--vc-ink);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.vch-meta{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--vc-muted)}
.vch-meta svg{width:10px;height:10px}
.vch-meta--warn{color:var(--vc-expire)}
.vch--lg{border-radius:8px}
.vch--lg{margin:9px 0;padding-left:124px}
.vch--lg .vch-media{width:130px;top:-9px;bottom:-9px}
.vch--lg .vch-media--navy{font-size:11px}
.vch--lg .vch-tag{font-size:10px;padding:4px 0}
.vch--lg .vch-body{padding:16px 18px;gap:7px}
.vch--lg .vch-title{font-size:14px}
.vch--lg .vch-meta{font-size:11px}

/* ---- perforated ticket ------------------------------------------- */
.vtk{position:relative;display:flex;align-items:stretch;background:#fff;border-radius:6px;
  box-shadow:0 1px 4px rgba(20,22,46,.14);font-family:var(--md-font-plain);
  overflow:hidden}
.vtk-body{flex:1 1 auto;min-width:0;padding:12px 14px;display:flex;flex-direction:column;
  gap:3px}
.vtk-ribbon{font-family:var(--md-font-brand);font-weight:700;font-size:9px;
  color:var(--vc-pink)}
.vtk-title{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:11px;
  color:var(--vc-ink)}
.vtk-exp{font-size:9px;color:var(--vc-muted)}
.vtk-side{flex:0 0 auto;display:grid;place-items:center;width:76px;
  border-left:1px dashed var(--vc-perf)}
/* the two notches that make the perforation read as a tear line */
.vtk-notch{position:absolute;right:76px;width:11px;height:11px;border-radius:50%;
  background:var(--vc-stage);transform:translateX(50%);z-index:1}
.vtk-notch--t{top:-5.5px}
.vtk-notch--b{bottom:-5.5px}
.vtk-chk{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:0;
  border:1px solid #D2D2D8;border-radius:4px;background:#fff;position:relative;
  cursor:pointer}
.vtk-chk:checked{background:var(--vc-check);border-color:var(--vc-check)}
.vtk-chk:checked::after{content:'';position:absolute;left:6px;top:2.5px;width:5px;
  height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vtk-chk:focus-visible{outline:2px solid var(--vc-check);outline-offset:2px}
.vtk-chk:disabled{background:#fff;border-color:#DCDCE2;cursor:not-allowed}
/* spent / expired */
.vtk--off{background:var(--vc-off);box-shadow:none}
.vtk--off .vtk-title,.vtk--off .vtk-exp{color:#9A9AA2}
.vtk--off .vtk-ribbon{color:#E88BA6}
.vtk--lg{border-radius:8px}
.vtk--lg .vtk-body{padding:18px 20px;gap:5px}
.vtk--lg .vtk-ribbon{font-size:11px}
.vtk--lg .vtk-title{font-size:14px}
.vtk--lg .vtk-exp{font-size:11px}
.vtk--lg .vtk-side{width:100px}
.vtk--lg .vtk-notch{right:100px;width:13px;height:13px}
.vtk--lg .vtk-notch--t{top:-6.5px}
.vtk--lg .vtk-notch--b{bottom:-6.5px}
.vtk--lg .vtk-chk{width:23px;height:23px;border-radius:5px}
.vtk--lg .vtk-chk:checked::after{left:7px;top:3px;width:6px;height:12px}

@container (max-width:940px){
  .vc-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:520px){
  .vc-stage{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   HEADER & FOOTER — anatomy, states and responsive behaviour from
   the Header and footer Component sheet, in ATOM's own brand.
   ================================================================= */
.hf{--hf-bar:#2449FB; --hf-bar-alt:#00AAFF; --hf-ink:#fff; --hf-foot:#EDEDF0;
  --hf-foot-ink:#3C3C43; --hf-muted:#6F6F76; --hf-rule:#DCDCE2; --hf-stage:#F4F4F6}
.hf-sheet{container-type:inline-size}
.hf-cap{margin:0 0 8px;font-family:var(--md-font-plain);font-size:11px;
  color:var(--hf-foot-ink)}
.hf-cap--lg{font-family:var(--md-font-brand);font-weight:700;font-size:15px;
  margin-bottom:12px}
.hf-stage{padding:16px 18px 20px;background:var(--hf-stage)}
.hf-stack{display:flex;flex-direction:column;gap:16px}

/* ---- header ------------------------------------------------------ */
.hfbar{position:relative;display:flex;align-items:center;gap:16px;height:34px;
  padding:0 14px;background:var(--hf-bar);color:var(--hf-ink);
  font-family:var(--md-font-plain)}
.hfbar--alt{background:var(--hf-bar-alt)}
.hfbar--scrolled{box-shadow:0 2px 8px rgba(20,22,46,.28)}
.hfbar-logo{flex:0 0 auto;height:13px}
.hfbar-logo img{display:block;height:100%;width:auto}
.hfbar-nav{display:flex;align-items:center;gap:14px}
.hfnav{position:relative;border:0;background:none;padding:2px 0;color:var(--hf-ink);
  font-family:var(--md-font-plain);font-size:9px;cursor:pointer;white-space:nowrap}
.hfnav::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:transparent}
.hfnav:hover::after,.hfnav.is-hover::after{background:#fff}
.hfnav.is-active{font-weight:700}
.hfnav.is-active::after{background:#fff}
.hfnav:focus-visible{outline:1px solid #fff;outline-offset:2px}
.hfnav:disabled{color:rgba(255,255,255,.5);cursor:not-allowed}
.hfbar-sp{flex:1 1 auto}
.hfbar-act{flex:0 0 auto;display:grid;place-items:center;width:15px;height:15px;
  border:1px solid rgba(255,255,255,.85);border-radius:2px;background:none;
  color:var(--hf-ink);cursor:pointer}
.hfbar-act svg{width:9px;height:9px}
.hfbar-act:hover{background:rgba(255,255,255,.16)}

/* hover mega panel — flows below the bar inside the same field */
.hfmenu{background:var(--hf-bar);color:var(--hf-ink);padding:0 14px 10px;
  font-family:var(--md-font-plain);font-size:8px;line-height:1.9}
.hfmenu--alt{background:var(--hf-bar-alt)}
.hfmenu span{display:block;cursor:pointer}
.hfmenu span:hover{text-decoration:underline}
.hfhead{background:var(--hf-bar)}
.hfhead--alt{background:var(--hf-bar-alt)}
.hf-cursor{position:absolute;width:9px;height:9px;color:#fff;pointer-events:none}

/* ---- footer ------------------------------------------------------ */
.hffoot{background:var(--hf-foot);color:var(--hf-foot-ink);
  font-family:var(--md-font-plain)}
.hffoot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.5fr);
  gap:18px;padding:16px 16px 12px}
.hffoot-col h5{margin:0 0 5px;font-family:var(--md-font-brand);font-weight:700;
  font-size:8px;color:var(--hf-foot-ink)}
.hffoot-col a{display:block;font-size:8px;line-height:1.85;color:var(--hf-foot-ink);
  text-decoration:none}
.hffoot-col a:hover{text-decoration:underline}
.hf-stores{display:flex;gap:6px;margin:4px 0 12px}
.hf-store{display:flex;align-items:center;gap:4px;height:19px;padding:0 7px;
  border-radius:3px;background:#000;color:#fff;font-family:var(--md-font-plain);
  font-size:6px;line-height:1.15}
.hf-store svg{width:10px;height:10px}
.hf-store b{display:block;font-size:7px;font-weight:600}
.hf-social{display:flex;gap:6px;margin-top:4px}
.hf-social a{display:grid;place-items:center;width:17px;height:17px;border-radius:5px;
  background:#231F20;color:#fff;font-family:var(--md-font-brand);font-weight:700;
  font-size:8px;line-height:1;text-decoration:none}
.hf-social a:hover{background:var(--hf-bar)}
.hffoot-legal{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 16px;border-top:1px solid var(--hf-rule);font-size:7px;
  color:var(--hf-muted)}
.hffoot-legal a{color:var(--hf-muted);text-decoration:none}
.hffoot-legal a:hover{text-decoration:underline}
.hffoot-legal i{font-style:normal;color:var(--hf-rule)}
.hffoot-legal .hf-sp{flex:1 1 auto}

/* content band between header and footer */
.hf-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  padding:22px 18px;background:#fff}
.hf-band-cell{display:flex;flex-direction:column;align-items:center;gap:11px;
  text-align:center}
.hf-band-cell i{display:block;width:64px;height:64px;border-radius:50%;
  background:#DCDCE0}
.hf-band-cell span{font-family:var(--md-font-plain);font-size:9px;line-height:1.45;
  color:var(--hf-foot-ink)}

/* ---- mobile frames ---------------------------------------------- */
.hf-phones{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.hf-phone{width:164px;background:#fff;overflow:hidden;
  box-shadow:0 1px 5px rgba(20,22,46,.16)}
.hf-status{display:flex;align-items:center;justify-content:space-between;
  padding:5px 9px 3px;background:#7B4FD1;color:#fff;font-family:var(--md-font-plain);
  font-weight:600;font-size:7px}
.hf-status-r{display:flex;align-items:center;gap:2px}
.hf-status-r svg{width:7px;height:7px}
.hf-status-b{width:11px;height:6px;border-radius:1.5px;background:#fff}
.hf-mbar{display:flex;align-items:center;justify-content:space-between;
  padding:6px 9px;background:var(--hf-bar);color:#fff}
.hf-mbar--alt{background:var(--hf-bar-alt)}
.hf-mbar .hfbar-logo{height:11px}
.hf-mbar button{border:0;background:none;color:#fff;display:grid;place-items:center;
  width:13px;height:13px;cursor:pointer}
.hf-mbar svg{width:11px;height:11px}
.hf-hero{padding:12px 12px 18px;text-align:center}
.hf-hero h4{margin:0 0 14px;font-family:var(--md-font-brand);font-weight:700;
  font-size:13px;line-height:1.3;color:var(--hf-ink);color:#231F20}
.hf-hero i{display:block;width:82px;height:82px;margin:0 auto 12px;border-radius:50%;
  background:#DCDCE0}
.hf-hero span{font-family:var(--md-font-plain);font-size:9px;line-height:1.45;
  color:var(--hf-foot-ink)}
/* full-screen menu */
.hf-msheet{background:#3B2BC9;color:#fff;min-height:238px;padding:0 0 12px}
.hf-msheet-top{display:flex;justify-content:flex-end;padding:8px 9px}
.hf-msheet-top button{border:0;background:none;color:#fff;cursor:pointer;
  display:grid;place-items:center;width:13px;height:13px}
.hf-msheet-top svg{width:11px;height:11px}
.hf-mrow{display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;font-family:var(--md-font-plain);font-size:9px;cursor:pointer}
.hf-mrow svg{width:9px;height:9px}
.hf-mrow:hover{background:rgba(255,255,255,.1)}
/* mobile footer stacks */
.hf-mfoot{padding:12px;background:#fff;font-family:var(--md-font-plain)}
.hf-mfoot h5{margin:0 0 4px;font-family:var(--md-font-brand);font-weight:700;
  font-size:8px;color:var(--hf-foot-ink)}
.hf-mfoot a{display:block;font-size:8px;line-height:1.9;color:var(--hf-foot-ink);
  text-decoration:none}
.hf-mfoot .hf-legal{margin-top:10px;font-size:7px;line-height:1.8;color:var(--hf-muted)}
.hf-acc{display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--hf-rule);cursor:pointer;
  font-family:var(--md-font-brand);font-weight:700;font-size:8px;
  color:var(--hf-foot-ink)}
.hf-acc svg{width:9px;height:9px;color:var(--hf-muted)}
.hf-acc-body{padding:2px 0 6px}
.hf-panel{width:164px;padding:14px 13px;background:var(--hf-foot);
  font-family:var(--md-font-plain)}
/* the legal block is separated from the social row by a hairline */
.hf-legal-rule{height:0;margin:12px 0 10px;border-top:1px solid #D2D2D8}
.hf-panel h5{margin:0 0 5px;font-family:var(--md-font-brand);font-weight:700;
  font-size:8px;color:var(--hf-foot-ink)}
.hf-panel .hf-legal{margin:0;font-size:7px;line-height:1.85;color:var(--hf-muted)}
.hf-acc-link{display:block;font-size:8px;line-height:2.35;color:var(--hf-foot-ink);
  text-decoration:none}
.hf-acc-link:hover{text-decoration:underline}

@container (max-width:820px){
  .hffoot-cols{grid-template-columns:minmax(0,1fr)}
  .hf-band{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =================================================================
   SEARCH — the ATOM Search Component sheet: a filled search field,
   the same field inset on a panel, and the focused field with its
   suggested-results list. Mobile and desktop.
   ================================================================= */
.sr{--sr-fill:#F1F1F4; --sr-panel:#F6F6F8; --sr-ink:#231F20; --sr-hint:#9A9AA2;
  --sr-focus:#3B9BE8; --sr-bd:#E0E0E6; --sr-stage:#C6C4D6}
.sr-sheet{container-type:inline-size}
.sr-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:26px 26px;padding:20px 22px 24px;background:var(--sr-stage);align-items:start}
.sr-cap{margin:0 0 14px;font-family:var(--md-font-brand);font-weight:700;font-size:13px;
  color:#231F20}
.sr-sub{margin:0 0 12px;font-family:var(--md-font-plain);font-size:11px;color:#231F20}
.sr-col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* the field */
.srch{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;
  border:1px solid transparent;border-radius:8px;background:var(--sr-fill);
  font-family:var(--md-font-plain);
  transition:border-color var(--md-dur-short) var(--md-ease-standard),
    background var(--md-dur-short) var(--md-ease-standard)}
.srch svg{flex:0 0 auto;width:15px;height:15px;color:#5A5A60}
.srch input{flex:1 1 auto;min-width:0;border:0;background:none;padding:0;
  font-family:var(--md-font-plain);font-size:13px;color:var(--sr-ink)}
.srch input::placeholder{color:var(--sr-hint)}
.srch input:focus{outline:none}
.srch:hover{background:#EAEAEE}
/* inset on a panel: white field on a pale card */
.sr-panel{padding:16px;background:var(--sr-panel);border-radius:2px}
.sr-panel .srch{margin:0 12px;background:#fff;border-color:var(--sr-bd)}
.sr-panel .srch:hover{border-color:#C4C4CC;background:#fff}
/* focused, filled, with a clear control */
.srch--focus{background:#fff;border-color:var(--sr-focus);border-width:1.5px}
.srch--focus input{caret-color:var(--sr-ink)}
.srch-clear{flex:0 0 auto;display:grid;place-items:center;width:17px;height:17px;
  border:0;background:none;padding:0;color:#5A5A60;cursor:pointer}
.srch-clear svg{width:15px;height:15px}
.srch-clear:hover{color:var(--sr-ink)}
.srch-clear:focus-visible{outline:2px solid var(--sr-focus);outline-offset:1px}
.srch--disabled{background:#F5F5F7;cursor:not-allowed}
.srch--disabled input,.srch--disabled svg{color:#B4B4BC}

/* suggested results */
.sr-results{margin-top:9px;padding:14px 0 16px;background:#fff;
  border:1px solid var(--sr-bd);border-radius:8px}
.sr-results-h{margin:0 0 10px;padding:0 18px;font-family:var(--md-font-plain);
  font-size:12px;color:var(--sr-hint)}
.sr-result{display:block;width:100%;text-align:left;padding:8px 18px 8px 30px;border:0;
  background:none;font-family:var(--md-font-plain);font-size:12px;color:var(--sr-ink);
  cursor:pointer}
.sr-result b{font-family:var(--md-font-brand);font-weight:700}
.sr-result:hover{background:#F5F5F8}
.sr-result:focus-visible{outline:2px solid var(--sr-focus);outline-offset:-2px}
/* borderless results, for the case the sheet calls out with a border */
.sr-results--flat{border-color:transparent;box-shadow:0 2px 10px rgba(20,22,46,.12)}

@container (max-width:760px){
  .sr-stage{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   JOURNEY PLAN LIST — plan, add-on, subscription and device cards
   from the Journey Plan List Component sheet.
   ================================================================= */
.jp{--jp-ink:#231F20; --jp-muted:#6F6F76; --jp-cyan:#12B0F0; --jp-link:#1A6FE0;
  --jp-pink:#F5325B; --jp-rule:#E4E4EA; --jp-band:#E8F7FE; --jp-stage:#C6C4D6;
  --jp-chip-bd:#DCDCE2}
.jp-sheet{container-type:inline-size}
.jp-stage{display:flex;flex-direction:column;gap:26px;padding:20px 22px 24px;
  background:var(--jp-stage)}
.jp-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}

/* ---- card shell -------------------------------------------------- */
.jpc{position:relative;display:flex;flex-direction:column;background:#fff;
  border-radius:8px;box-shadow:0 1px 4px rgba(20,22,46,.16);
  font-family:var(--md-font-plain);overflow:hidden}
.jpc-body{padding:13px 14px;display:flex;flex-direction:column;gap:5px}
.jpc-w-lg{width:352px}
.jpc-w-md{width:186px}
.jpc-w-sm{width:166px}
.jpc-w-row{width:352px}
.jpc-ribbon{position:absolute;top:0;right:0;z-index:2;padding:3px 8px;
  border-radius:0 8px 0 8px;background:var(--jp-pink);color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:9px}
.jpc-eyebrow{font-family:var(--md-font-brand);font-weight:700;font-size:10px;
  color:var(--jp-ink)}
.jpc-hero{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:22px;
  line-height:1.1;color:var(--jp-ink)}
.jpc-title{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:15px;
  line-height:1.2;color:var(--jp-ink)}
.jpc-title--sm{font-size:12px}
.jpc-sub{margin:0;font-size:11px;line-height:1.45;color:var(--jp-muted)}
.jpc-sub--ink{color:var(--jp-ink)}
.jpc-meta{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--jp-muted)}
.jpc-meta svg{width:11px;height:11px}
.jpc-rule{height:0;margin:9px 0;border-top:1px solid var(--jp-rule)}
.jpc-link{align-self:flex-start;border:0;background:none;padding:0;
  font-family:var(--md-font-brand);font-weight:700;font-size:11px;color:var(--jp-link);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.jpc-price{font-family:var(--md-font-brand);font-weight:700;font-size:17px;
  color:var(--jp-ink)}
.jpc-price--sm{font-size:15px}
.jpc-from{font-size:10px;color:var(--jp-muted)}
.jpc-was{font-size:11px;color:#9A9AA2;text-decoration:line-through}
.jpc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* buttons */
.jpbtn{display:inline-grid;place-items:center;height:28px;padding:0 18px;
  border:1.5px solid var(--jp-cyan);border-radius:999px;background:#fff;
  color:var(--jp-cyan);font-family:var(--md-font-brand);font-weight:700;font-size:12px;
  cursor:pointer;transition:background var(--md-dur-short) var(--md-ease-standard)}
.jpbtn:hover{background:#EAF8FE}
.jpbtn:active{background:#D8F1FC}
.jpbtn:focus-visible{outline:2px solid var(--jp-link);outline-offset:2px}
.jpbtn:disabled{border-color:#DCDCE2;color:#B4B4BC;cursor:not-allowed;background:#fff}
.jpbtn--fill{background:var(--jp-cyan);color:#fff}
.jpbtn--fill:hover{filter:brightness(1.06);background:var(--jp-cyan)}
.jpbtn--block{width:100%}

/* the cyan reward band */
.jpc-band{display:flex;align-items:flex-start;gap:7px;padding:9px 12px;
  background:var(--jp-band);color:var(--jp-cyan);font-family:var(--md-font-brand);
  font-weight:700;font-size:10px;line-height:1.4}
.jpc-band svg{flex:0 0 auto;width:14px;height:14px;margin-top:1px}
.jpc-band--pill{align-items:center}
.jp-xl{display:inline-grid;place-items:center;height:17px;padding:0 9px;
  border-radius:999px;background:var(--jp-cyan);color:#fff;font-size:9px}

/* reward chips */
.jp-chips{display:flex;align-items:flex-start;gap:7px}
.jp-chips svg{flex:0 0 auto;width:15px;height:15px;margin-top:5px;color:var(--jp-cyan)}
.jp-chips-set{display:flex;flex-wrap:wrap;gap:6px}
.jp-chip{display:inline-grid;place-items:center;height:22px;padding:0 10px;
  border:1px solid var(--jp-chip-bd);border-radius:999px;font-size:10px;
  color:var(--jp-ink)}
.jp-chip b{font-family:var(--md-font-brand);font-weight:700}
.jp-pill-out{display:inline-grid;place-items:center;align-self:flex-start;height:18px;
  padding:0 8px;border:1px solid var(--jp-chip-bd);border-radius:3px;font-size:9px;
  color:var(--jp-muted)}

/* ---- the 4G data-plan badge ------------------------------------- */
.jp-badge{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border-radius:6px;
  background:linear-gradient(160deg,#12B0F0,#2449FB 70%);color:#fff;
  font-family:var(--md-font-brand);text-align:center;overflow:hidden}
.jp-badge-pin{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#fff;color:#2449FB;font-weight:700;font-size:10px}
.jp-badge-pin::after{content:'';position:absolute;width:0;height:0}
.jp-badge b{font-weight:700;font-size:10px}
.jp-badge span{padding:1px 6px;border-radius:2px;background:rgba(255,255,255,.22);
  font-weight:700;font-size:7px;font-style:italic}
.jp-badge--sm{width:52px;min-height:52px;flex:0 0 auto}
.jp-badge--sm .jp-badge-pin{width:17px;height:17px;font-size:8px}
.jp-badge--sm b{font-size:8px}
.jp-badge--sm span{font-size:6px;padding:0 4px}
.jp-badge--lg{width:100%;min-height:96px;border-radius:8px 8px 0 0;gap:4px}
.jp-badge--lg .jp-badge-pin{width:30px;height:30px;font-size:13px}
.jp-badge--lg b{font-size:14px}
.jp-badge--lg span{font-size:9px}
.jp-badge--side{width:78px;min-height:78px;flex:0 0 auto;border-radius:8px}
.jp-badge--side .jp-badge-pin{width:24px;height:24px;font-size:11px}
.jp-badge--side b{font-size:11px}

/* ---- list rows --------------------------------------------------- */
.jp-listrow{display:flex;align-items:center;gap:11px;padding:12px 13px}
.jp-glyph{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;
  border-radius:4px;background:#F1F1F4;color:#3C3C43}
.jp-glyph svg{width:24px;height:24px}
.jp-glyph--lg{width:100%;height:128px;border-radius:4px}
.jp-glyph--lg svg{width:44px;height:44px}
.jp-listrow-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.jp-listrow > .md-i{flex:0 0 auto;width:14px;height:14px;color:#9A9AA2}
.jp-activate{display:flex;align-items:flex-start;gap:6px;padding:0 13px 12px;
  font-size:10px;line-height:1.45;color:var(--jp-ink)}
.jp-activate svg{flex:0 0 auto;width:13px;height:13px;margin-top:1px;color:var(--jp-cyan)}
.jp-activate a{color:var(--jp-link);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}

/* ---- device promo ------------------------------------------------ */
.jp-promo{position:relative;width:298px;border-radius:8px;overflow:hidden;
  background:linear-gradient(150deg,#5B4BE0,#7B4FD1 60%,#6A45D6);
  font-family:var(--md-font-plain);color:#fff}
.jp-promo-in{padding:12px 13px 14px;display:flex;flex-direction:column;gap:9px}
.jp-promo-price{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:3px 10px;border-radius:999px;background:var(--jp-cyan);color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:11px}
.jp-promo-price i{font-style:normal;font-weight:400;font-size:9px;opacity:.75;
  text-decoration:line-through}
.jp-promo h4{margin:0;font-family:var(--md-font-brand);font-weight:700;font-size:20px;
  line-height:1.1}
.jp-promo-card{display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:5px;background:#fff;color:var(--jp-ink)}
.jp-promo-card-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.jp-promo-card-txt b{font-family:var(--md-font-brand);font-weight:700;font-size:11px}
.jp-promo-row{display:flex;align-items:center;gap:6px}
.jp-promo-from{display:inline-grid;place-items:center;height:16px;padding:0 7px;
  border-radius:2px;background:var(--jp-cyan);color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:8px}
.jp-promo-amt{font-family:var(--md-font-brand);font-weight:700;font-size:14px}
.jp-promo-phone{flex:0 0 auto;width:38px;height:52px;border-radius:5px;overflow:hidden;
  background:#E4E7EC}
.jp-promo-phone image-slot{display:block;width:100%;height:100%}

@container (max-width:760px){
  .jpc-w-lg,.jpc-w-row,.jp-promo{width:100%}
}

/* =================================================================
   DASHBOARD — usage hero and empty states on the indigo field, and
   the account summary card in its four appearances.
   ================================================================= */
.db{--db-indigo:#3A2FBE; --db-indigo-2:#2A2196; --db-ink:#231F20; --db-muted:#6F6F76;
  --db-cyan:#12B0F0; --db-blue:#2449FB; --db-pink:#F5325B; --db-green:#00C48C;
  --db-rule:#E4E4EA; --db-stage:#8A8A8A; --db-stage-2:#C6C4D6; --db-track:#DCDCE2}
.db-sheet{container-type:inline-size}
.db-stage{padding:16px;background:var(--db-stage)}
.db-stage--2{padding:16px;background:var(--db-stage-2)}
.db-cols{display:flex;gap:12px;align-items:flex-start}
.db-col{display:flex;flex-direction:column;gap:12px;width:178px;flex:0 0 auto}

/* ---- indigo panels ---------------------------------------------- */
.dbp{position:relative;width:100%;padding:14px 13px 16px;border-radius:5px;
  background:linear-gradient(170deg,var(--db-indigo),var(--db-indigo-2));
  color:#fff;font-family:var(--md-font-plain);overflow:hidden;text-align:center}
.dbp--light{background:#F7F7FA;color:var(--db-ink)}
.dbp-stars::before,.dbp-stars::after{content:'';position:absolute;border-radius:50%;
  background:rgba(255,255,255,.5)}
.dbp-stars::before{width:2px;height:2px;top:22px;left:26px;
  box-shadow:36px 14px 0 rgba(255,255,255,.4),94px -6px 0 rgba(255,255,255,.5),
    128px 30px 0 rgba(255,255,255,.35),18px 62px 0 rgba(255,255,255,.4)}
.dbp-stars::after{width:2px;height:2px;bottom:34px;right:30px;
  box-shadow:-40px 12px 0 rgba(255,255,255,.4),-88px -14px 0 rgba(255,255,255,.3)}
/* the dune the mascot sits on */
.dbp-dune{position:absolute;left:-10%;right:-10%;bottom:-14px;height:64px;
  border-radius:50% 50% 0 0;background:rgba(255,255,255,.10)}
.dbp--light .dbp-dune{background:#E4E4EF}
.dbp-mascot{position:relative;z-index:1;display:block;margin:0 auto;width:56px}
.dbp-mascot--lg{width:80px}
.dbp-mascot--corner{position:absolute;right:8px;bottom:4px;width:52px;margin:0;z-index:1}
.dbp h4{position:relative;z-index:1;margin:0 0 4px;font-family:var(--md-font-brand);
  font-weight:700;font-size:13px;line-height:1.25}
.dbp p{position:relative;z-index:1;margin:0;font-size:9px;line-height:1.45;
  color:rgba(255,255,255,.86)}
.dbp--light p{color:var(--db-muted)}
.dbp-btn{position:relative;z-index:1;display:inline-grid;place-items:center;height:24px;
  margin-top:9px;padding:0 15px;border:0;border-radius:999px;background:var(--db-cyan);
  color:#fff;font-family:var(--md-font-brand);font-weight:700;font-size:10px;
  cursor:pointer}
.dbp-btn:hover{filter:brightness(1.07)}
.dbp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dbp-wifi{position:absolute;left:10px;top:52%;z-index:1;width:13px;height:13px;
  color:rgba(255,255,255,.6)}
.dbp--light .dbp-wifi{color:#B4B4BC}

/* usage hero: ring gauge + metric tiles */
.db-ring{position:relative;z-index:1;width:104px;height:104px;margin:0 auto 8px}
.db-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.db-ring img{position:absolute;left:50%;top:52%;width:56px;transform:translate(-50%,-50%)}
.db-hero-amt{position:relative;z-index:1;display:flex;align-items:baseline;
  justify-content:center;gap:5px;font-family:var(--md-font-brand);font-weight:700;
  font-size:17px}
.db-hero-amt i{font-style:normal;font-size:9px;font-weight:400}
.db-5g{display:inline-grid;place-items:center;height:14px;padding:0 6px;
  border:1px solid rgba(255,255,255,.7);border-radius:999px;font-size:8px;
  font-weight:700}
.db-tiles{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:12px;
  border-radius:4px;overflow:hidden;background:rgba(255,255,255,.16)}
.db-tile{padding:6px 7px;background:rgba(255,255,255,.10);text-align:left}
.db-tile b{display:block;font-size:7px;font-weight:400;color:rgba(255,255,255,.8)}
.db-tile-v{display:flex;align-items:center;gap:4px;margin-top:2px}
.db-tile-v svg{width:9px;height:9px}
.db-tile-v span{font-family:var(--md-font-brand);font-weight:700;font-size:10px}
.db-tile-v em{font-style:normal;font-size:6px;font-weight:400;
  color:rgba(255,255,255,.8)}

/* roaming card */
.db-roam{width:100%;padding:12px 12px 0;border-radius:5px;color:#fff;
  background:linear-gradient(170deg,var(--db-indigo),var(--db-indigo-2));
  font-family:var(--md-font-plain);position:relative;overflow:hidden}
.db-roam--light{background:#fff;color:var(--db-ink);
  box-shadow:0 1px 4px rgba(20,22,46,.16)}
.db-roam-lab{font-size:7px;color:rgba(255,255,255,.8)}
.db-roam--light .db-roam-lab{color:var(--db-muted)}
.db-roam-amt{margin:2px 0 0;font-family:var(--md-font-brand);font-weight:700;
  font-size:15px}
.db-roam-amt i{font-style:normal;font-size:8px;font-weight:400}
.db-roam-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:3px;font-size:7px;color:rgba(255,255,255,.8)}
.db-roam--light .db-roam-sub{color:var(--db-muted)}
.db-roam-rule{height:0;margin:10px 0 9px;border-top:1px solid rgba(255,255,255,.2)}
.db-roam--light .db-roam-rule{border-color:var(--db-rule)}
.db-roam-link{display:inline-block;font-family:var(--md-font-brand);font-weight:700;
  font-size:7px;color:#8FD8FF;text-decoration:underline;text-underline-offset:2px}
.db-roam--light .db-roam-link{color:var(--db-blue)}
.db-roam-low{margin:3px 0 0;font-family:var(--md-font-brand);font-weight:700;
  font-size:15px;color:#FF6E8A}
.db-roam--light .db-roam-low{color:var(--db-pink)}
.db-roam-btn{display:inline-grid;place-items:center;height:20px;padding:0 12px;
  border:0;border-radius:999px;background:var(--db-cyan);color:#fff;
  font-family:var(--md-font-brand);font-weight:700;font-size:8px;cursor:pointer}
.db-roam-fine{margin:10px 0 0;padding-bottom:44px;font-size:6px;line-height:1.6;
  color:rgba(255,255,255,.72)}
.db-roam--light .db-roam-fine{color:#9A9AA2}

/* ---- account summary card --------------------------------------- */
.dbs{position:relative;width:170px;flex:0 0 auto;padding:9px 10px 22px;
  border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(20,22,46,.16);
  font-family:var(--md-font-plain);color:var(--db-ink)}
.dbs--cyan{background:var(--db-cyan);color:#fff}
.dbs-head{display:flex;align-items:center;gap:4px;font-size:7px}
.dbs-head svg{width:8px;height:8px;color:var(--db-blue)}
.dbs--cyan .dbs-head svg{color:#fff}
.dbs-head b{font-family:var(--md-font-brand);font-weight:700}
.dbs-head .dbs-sp{flex:1 1 auto}
.dbs-status{display:inline-flex;align-items:center;gap:3px;color:var(--db-green);
  font-family:var(--md-font-brand);font-weight:700;font-size:7px}
.dbs--cyan .dbs-status{color:#fff}
.dbs-status::before{content:'';width:3px;height:3px;border-radius:50%;
  background:currentColor}
.dbs-rule{height:0;margin:7px 0;border-top:1px solid var(--db-rule)}
.dbs--cyan .dbs-rule{border-color:rgba(255,255,255,.32)}
.dbs-money{display:grid;gap:6px;margin-top:6px}
.dbs-money--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dbs-money--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dbs-money span{display:block;font-size:6px;color:var(--db-muted)}
.dbs--cyan .dbs-money span{color:rgba(255,255,255,.86)}
.dbs-money b{display:block;margin-top:1px;font-family:var(--md-font-brand);
  font-weight:700;font-size:8px}
.dbs-money-r{text-align:right}
/* metric tiles */
.dbs-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
  margin-top:8px}
.dbs-tile{padding:5px 6px;border:1px solid var(--db-rule);border-radius:3px}
.dbs--cyan .dbs-tile{border-color:rgba(255,255,255,.4)}
.dbs-tile > span{display:block;font-size:6px;color:var(--db-muted)}
.dbs--cyan .dbs-tile > span{color:rgba(255,255,255,.86)}
.dbs-tile-v{display:flex;align-items:center;gap:4px;margin-top:2px}
.dbs-tile-v .dbs-ic{display:grid;place-items:center;width:11px;height:11px;
  border-radius:50%;background:var(--db-blue);color:#fff;flex:0 0 auto}
.dbs-tile-v .dbs-ic svg{width:7px;height:7px}
.dbs--cyan .dbs-tile-v .dbs-ic{background:#fff;color:var(--db-cyan)}
.dbs-tile-v b{font-family:var(--md-font-brand);font-weight:700;font-size:8px}
.dbs-tile-v em{font-style:normal;font-size:6px;font-weight:400;color:var(--db-muted)}
.dbs--cyan .dbs-tile-v em{color:rgba(255,255,255,.86)}
/* progress rows */
.dbs-rows{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.dbs-row-h{display:flex;align-items:center;gap:5px;font-size:7px}
.dbs-row-h .dbs-ic{display:grid;place-items:center;width:12px;height:12px;
  border-radius:50%;background:var(--db-blue);color:#fff;flex:0 0 auto}
.dbs-row-h .dbs-ic svg{width:7px;height:7px}
.dbs--cyan .dbs-row-h .dbs-ic{background:#fff;color:var(--db-cyan)}
.dbs-row-h b{font-family:var(--md-font-brand);font-weight:700}
.dbs-row-h .dbs-sp{flex:1 1 auto}
.dbs-row-h i{font-style:normal;font-size:6px;color:var(--db-muted)}
.dbs--cyan .dbs-row-h i{color:rgba(255,255,255,.86)}
.dbs-row-h i b{font-family:var(--md-font-brand);font-weight:700;font-size:7px;
  color:var(--db-ink)}
.dbs--cyan .dbs-row-h i b{color:#fff}
.dbs-bar{height:3px;margin-top:3px;border-radius:999px;background:var(--db-track);
  overflow:hidden}
.dbs--cyan .dbs-bar{background:rgba(255,255,255,.4)}
.dbs-bar i{display:block;height:100%;border-radius:999px;background:var(--db-blue)}
.dbs--cyan .dbs-bar i{background:#fff}
.dbs-sub{padding-left:17px}
.dbs-sub .dbs-bar i{background:var(--db-cyan)}
.dbs--cyan .dbs-sub .dbs-bar i{background:#fff}
/* the low / overdue appearance */
.dbs--low .dbs-row-h b,.dbs--low .dbs-row-h i b,.dbs--low .dbs-money b,
.dbs--low .dbs-tile-v b{color:var(--db-pink)}
.dbs--low .dbs-bar i{background:var(--db-pink)}
.dbs--low .dbs-status{color:var(--db-pink)}
.dbs--low .dbs-row-h .dbs-ic{background:var(--db-pink)}
.dbs--lowc .dbs-row-h b,.dbs--lowc .dbs-row-h i b{color:#FF5C7A}
.dbs--lowc .dbs-bar i{background:#FF5C7A}
/* points footer + the bottom notch */
.dbs-points{display:flex;align-items:center;gap:4px;margin-top:9px;font-size:7px;
  color:var(--db-muted)}
.dbs--cyan .dbs-points{color:#fff}
.dbs-points svg{width:9px;height:9px;color:#F0A81E}
.dbs--cyan .dbs-points svg{color:#FFD86B}
.dbs-notch{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  display:grid;place-items:center;width:34px;height:15px;
  border-radius:0 0 34px 34px;background:inherit;box-shadow:0 3px 4px rgba(20,22,46,.10);
  border:0;color:var(--db-muted);cursor:pointer}
.dbs--cyan .dbs-notch{color:#fff}
.dbs-notch svg{width:9px;height:9px}
.dbs-buy{display:flex;align-items:center;gap:3px;font-family:var(--md-font-brand);
  font-weight:700;font-size:6px;color:var(--db-blue)}
.dbs--cyan .dbs-buy{color:#fff}
.dbs-buy svg{width:7px;height:7px}
.db-srow{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.db-srow + .db-srow{margin-top:16px}
.db-ghost{width:170px;min-height:150px;border:1px dashed #9A7BE0;border-radius:6px}

@container (max-width:700px){
  .db-cols{flex-wrap:wrap}
}

/* =================================================================
   COLOUR & CONTRAST — the ATOM Colour & Contrast sheet: token rows,
   the muddy-accessibility zone, tone/tint steps and the design-token
   table. Scoped to this section.
   ================================================================= */
.cc{--cc-rule:#E9E9EE; --cc-meta:#6F6F76; --cc-ink:#231F20; --cc-ok:#00B368;
  --cc-bad:#FF3B5C; --cc-panel:#F7F7F9}

/* ---- token rows ------------------------------------------------- */
.cc-tokens{display:flex;flex-direction:column;gap:9px;max-width:520px}
.cc-trow{display:grid;grid-template-columns:150px 60px 1fr;align-items:center;gap:14px;
  padding:13px 16px;background:var(--cc-panel);border-radius:var(--md-shape-xs)}
.cc-trow b{font-family:var(--md-font-brand);font-weight:600;font-size:10px;
  color:var(--cc-ink)}
.cc-trow span{font-size:9.5px;color:var(--cc-meta)}
.cc-hex{display:inline-flex;align-items:center;gap:9px;font-family:var(--md-font-mono);
  font-size:10px;color:var(--cc-ink)}
.cc-chip{width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(7,9,82,.09)}
.cc-note{margin:14px 0 0;font-family:var(--md-font-brand);font-weight:600;font-size:12px;
  line-height:1.4;color:var(--cc-ink)}

/* ---- muddy zone ------------------------------------------------- */
.cc-zone-t{margin:0 0 12px;font-size:11px;color:var(--cc-ink)}
.cc-strip{display:grid;grid-template-columns:repeat(10,1fr);
  border-radius:var(--md-shape-xs) var(--md-shape-xs) 0 0;overflow:hidden}
.cc-strip span{height:62px;padding:7px 0 0 8px;font-family:var(--md-font-plain);
  font-size:9.5px}
.cc-guard{display:grid;grid-template-columns:repeat(10,1fr);height:3px;margin-top:10px}
.cc-guard i{display:block;background:var(--cc-ok)}
.cc-guard i.is-bad{background:var(--cc-bad)}
.cc-guard-lab{margin:7px 0 0;text-align:center;font-size:10px;color:var(--cc-bad)}

/* ---- tone / tint steps ----------------------------------------- */
.cc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.cc-step h4{margin:0 0 5px;font-family:var(--md-font-brand);font-weight:700;font-size:11px;
  color:var(--cc-ink)}
.cc-step p{margin:0 0 12px;font-size:10px;line-height:1.55;color:var(--cc-ink)}
.cc-step a{color:var(--md-primary);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.cc-base{width:64px;height:56px;border-radius:2px;background:#22D3A0}
.cc-ramp{display:grid;grid-template-columns:repeat(11,1fr);height:56px;border-radius:2px;
  overflow:hidden}
.cc-ramp i{display:block}

/* ---- design token table (dark panel) --------------------------- */
.cc-dt{display:grid;grid-template-columns:172px minmax(0,1fr);
  border-radius:var(--md-shape-xs);overflow:hidden;background:#1F1F22;color:#E7E7EA;
  font-family:var(--md-font-plain);font-size:9.5px}
.cc-dt-side{border-right:1px solid #2E2E33}
.cc-dt-h{display:flex;align-items:center;justify-content:space-between;
  padding:8px 11px;background:#26262A;font-weight:600}
.cc-dt-r{display:flex;align-items:center;justify-content:space-between;
  padding:6px 11px;color:#C7C7CE}
.cc-dt-r.is-on{background:#3A3A6B;color:#fff}
.cc-dt-r.is-head{background:#2F2F35;color:#fff;font-weight:600}
.cc-dt-r span:last-child{color:#8E8E97}
.cc-dt-r.is-on span:last-child{color:#D9D9F2}
.cc-dt-r--in{padding-left:22px}
.cc-dt-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.cc-dt-cols > span{padding:8px 11px;background:#26262A;border-left:1px solid #1F1F22;
  font-weight:600}
.cc-dt-group{padding:9px 11px;border-top:1px solid #2E2E33;color:#C7C7CE}
.cc-dt-group b{color:#fff;font-weight:600}
.cc-dt-vals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid #2E2E33}
.cc-dt-vals > span{padding:8px 11px;border-left:1px solid #2E2E33;color:#E7E7EA}
.cc-dt-vals > span:first-child{display:flex;align-items:center;gap:7px;border-left:none;
  background:#26262A}
.cc-dt-vals .md-i{width:9px;height:9px;color:#8E8E97}
.cc-dt-amber{color:#E0B341}

.cc-sheet{container-type:inline-size}
@container (max-width:640px){
  .cc-steps{grid-template-columns:minmax(0,1fr)}
  .cc-trow{grid-template-columns:minmax(0,1fr) auto}
  .cc-trow > span:not(.cc-hex){display:none}
  .cc-dt{grid-template-columns:minmax(0,1fr)}
}

/* =================================================================
   Top app bar pinned to the viewport.
   The bar's own layout, height, type, colour, icons and spacing are
   untouched — only its positioning changes, and the layout below is
   offset by exactly --bar-h so nothing jumps or overlaps.
   ================================================================= */
.app-bar{position:fixed;top:0;left:0;right:0}
.layout{padding-top:var(--bar-h)}