/* Scroll-linked values (atelier.js) are non-inherited: a write restyles only the element that reads it, never the whole page
   (anim plan M1: an inherited write on <html> forced a 1224-element recalc every scroll frame). */
@property --at-leave{syntax:'<number>';inherits:false;initial-value:0}
@property --at-recede{syntax:'<number>';inherits:false;initial-value:0}
/* Deal tiles: one footprint for every tile, 1 : 1.2 (owner, 2026-10-18). No inner scrolling and no "show more"
   buttons (owner: "i hate scrolling", "delete all the see more kind of things"). */
@media (min-width:1000px){
  html body #deals .deal-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body #deals .deal-grid>.carrier-card{grid-column:span 2!important}
  html body #deals .deal-grid>.carrier-card:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2!important}
  html body #deals .deal-grid>.carrier-card:nth-child(3n+1):last-child{grid-column:3/span 2!important}
}
@media (min-width:681px) and (max-width:999px){
  html body #deals .deal-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html body #deals .deal-grid>.carrier-card{grid-column:span 2!important}
  html body #deals .deal-grid>.carrier-card:nth-child(odd):last-child{grid-column:2/span 2!important}
}
html body #deals .deal-grid{grid-auto-rows:auto!important;align-items:start!important}
html body #deals .deal-grid>.carrier-card{aspect-ratio:5/6;min-height:0!important;height:auto!important;max-height:none!important;display:flex!important;flex-direction:column;overflow:hidden!important}
html body #deals .deal-grid>.carrier-card>:not(.carrier-panels){flex:none}
html body #deals .deal-grid>.carrier-card>.carrier-panels{flex:1 1 0;min-height:0;overflow:hidden!important}
html body #deals .deal-grid>.carrier-card>.carrier-panels{grid-template-rows:none!important;grid-auto-rows:max-content!important;align-content:start!important}
html body #deals .carrier-card .carrier-panel{min-height:0!important;height:auto!important}
html body #deals .carrier-card .carrier-panel>*,html body #deals .carrier-card .carrier-panel>*>*,html body #deals .carrier-card .promotion-pages{flex-shrink:0!important}
html body #deals .deal-grid>.carrier-card{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box}
/* Feedback: rating sits under "What is this about?"; the message takes the right column (owner, 2026-10-18). */
@media (min-width:700px){
  html body .native-feedback-fields{grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
  html body .native-feedback-fields>label:nth-child(1){grid-column:1!important;grid-row:1!important}
  html body .native-feedback-fields>label:nth-child(2){grid-column:1!important;grid-row:2!important}
  html body .native-feedback-fields>label:nth-child(3){grid-column:2!important;grid-row:1/span 2!important;display:flex;flex-direction:column;align-self:stretch!important}
  html body .native-feedback-fields>label:nth-child(3) textarea{flex:1;min-height:0}
}
html body .trend-preview-note{margin:6px 0 0;font-size:11px;opacity:.7}
/* Price panel: the soft light that followed the pointer was drawn over the text and the chart, which read as blurry and
   shaky (owner, 2026-10-18: "just delete the blury and shaky thing"). Removed on this panel only; tilt and glass unchanged. */
html body #intelligence.price-panel.glass::after{display:none!important}
/* The tilt was drawn by stretching one pre-rendered bitmap of the panel (will-change:transform), so text and chart went
   soft and swam as it moved. Without that hint they are redrawn sharp at every angle. Tilt itself unchanged. */
html body #intelligence.price-panel.glass{will-change:auto!important}

/* No expanders anywhere in the price panel or the deal tiles: the panel stays the length it has when closed. */
html body :is(#intelligence,#deals) details{display:none!important}

/* Price panel, a little shorter (owner, 2026-10-18): tighter gaps between its rows. */
html body #intelligence .price-trend{gap:3px!important}
html body #intelligence .trend-verdict{margin:0!important}
html body #intelligence .trend-saving{margin:0!important;line-height:1.35!important}
html body #intelligence .trend-preview-note{margin:2px 0 0!important}
html body #intelligence .panel-heading{padding-bottom:8px!important}

/* ===================================================================================================================
   Design system v4 (owner interview 2026-10-18: dark luxury + game cinematic, "premium, luxurious, clean ... efficient",
   palette from real references: Porsche, Linear, Origin Financial, Apple, Aston Martin). See scrollcraft BRIEF.md.
   Cool near-black, three surface steps, hairlines not shadows, one bronze-champagne accent, status colours only for data.
   =================================================================================================================== */
:root{
  --at-canvas:#0a0b0d;--at-surface:#131417;--at-raised:#1c1d21;--at-glass:rgba(19,20,23,.66);
  --at-hair:rgba(255,255,255,.08);--at-hair-2:rgba(255,255,255,.14);--at-edge:inset 0 1px 0 rgba(255,255,255,.05);
  --at-text:#f5f5f7;--at-muted:#9f9fa0;--at-faint:#6e6e73;
  --at-accent:#c9a27e;--at-accent-ink:#17120d;--at-accent-soft:rgba(201,162,126,.12);
  --at-up:#10c47f;--at-down:#fc4040;
  --at-font:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI','Malgun Gothic',system-ui,sans-serif;
  --at-display:'Bodoni Moda','Hahmlet','Didot','Bodoni 72',Georgia,serif;
  --at-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --at-ease:cubic-bezier(.23,1,.32,1);
  --brand-display:var(--at-display);--brand-korean:var(--at-display);
  --text:var(--at-text);--muted:var(--at-muted);--gold:var(--at-accent);
  --surface-line:var(--at-hair);--surface-glass:var(--at-surface);--surface-inset:rgba(255,255,255,.035);--surface-hover:rgba(255,255,255,.045);--surface-shadow:none;
  --dialog-bg:#15161a;--line:var(--at-hair);--ui-border:var(--at-hair);
  --trend-up:var(--at-up);--trend-down:var(--at-down);--trend-flat:var(--at-accent);
  --r-sm:10px;--r-md:20px;--r-pill:999px;
  --at-hero:0;
}
html,html body,#boot-screen{background-color:var(--at-canvas)!important}
html body{color:var(--at-text);font-family:var(--at-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body :is(button,input,select,textarea,dialog,.auth,.membership-provider,.trend-tip){font-family:var(--at-font)}
html body ::selection{background:var(--at-accent);color:var(--at-accent-ink)}
html body :focus-visible{outline:1.5px solid var(--at-accent)!important;outline-offset:3px}

/* Type. Display serif only at large sizes; text in Plex Sans KR; labels and figures' captions in Plex Mono. */
html[lang] body :is(h1,.boot-name){font-family:var(--at-display)!important;font-style:normal}
html[lang] body :is(#deals .section-heading h2,#games .section-copy h2,.native-feedback h3,.native-feedback h2,dialog h2){font-family:var(--at-display)!important;font-weight:500!important;letter-spacing:-.005em!important}
html[lang=ko] body :is(#deals .section-heading h2,#games .section-copy h2,.native-feedback h3,.native-feedback h2,dialog h2){letter-spacing:-.02em!important;word-spacing:.08em;word-break:keep-all}
html[lang] body :is(h3,h4){font-family:var(--at-font)!important;font-weight:600!important;letter-spacing:-.01em!important;word-break:keep-all}
html body .hero h1{font-weight:500!important;letter-spacing:-.02em!important;line-height:.98!important}
html body .hero h1 span{font-style:italic!important;font-weight:400!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--at-text)!important}
html[lang=ko] body .hero h1{font-weight:500!important;letter-spacing:-.03em!important;word-spacing:.14em;word-break:keep-all;line-height:1.12!important}
html[lang=ko] body .hero h1 span{font-style:normal!important;font-weight:400!important;color:var(--at-accent)!important}
html body .site-header :is(.home-logo,.home-logo-wordmark){font-family:var(--at-display)!important;font-weight:500!important;letter-spacing:.02em!important}
html body :is(.eyebrow,.art-credit,.status-badge,.feed-context,.freshness,.trend-tick,.trend-average-label,.beta-badge,.source-footnote,.signal-kicker,.price-trend .signal-kicker){font-family:var(--at-mono)!important}
html body .eyebrow,html body .signal-kicker{letter-spacing:.14em!important;text-transform:uppercase;font-size:10px!important;color:var(--at-muted)!important}
html body :is(.carrier-rate strong,.trend-now,.trend-avg,.signal-value,.membership-rate>strong,.provider-points-value>strong,.lg-result strong,.carrier-calculation-output strong){font-variant-numeric:lining-nums tabular-nums}
html body .trend-now{font-family:var(--at-display)!important;font-weight:500!important;font-size:clamp(34px,3.2vw,44px)!important;letter-spacing:-.01em!important;color:var(--at-accent)!important;line-height:1!important}
html body .trend-avg{font-family:var(--at-display)!important;font-weight:500!important;font-size:clamp(22px,2vw,26px)!important;color:var(--at-text)!important;opacity:1!important}
html body .carrier-rate strong{font-family:var(--at-display)!important;font-weight:500!important}
html body .art-index{font-family:var(--at-mono)!important;font-size:11px!important;letter-spacing:.1em!important}

/* The stage: full colour at the top, receding toward the canvas as the numbers arrive ("cinematic top, calm below"). */
html body .shade{background:
  linear-gradient(0deg,var(--at-canvas) 0%,rgba(10,11,13,.6) 26%,rgba(10,11,13,0) 58%),
  linear-gradient(90deg,rgba(10,11,13,.72) 0%,rgba(10,11,13,.18) 42%,rgba(10,11,13,0) 62%)!important}
html body .backdrop{background-color:var(--at-canvas)}
html body main{position:relative;z-index:2}

/* Header: quiet hairline pills, mono BETA. The liquid-glass dock is the owner's and is not touched. */
html body .site-header :is(.home-logo,.header-account,.header-language){background:rgba(10,11,13,.5)!important;border:1px solid var(--at-hair-2)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
@media (hover:hover){html body .site-header :is(.header-account,.header-language):hover{border-color:rgba(255,255,255,.28)!important}}
html body .beta-badge{font-size:8px!important;letter-spacing:.16em!important;background:var(--at-canvas)!important;color:var(--at-accent)!important;border:1px solid rgba(201,162,126,.45)!important}

/* Hero copy */
html body .hero-copy .intro{color:rgba(245,245,247,.82)!important;font-size:15px!important;line-height:1.6!important;max-width:34ch}
html body .logo-strip button{opacity:.55!important;transition:opacity .2s var(--at-ease)!important}
html body .logo-strip button[aria-pressed=true]{opacity:1!important}@media (hover:hover){html body .logo-strip button:hover{opacity:1!important}}
html body .art-credit{color:rgba(245,245,247,.6)!important}

/* Buttons: one champagne action, hairline secondaries, accent text links. */
html body :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply){
  background:var(--at-accent)!important;color:var(--at-accent-ink)!important;border:1px solid var(--at-accent)!important;box-shadow:none!important;font-weight:600!important;transition:background-color .18s var(--at-ease),transform .12s var(--at-ease)!important}
@media (hover:hover){html body :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply):hover{background:#d6b38f!important}}
html body :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply):active{transform:translateY(1px)}
html body :is(.primary,#v1-profile-button) svg{color:var(--at-accent-ink)!important}
html body :is(.outline,.refresh-button){background:transparent!important;color:var(--at-text)!important;border:1px solid var(--at-hair-2)!important;box-shadow:none!important}
@media (hover:hover){html body :is(.outline,.refresh-button):hover{border-color:rgba(255,255,255,.3)!important;background:rgba(255,255,255,.03)!important}}
html body :is(.text-button,.carrier-text-action,.promotion-details-link,.trend-cta,.signal-retry){color:var(--at-accent)!important}

/* Price panel: dark glass over the art (the owner's tilt and transparency stay). */
html body #intelligence.price-panel.glass{background:var(--at-glass)!important;border:1px solid var(--at-hair-2)!important;border-radius:24px!important;
  box-shadow:var(--at-edge),0 24px 60px -24px rgba(0,0,0,.6)!important;-webkit-backdrop-filter:blur(28px) saturate(140%)!important;backdrop-filter:blur(28px) saturate(140%)!important}
html body #intelligence .price-content,html body #intelligence .verdict-row>div{background:transparent!important;border-color:var(--at-hair)!important;box-shadow:none!important}
html body #intelligence .panel-heading{border-bottom:1px solid var(--at-hair)!important}
html body #intelligence .panel-heading strong{font-family:var(--at-display)!important;font-weight:500!important;font-size:18px!important;letter-spacing:0!important}
html body .price-trend .trend-ranges{background:rgba(255,255,255,.04)!important;border:1px solid var(--at-hair)!important}
html body .price-trend .trend-ranges button[aria-pressed=true]{background:var(--at-accent-soft)!important;color:var(--at-accent)!important}
html body .price-trend .trend-verdict{color:var(--trend)!important;font-size:12px!important;font-weight:600}
html body .price-trend.trend-up .trend-now{color:var(--at-up)!important}
html body .price-trend.trend-down .trend-now{color:var(--at-down)!important}

/* Chart: one accent line on a faint wash, quiet axes, dashed average, the value labelled at "now". */
html body .price-trend .trend-plot{max-height:none;overflow:visible}
html body .price-trend .trend-stage{padding-top:26px;margin-top:4px}
html body .price-trend .trend-grid{stroke:#fff!important;stroke-opacity:.06!important}
html body .price-trend .trend-tick{font-size:9px!important;fill:var(--at-faint)!important;letter-spacing:.04em}
html body .price-trend .trend-line{stroke-width:2!important}
html body .price-trend .trend-area{opacity:.5}
html body .price-trend .trend-average{stroke:#fff!important;stroke-opacity:.3!important;stroke-dasharray:2 5!important}
html body .price-trend .trend-average-label{font-size:9px!important;fill:var(--at-muted)!important;fill-opacity:1!important;stroke:none!important}
html body .price-trend .trend-halo{fill-opacity:.16}
html body .price-trend .trend-dot{stroke:var(--at-canvas)!important;stroke-width:2}
html body .price-trend .trend-now-label{fill:var(--trend);font-family:var(--at-mono);font-size:10.5px;font-weight:500}
html body .price-trend .trend-preview-note{margin:2px 0 0!important;font-size:11px;line-height:1.45;color:var(--at-faint)!important}
html body .price-trend .trend-tip{top:0!important;left:0!important;transform:translateX(-50%)!important;display:flex!important;align-items:baseline;gap:8px;white-space:nowrap;padding:6px 10px!important;
  border-radius:10px!important;background:#16171b!important;border:1px solid var(--at-hair-2)!important;box-shadow:0 10px 28px rgba(0,0,0,.5)!important;pointer-events:none;z-index:3}
html body .price-trend .trend-tip[hidden]{display:none!important}
html body .price-trend .trend-tip b{font-family:var(--at-mono);font-size:12.5px!important;color:var(--trend)!important}
html body .price-trend .trend-tip span{font-size:11px!important;color:var(--at-text)!important}
html body .price-trend .trend-tip small{font-family:var(--at-mono);font-size:10px!important;color:var(--at-muted)!important}
html body .price-trend .trend-cross{stroke:#fff!important;stroke-opacity:.3!important}
html body .price-trend .trend-figures{gap:26px}

/* Worlds: the index of five, no box; the open world carries a champagne rule. */
html body #games.games-section{background:transparent!important;border:0!important;border-top:1px solid var(--at-hair)!important;border-bottom:1px solid var(--at-hair)!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-left:4px!important;padding-right:4px!important}
html body #games .game-card{background:transparent!important;border:1px solid transparent!important;border-radius:16px!important;box-shadow:none!important}
html body #games .game-card img{border-radius:14px!important}
html body #games .game-card strong{color:var(--at-muted)!important;font-weight:500!important;transition:color .2s var(--at-ease)!important}
html body #games .game-card.selected strong{color:var(--at-text)!important}@media (hover:hover){html body #games .game-card:hover strong{color:var(--at-text)!important}}
html body #games .game-card.selected{background:rgba(255,255,255,.035)!important;border-color:var(--at-hair-2)!important}
html body #games .game-card.selected::before{content:"";position:absolute;left:28%;right:28%;bottom:-1px;height:1px;background:var(--at-accent);z-index:6}

/* Deals: no outer box; controls as a quiet segmented row; tiles are flat surfaces with a hairline and a lit top edge. */
html body #deals{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
html body #deals .deal-toolbar{background:transparent!important;border:0!important;border-bottom:1px solid var(--at-hair)!important;border-radius:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
html body #deals .filter-tabs button{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:var(--at-muted)!important;border-radius:var(--r-pill)!important}
@media (hover:hover){html body #deals .filter-tabs button:hover{color:var(--at-text)!important}}
html body #deals .filter-tabs button[aria-pressed=true]{color:var(--at-text)!important;border-color:var(--at-hair-2)!important;background:rgba(255,255,255,.04)!important}
html body #deals .platform-select select,html body select,html body input,html body textarea{background-color:rgba(255,255,255,.035)!important;border:1px solid var(--at-hair-2)!important;color:var(--at-text)!important;box-shadow:none!important}
html body #deals .deal-grid>.carrier-card{background:var(--at-surface)!important;border:1px solid var(--at-hair)!important;border-radius:20px!important;box-shadow:var(--at-edge)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (hover:hover){html body #deals .deal-grid>.carrier-card:hover{border-color:var(--at-hair-2)!important}}
html body #deals .carrier-card .promotion-tabs button{color:var(--at-muted)!important}
html body #deals .carrier-card .promotion-tabs button[aria-selected=true]{color:var(--at-text)!important}
html body #deals .carrier-card .promotion-tabs{border-color:var(--at-hair)!important}
html body #deals .carrier-card .promotion-tabs button[aria-selected=true]::after,html body #deals .carrier-card .promotion-event-tabs::before{background:var(--at-accent)!important}
html body #deals .carrier-card .promotion-tabs button[aria-selected=true]{box-shadow:inset 0 -1px 0 var(--at-accent)!important}
html body #deals .carrier-card :is(.carrier-key-facts,.carrier-related-plan,.carrier-estimate,.carrier-modal-callout,.membership-decision){border-color:var(--at-hair)!important;background:rgba(255,255,255,.025)!important}
html body #deals .carrier-card .carrier-rate strong,html body #deals .carrier-card :is(.lg-result strong,.provider-points-value>strong){color:var(--at-accent)!important}
html body #deals .carrier-card :is(p,small,dd){color:var(--at-muted)}
html body #deals .carrier-card :is(h3,h4,strong){color:var(--at-text)}
html body #deals .carrier-card .status-badge{color:var(--at-faint)!important;font-size:10px!important;letter-spacing:.04em}

/* Close */
html body details.quiet-section,html body .native-feedback{background:var(--at-surface)!important;border:1px solid var(--at-hair)!important;border-radius:20px!important;box-shadow:var(--at-edge)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body main>footer{border-top:1px solid var(--at-hair)!important;color:var(--at-faint)!important}
html body main>footer button{color:var(--at-muted)!important}
html body dialog{background:var(--dialog-bg)!important;border:1px solid var(--at-hair-2)!important;box-shadow:0 30px 80px rgba(0,0,0,.6)!important}

/* Signature: when the world changes, the price line draws itself (atelier.js). */
html body .price-trend .trend-line,html body .price-trend .trend-area{transform-box:fill-box}
/* Bodoni Moda's optical-size axis switches to the hairline poster cut at large sizes (too thin, too loose on screen).
   Pin a sturdier cut: still high-contrast and luxurious, but solid strokes and tight spacing. */
html[lang] body :is(h1,h2,.boot-name,.site-header .home-logo,.site-header .home-logo-wordmark,#intelligence .panel-heading strong,.trend-now,.trend-avg,.carrier-rate strong,.native-feedback h3){font-optical-sizing:none!important;font-variation-settings:"opsz" 18!important}
html body .hero h1{font-weight:500!important;letter-spacing:-.03em!important}
html[lang] body :is(.trend-now,.trend-avg,.carrier-rate strong){font-variation-settings:"opsz" 12!important;font-weight:600!important;letter-spacing:-.02em!important}
/* Mono only where it is figures or Latin labels. Hangul set in a monospace face gets wide gaps, so Korean labels use the
   text face; ticks, the counter and chart labels (numbers) stay mono in both languages. */
html body :is(.trend-tick,.trend-average-label,.trend-now-label,.art-index){font-family:var(--at-mono)!important}
html body .price-trend .trend-tick{fill:#8d8e93!important}
html body .price-trend .trend-preview-note{color:#a3a4a8!important}
html body #intelligence .trend-saving,html body #intelligence .trend-saving small{color:#c9cacd!important}
html body #deals .carrier-card :is(.carrier-rate strong,.carrier-rate strong *){background:none!important;-webkit-text-fill-color:var(--at-accent)!important;color:var(--at-accent)!important}
/* Tile figures are data: the text face at semibold, bright, tabular (the serif stays for headlines and the panel figure). */
html body #deals .carrier-card :is(.carrier-rate strong,.carrier-rate strong *){font-family:var(--at-font)!important;font-variation-settings:normal!important;font-weight:600!important;letter-spacing:-.03em!important;-webkit-text-fill-color:var(--at-text)!important;color:var(--at-text)!important}
/* Smooth scrolling comes first: no live backdrop blur behind the price panel (it re-blurred the art every scroll frame);
   a deeper translucent fill keeps the glass look. */
html body #intelligence.price-panel.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(17,18,21,.78)!important}
html[lang=ko] body .hero h1 span{color:var(--at-text)!important;opacity:.92}
/* Readability over the art: the world row and the deal filters sit on a dark surface with a hairline, like the tiles. */
html body #games.games-section{background:rgba(13,14,17,.78)!important;border:1px solid var(--at-hair)!important;border-radius:20px!important;box-shadow:var(--at-edge)!important;padding-left:24px!important;padding-right:20px!important}
html body #deals .deal-toolbar{background:rgba(13,14,17,.78)!important;border:1px solid var(--at-hair)!important;border-radius:18px!important;box-shadow:var(--at-edge)!important;padding:8px 10px!important}
html body #deals .section-heading,html body #deals .feed-context{text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* The background art stays still (owner, 2026-10-18: "i want the back ground to stay not move"): no depth layers, no drift or zoom. */
html body #artwork-stage,html.scene-ready #artwork-stage{transform:none!important}

/* ===================================================================================================================
   v5 (owner 2026-10-18): first screen = title + live verdict side by side; calmer hero (no logo row, no counter);
   fewer boxes; more transparency so the art shows through. Arrangement only; no data or automation change.
   =================================================================================================================== */
html body .hero .logo-strip,html body .hero .art-index{display:none!important}
@media (min-width:900px){
  html body .hero{min-height:calc(100svh - 72px)!important;align-items:center!important;padding-bottom:40px!important}
  html body .hero .hero-copy h1{font-size:clamp(60px,6vw,96px)!important;margin-bottom:20px!important}
}
html body #intelligence .panel-heading strong{font-family:var(--at-font)!important;font-variation-settings:normal!important;font-weight:600!important;font-size:16px!important;letter-spacing:-.01em!important}
/* Transparency: surfaces are tinted glass, the art reads through them. */
html body #intelligence.price-panel.glass{background:rgba(14,15,18,.52)!important;-webkit-backdrop-filter:blur(16px) saturate(130%)!important;backdrop-filter:blur(16px) saturate(130%)!important;border-color:rgba(255,255,255,.16)!important}
html body #deals .deal-grid>.carrier-card{background:rgba(16,17,20,.58)!important;border-color:rgba(255,255,255,.1)!important}
@media (hover:hover){html body #deals .deal-grid>.carrier-card:hover{background:rgba(20,21,25,.66)!important}}
html body #deals .carrier-card :is(.carrier-key-facts,.carrier-related-plan,.carrier-estimate,.carrier-modal-callout,.membership-decision){background:transparent!important}
html body details.quiet-section,html body .native-feedback{background:rgba(16,17,20,.58)!important;border-color:rgba(255,255,255,.1)!important}
/* Fewer boxes: the world row and the deal filters sit directly on the page. */
html body #games.games-section,html body #deals .deal-toolbar{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important}
html body #games.games-section{border-top:1px solid var(--at-hair)!important;padding-left:2px!important;padding-right:2px!important}
html body #deals .deal-toolbar{padding-left:0!important;padding-right:0!important}
html body :is(#games,#deals .section-heading,#deals .deal-toolbar,#deals .feed-context){text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* Live backdrop blur behind the price panel costs scroll frames (wheel-smoothness test failed twice with it), so the glass
   is see-through tint only. */
html body #intelligence.price-panel.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,15,18,.62)!important}

/* Korean title font (owner, 2026-10-18: thin calligraphy, picked 마포꽃섬 / Mapo Flower Island from the thin set).
   마포 브랜드 서체 (c) 마포구: free for commercial use incl. websites and embedding; used unmodified, as distributed. */
@font-face{font-family:'MapoFlowerIsland';src:url('assets/fonts/MapoFlowerIslandA.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
html[lang=ko] body .hero h1,html[lang=ko] body .hero h1 span{font-family:'MapoFlowerIsland','IBM Plex Sans KR',serif!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;word-spacing:.08em!important;font-variation-settings:normal!important}
html[lang=ko] body .hero h1{font-size:clamp(64px,6.6vw,108px)!important;line-height:1.16!important}
/* Korean headings: the clean text face, so nothing competes with the calligraphy title. */
/* English title only (owner, 2026-10-18: "use 7 as the english font ... only for the tittle"): Monsieur La Doulaise,
   an ornate brush-pen script (Google Fonts, OFL). Everything else keeps its font. */
html:not([lang=ko]) body .hero h1,html:not([lang=ko]) body .hero h1 span{font-family:'Monsieur La Doulaise','Bodoni Moda',serif!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;font-variation-settings:normal!important}
html:not([lang=ko]) body .hero h1{font-size:clamp(84px,8.4vw,136px)!important;line-height:1.02!important;margin-bottom:10px!important}
html:not([lang=ko]) body .hero h1 span{display:inline-block;padding-left:.5em}
html body #intelligence.price-panel.glass{background:rgba(14,15,18,.74)!important}
/* Readability (owner, 2026-10-18: "the readability of this is shit"): the panel is near-solid so busy art never sits
   behind text; small labels brighter and larger; chart ticks readable. */
html body #intelligence.price-panel.glass{background:rgba(12,13,16,.9)!important;border-color:rgba(255,255,255,.14)!important}
html body #intelligence :is(.signal-kicker,.trend-figures span,.panel-heading small,.trend-preview-note){color:#b9babe!important;opacity:1!important}
html body #intelligence .trend-figures span{font-size:12px!important}
html body #intelligence .trend-saving,html body #intelligence .trend-saving *{color:#e4e5e8!important}
html body #intelligence .price-trend .trend-tick,html body #intelligence .price-trend .trend-average-label{fill:#a9aaae!important;font-size:10px!important}
html body #intelligence .trend-now{color:#d9b48c!important}
html body .hero .intro{color:#fff!important;text-shadow:0 1px 16px rgba(0,0,0,.75)}
html body .hero h1{text-shadow:0 2px 30px rgba(0,0,0,.45)}
/* Below the first screen the art fades almost fully into the canvas (owner: "this is too transperant"). */
html body .ambient-light{background:var(--at-canvas)!important;transition:none!important}
/* Where the scroll dim is a scroll-linked animation (finish.css), no !important opacity may sit here: it would beat the animation. */
@supports not (animation-timeline:scroll()){html body .ambient-light{opacity:calc(var(--at-recede) * .95)!important}}
html body #deals .deal-grid>.carrier-card,html body details.quiet-section,html body .native-feedback{background:rgba(16,17,20,.86)!important}
/* The thin full-width line at the bottom of the first screen (top border of the world row) is gone (owner). */
html body #games.games-section{border-top:0!important}
/* Title readability: a soft dark scrim only where the copy sits, a slightly heavier stroke on the thin script and a shadow. */
html body .shade{background:
  radial-gradient(ellipse 60% 70% at 18% 45%,rgba(10,11,13,.78),rgba(10,11,13,.35) 55%,rgba(10,11,13,0) 80%),
  linear-gradient(0deg,var(--at-canvas) 0%,rgba(10,11,13,.6) 26%,rgba(10,11,13,0) 58%)!important}
html body .hero h1{color:#fff!important;-webkit-text-stroke:.9px rgba(255,255,255,.95);paint-order:stroke fill;text-shadow:0 2px 6px rgba(0,0,0,.55),0 6px 40px rgba(0,0,0,.6)!important}
html[lang=ko] body .hero h1{-webkit-text-stroke:.6px rgba(255,255,255,.95)}
/* Title fades as you leave: the first screen's copy and panel lift and fade while the background stays still. */
/* The copy lifts with the individual `translate` property on its own layer (anim plan S1, safe half), so the large stroked script
   title is moved by the compositor instead of repainted. The price panel's rule is unchanged (its tilt owns its transform). */
@supports not (animation-timeline:scroll()){html body .hero>.hero-copy{translate:0 calc(var(--at-leave,0) * -6vh);opacity:calc(1 - var(--at-leave,0) * .9);will-change:translate,opacity}}
@supports not (animation-timeline:scroll()){html body .hero>#intelligence{transform:translate3d(0,calc(var(--at-leave,0) * -6vh),0);opacity:calc(1 - var(--at-leave,0) * .9)}}
/* Title legibility, round 2 (owner: "we can't read the tittle clearly"): a dark field behind the copy column only,
   heavier script strokes, lines spaced so the flourishes don't tangle. */
html body .shade{background:
  linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.82) 28%,rgba(8,9,11,.45) 46%,rgba(8,9,11,0) 62%),
  linear-gradient(0deg,var(--at-canvas) 0%,rgba(10,11,13,.6) 24%,rgba(10,11,13,0) 55%)!important}
@media (max-width:899px){html body .shade{background:linear-gradient(180deg,rgba(8,9,11,.82) 0%,rgba(8,9,11,.55) 45%,rgba(8,9,11,.2) 70%),linear-gradient(0deg,var(--at-canvas) 0%,rgba(10,11,13,0) 40%)!important}}
html:not([lang=ko]) body .hero h1{font-size:clamp(72px,6.4vw,116px)!important;line-height:1.22!important;-webkit-text-stroke:1.5px #fff!important;text-shadow:0 2px 3px rgba(0,0,0,.6),0 0 28px rgba(0,0,0,.55)!important}
html[lang=ko] body .hero h1{-webkit-text-stroke:1px #fff!important;text-shadow:0 2px 3px rgba(0,0,0,.6),0 0 28px rgba(0,0,0,.55)!important}
html:not([lang=ko]) body .hero h1{margin-bottom:46px!important}
/* Phones: the script title is sized to the screen (it overflowed sideways below ~400px). */
@media (max-width:899px){
  html:not([lang=ko]) body .hero h1{font-size:clamp(40px,12.5vw,72px)!important;line-height:1.2!important;margin-bottom:28px!important;-webkit-text-stroke:1px #fff!important}
  html:not([lang=ko]) body .hero h1 span{padding-left:.3em}
  html[lang=ko] body .hero h1{font-size:clamp(36px,11.5vw,64px)!important}
  html body .hero .hero-copy{overflow:visible}
}
/* Title colour (owner, 2026-10-19: "change the fonts color"): warm champagne, matching the accent; the stroke follows it. */
html body .hero h1,html body .hero h1 span{color:#efd6b2!important;-webkit-text-fill-color:#efd6b2!important;-webkit-text-stroke-color:#efd6b2!important}

/* Korean page = English page for everything that is not Hangul (owner, 2026-10-19: "why are the fonts for numbers and
   things like that diff i want them to be the same as english"). Same display serif, same mono, same text face for digits
   and Latin; Hangul glyphs alone come from the Korean fallback at the end of each stack. */
:root{
  --at-display:'Bodoni Moda','IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',serif;
  --at-mono:'IBM Plex Mono','IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',ui-monospace,monospace;
  --brand-display:var(--at-display);--brand-korean:var(--at-display);
}
html[lang=ko] body :is(.eyebrow,.art-credit,.status-badge,.feed-context,.freshness,.beta-badge,.source-footnote,.signal-kicker,.price-trend .signal-kicker){font-family:var(--at-mono)!important;letter-spacing:.02em!important}
html[lang=ko] body :is(#deals .section-heading h2,#games .section-copy h2,.native-feedback h3,.native-feedback h2,dialog h2,.site-header .home-logo,.site-header .home-logo-wordmark,.trend-now,.trend-avg,#intelligence .panel-heading strong){font-family:var(--at-display)!important;font-variation-settings:"opsz" 18!important}
html[lang=ko] body :is(.trend-now,.trend-avg){font-variation-settings:"opsz" 12!important;font-weight:600!important}
/* Logo stands alone (owner, 2026-10-19: "just delete everything behind or front of the logo"): no pill or circle behind it,
   no blur, no border, no icon shadow, and the BETA tag stays (owner). A soft text shadow keeps it readable on the art. */
html body .site-header .home-logo{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-left:2px!important;padding-right:2px!important;text-shadow:0 1px 14px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.5)}
html body .site-header .home-logo .home-logo-icon{box-shadow:none!important;filter:none!important}
html body .site-header .home-logo::before,html body .site-header .home-logo::after{display:none!important;content:none!important}
/* The ✦ is replaced by the owner's wallet icon (owner, 2026-10-19). Same icon file the phone header already uses. */
html body .site-header .home-logo .home-logo-mark{display:none!important}
html body .site-header .home-logo .home-logo-icon{display:block!important;width:32px!important;height:32px!important;border-radius:9px!important;flex:none}
@media (max-width:520px){html body .site-header .home-logo .home-logo-icon{width:38px!important;height:38px!important;border-radius:11px!important}}
html body .site-header .home-logo{gap:10px!important}
html body .site-header .home-logo .home-logo-icon{order:-1!important}
/* Discount graph as the first-page feature (owner 2026-10-19: "really draw the ... sales percentage graph"): a taller plot
   (game-signal-ui viewBox 360x150), a champagne line with a soft glow that rises into place (atelier.js), round joins. */
html body .price-trend .trend-line{stroke-width:2.4!important;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--trend) 55%,transparent))}
html body .price-trend .trend-area{opacity:.5}
html body .price-trend :is(.trend-dot,.trend-halo,.trend-now-label){transform-box:view-box}
html body .price-trend .trend-grid{stroke-dasharray:1 4;stroke-opacity:.14!important}
html body .price-trend .trend-now-label{font-size:12px!important;font-weight:600}
/* Desktop: the panel widens so the graph reads as the feature (plot about 430 x 180 px instead of 340 x 140). */
@media (min-width:1100px){html body .hero{grid-template-columns:minmax(0,1fr) 470px!important}}
/* Looking back: yesterday / 1 week / 1 month values from the real record, under the graph (owner 2026-10-19). */
html body .price-trend .trend-back{list-style:none;margin:8px 0 0;padding:8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--at-hair)}
html body .price-trend .trend-back li{display:flex;flex-direction:column;gap:2px;min-width:0}
html body .price-trend .trend-back span{font-size:11px;color:#a9aaae}
html body .price-trend .trend-back b{font-family:var(--at-mono);font-size:13px;font-weight:500;color:#e4e5e8;font-variant-numeric:tabular-nums}
html body .price-trend .trend-back-up b{color:var(--at-up)}
html body .price-trend .trend-back-down b{color:var(--at-down)}

/* ===================================================================================================================
   Animation smoothness (anim plan, 2026-10-20). Mechanism only: every value, curve and resting look stays as it was.
   =================================================================================================================== */
/* S2: the pointer-depth engine (smooth.js) writes these on the tilting surface itself, and only that surface reads them, so they
   do not inherit: a tilt frame restyles one element instead of its whole subtree. Initial values are the old var() fallbacks.
   The --depth-shine* values stay inherited (the ::after layer reads them). */
@property --depth-rx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --depth-ry{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --depth-lift{syntax:'<length>';inherits:false;initial-value:0px}
@property --depth-shadow-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --depth-shadow-y{syntax:'<length>';inherits:false;initial-value:18px}
@property --depth-power{syntax:'<number>';inherits:false;initial-value:0}
/* M4: the counting figure keeps one width and its text changes lay out only itself. */
html body #intelligence .trend-now{font-variant-numeric:lining-nums tabular-nums;contain:layout paint}
/* S8: the calculator fold lays out and paints only itself while its height slides. */
html body details[data-folding]{contain:layout paint}
/* S9: scroll-in card rise, a little quicker (stagger is 40 ms per card, capped at 4, in smooth.js). */
html body:not(.motion-off) :is(.motion-enter,.game-card.motion-enter,.deal-card.motion-enter){animation-duration:560ms!important}
/* S10: promotion slides share one grid cell, so the existing 360 ms opacity crossfade (ui-polish.css) actually plays. */
html body #deals .promotion-pages{display:grid}
html body #deals .promotion-slide{grid-area:1/1;min-width:0}
html body #deals .promotion-slide[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
/* S11: a game card's selection eases in and out (tint and edge only); its transform is never transitioned. */
html body:not(.motion-off) .games-section .game-card,html body:not(.motion-off) .games-section .game-card.selected{transition:background-color .2s ease,border-color .2s ease!important}
/* S12: skeleton sheens move a highlight layer with transform (compositor) instead of repainting a moving background each frame. */
html body .deal-skeleton .sk{position:relative;overflow:hidden;background:#ffffff0d;animation:none}
html body .deal-skeleton .sk::after{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;pointer-events:none;
  background:linear-gradient(100deg,#ffffff00 30%,#ffffff10 50%,#ffffff00 70%);transform:translateX(-100%);animation:at-sk-sweep 1.6s ease-in-out infinite}
@keyframes at-sk-sweep{to{transform:translateX(0)}}
html body.motion-off .deal-skeleton .sk::after{animation:none}
html body #dialog .auth .auth-skeleton .auth-skeleton-row{position:relative;overflow:hidden;background:var(--surface-inset);animation:account-skeleton-in 320ms ease 400ms both}
html body #dialog .auth .auth-skeleton .auth-skeleton-row::after{content:"";position:absolute;top:0;bottom:0;left:0;width:250%;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(237,235,228,.06) 50%,transparent 65%);transform:translateX(-60%);animation:at-auth-sweep 1.8s ease-in-out 720ms infinite}
@keyframes at-auth-sweep{to{transform:translateX(0)}}
@media not all{html body #dialog .auth .auth-skeleton .auth-skeleton-row::after{animation:none}}
/* S17: the refresh label keeps one width while its text changes (the other label, data-alt, sizes it invisibly). */
html body .refresh-button>span[data-alt]{display:inline-block}
html body .refresh-button>span[data-alt]::before{content:attr(data-alt);display:block;height:0;overflow:hidden;visibility:hidden;white-space:nowrap}
/* S18: filter pills respond in 200 ms on the site curve. */
html body:not(.motion-off) .filter-tabs button{transition:background-color .2s var(--at-ease),border-color .2s var(--at-ease),color .2s var(--at-ease),box-shadow .2s var(--at-ease)!important}