/* ===== SealPal glass theme: the homepage (home.html) =====
   paper.css draws the background (paper with a fine grain, light by day and dark at night); this file turns
   the page's paper surfaces into glass over it, white by day and smoked at night, and styles the header over
   the opening screen. Most surfaces in home.html already use --surface, --bg and
   --line, so the theme mostly redefines those. */
:root[data-theme] body{background:transparent}
:root[data-theme] body::before{background:transparent}
main,footer{position:relative;z-index:1}

:root[data-theme=day]{
  color-scheme:light;
  --bg:rgba(255,255,255,.42);--surface:rgba(255,255,255,.58);--ink:#171614;--muted:#55524b;--line:rgba(20,18,14,.1);
  --wash:rgba(230,240,253,.66);--sun-deep:#0f5bc4;--ok:#2f6b26;--ok-wash:rgba(63,122,52,.14);--warn:#7a5000;--warn-wash:rgba(21,112,230,.2);
  --glass-border:rgba(255,255,255,.78);--glass-blur:blur(26px) saturate(170%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(40,34,24,.04)
}
:root[data-theme=night]{
  color-scheme:dark;
  --bg:rgba(255,255,255,.05);--surface:rgba(255,255,255,.075);--ink:rgba(255,255,255,.95);--muted:rgba(255,255,255,.7);--line:rgba(255,255,255,.14);
  --wash:rgba(21,112,230,.13);--sun-deep:#7fb3ff;--ok:#9ad98b;--ok-wash:rgba(143,209,127,.14);--warn:#ffcf66;--warn-wash:rgba(255,207,102,.13);
  --glass-border:rgba(255,255,255,.16);--glass-blur:blur(24px) saturate(150%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.12)
}

/* ---------- Glass surfaces ---------- */
:root[data-theme] header.top{background:rgba(255,255,255,.42);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid rgba(255,255,255,.6)}
:root[data-theme=night] header.top{background:rgba(12,12,14,.36);border-bottom-color:rgba(255,255,255,.1)}
:root[data-theme] .slip,:root[data-theme] .mock,:root[data-theme] .ask-steps li,:root[data-theme] .table-wrap,:root[data-theme] .plan,:root[data-theme] .faq details,:root[data-theme] .review-slot{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-border);box-shadow:var(--glass-shadow)
}
:root[data-theme] .slip,:root[data-theme] .mock,:root[data-theme] .ask-steps li,:root[data-theme] .table-wrap,:root[data-theme] .plan,:root[data-theme] .faq details{background:var(--surface)}
:root[data-theme] .plan.best{border:2px solid var(--sun)}
:root[data-theme] .sources{background:var(--surface);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-border)}
:root[data-theme] .lang,:root[data-theme] .menu-toggle{background:var(--surface);border-color:var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* The header's menu, when the links do not fit on one line. It hangs below the bar, where the bar's own
   blur has nothing to blur, so it is nearly opaque. */
:root[data-theme] header.top.compact.menu-open nav.menu{background:rgba(255,255,255,.92);border-color:var(--glass-border);box-shadow:var(--glass-shadow)}
:root[data-theme=night] header.top.compact.menu-open nav.menu{background:rgba(26,26,30,.94);border-color:rgba(255,255,255,.14)}
:root[data-theme] .menu-toggle[aria-expanded="true"]{border-color:var(--sun)}
:root[data-theme] .btn:not(.primary){background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:root[data-theme=night] .btn:not(.primary){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
:root[data-theme] .final .btn{background:#1b2130;border-color:#1b2130;color:#fff}
:root[data-theme] .mock-row{background:var(--bg);border-color:var(--line)}
:root[data-theme] .field select,:root[data-theme] .field input{background:var(--bg);border-color:var(--line);color:var(--ink)}
:root[data-theme] .slip-head{background:rgba(27,33,48,.9)}
:root[data-theme=night] .slip-head{background:rgba(255,255,255,.08);border-bottom:1px solid var(--line)}
:root[data-theme=night] .slip{box-shadow:var(--glass-shadow)}

/* The sign-up band stays Hibee yellow, as glass. */
:root[data-theme] .final{background:linear-gradient(135deg,rgba(77,155,255,.9),rgba(21,112,230,.86));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);color:var(--sun-ink)}
:root[data-theme] .final h2{color:var(--sun-ink)}

/* ---------- Titles in serif; the lookup slip ---------- */
/* English titles in a Latin serif: Noto Serif SC sets the apostrophe as a full-width mark ("we’ re"). */
:root[lang="en"]{--serif:"Newsreader",Georgia,"Noto Serif SC",serif}
.slip{border-radius:var(--radius-panel);text-align:left}
.section-head h2,.final h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
/* Section labels keep the small gold label style (.section-head p, meant for the line under the title, was
   overriding it). */
.section-head .eyebrow{font-size:var(--step--1);color:var(--sun-deep)}

/* ---------- The opening screen's own glass: the header over it is clear with white text ---------- */
:root[data-theme] header.top{transition:background .3s ease,border-color .3s ease}
:root[data-theme] header.top.on-hero{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
header.top.on-hero .logo b,header.top.on-hero .logo small{color:#fff}
header.top.on-hero .logo .sp-nose{fill:#fff}
header.top.on-hero .logo .sp-whisk{stroke:#fff}
header.top.on-hero:not(.compact) nav.menu a{color:rgba(255,255,255,.86)}
header.top.on-hero:not(.compact) nav.menu a:hover{color:#fff}
:root[data-theme] header.top.on-hero .jg-theme-toggle{color:#fff}
:root[data-theme] header.top.on-hero .lang,:root[data-theme] header.top.on-hero .menu-toggle,:root[data-theme] header.top.on-hero .btn:not(.primary),
:root[data-theme] .hf-cta .hf-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
:root[data-theme] .hf-cta .hf-ghost:hover{background:rgba(255,255,255,.2)}
/* The email entry point has the same size and visual weight as My Status over the hero image. */
:root[data-theme] .hf-actions .hf-access{background:#fffdf8;border-color:#fffdf8;color:#1b2130;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 22px 46px -18px rgba(0,0,0,.45)}
:root[data-theme] .hf-actions .hf-access:hover{background:#e6f0fd;border-color:#e6f0fd}

/* Small screens give the film its own original 16:9 frame. Its height must not
   depend on the amount of copy below it; numbers stay on quiet, readable paper. */
@media (max-width: 900px) {
  .hero-full { min-height: 0; margin-top: 0; padding-top: 0; overflow: visible; background: transparent; color: var(--ink); }
  .hf-visual { position: relative; inset: auto; flex: none; width: 100%; max-width: calc(var(--hero-content) + 2 * var(--page-gutter)); margin: 16px auto 0; padding-left: max(var(--page-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px)); }
  .hf-media { position: relative; inset: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-control); background: #1b2130; }
  .hf-video { object-fit: contain; }
  .hf-flow, .hf-shade, .hf-dim, .hero-full::after { display: none; }
  .hf-media .hf-pause { right: 8px; bottom: 8px; background: rgba(20, 24, 30, .72); border-color: rgba(255, 255, 255, .5); }
  .hf-body, .hf-foot { opacity: 1; translate: none; }
  .hf-body { flex: none; padding-block: 24px; }
  .hf-title { font-size: clamp(28px, 4.4vw, 36px); text-shadow: none; }
  .hf-title i { white-space: normal; }
  .hf-title > span > span, .hf-sub, .hf-act, .hf-stats { animation: none; }
  .hf-sub { margin-top: 12px; font-size: 16px; color: var(--muted); text-shadow: none; }
  .hf-act { margin-top: 20px; gap: 20px; }
  .hf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .hf-actions .hf-request { flex: 0 1 auto; min-height: 44px; max-width: 100%; padding: 8px; gap: 0; font-size: 18px; font-weight: 700; box-shadow: none; }
  .hf-request svg, .hf-label-wide { display: none; }
  .hf-label-small { display: inline; }
  :root[data-theme] .hf-actions .hf-access { background: transparent; color: var(--sun-deep); border-color: var(--sun-deep); box-shadow: none; }
  :root[data-theme] .hf-actions .hf-access:hover { background: var(--wash); border-color: var(--sun-deep); }
  .hf-ask-box { min-height: 54px; padding: 4px 4px 4px 12px; gap: 8px; background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: calc(var(--radius-control) + 4px); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hf-ask-box:focus-within { background: var(--surface); }
  .hf-ask-box input[type="search"] { height: 44px; color: var(--ink); }
  .hf-ask-box input::placeholder { color: var(--muted); }
  .hf-ask-box input::-webkit-search-cancel-button { filter: none; }
  :root[data-theme] .hf-ask-box .hf-ask-go { min-height: 44px; padding: 0 14px; border-color: transparent; background: transparent; color: var(--sun-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-theme] .hf-ask-box .hf-ask-go:hover { background: var(--wash); }
  .hf-foot { padding-bottom: 12px; }
  .hf-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10em, (100% - 48px) / 3)), 1fr)); gap: 28px 24px; padding-top: 24px; border-color: var(--line); color: var(--ink); }
  .hf-stats li { grid-template-rows: minmax(2.75em, auto) auto; gap: 8px; }
  .hf-stats b { font-size: clamp(32px, 9.2vw, 40px); line-height: 44px; }
  .hf-stats span { font-size: 14px; color: var(--muted); }
  .hf-stats .tip-i { color: var(--muted); border-color: var(--muted); }
  .hf-stats .tip-i:hover, .hf-stats .tip-i:focus-visible { color: var(--paper); }
}
@media (max-width: 600px) {
  .hf-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8em, (100% - 24px) / 2)), 1fr)); }
}

/* ---------- Bento cards on glass ---------- */
:root[data-theme] .bento-card{background:var(--surface);border-color:var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
:root[data-theme] .bento-card:hover,:root[data-theme] .bento-card:focus-visible{border-color:var(--sun)}
:root[data-theme] .b-chips>span,:root[data-theme] .b-flows li,:root[data-theme] .b-split>span,:root[data-theme] .b-q{background:var(--bg);border-color:var(--line)}
:root[data-theme] .b-search{background:var(--bg)}
/* Pricing top-up card: the same glass as the other cards */
:root[data-theme] .tk-buy{background:var(--surface);border-color:var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
:root[data-theme] .pf .zz-visual::before,:root[data-theme] .pf .zz-visual::after{border-color:var(--glass-border)}
:root[data-theme] .net-law{background:var(--surface);border-color:var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
:root[data-theme] .net-law:hover{border-color:var(--sun)}