/* ================================================================
   Light theme — the original amanahdev.net palette.
   Generated by _tools/build-light.js from the original stylesheets;
   applies only when <html data-mode="light">.
   ================================================================ */

/* --- from styles.css --- */
html:not(#_)[data-mode="light"] {
  --brand: #2563eb;
  --brand-2: #3b82f6;
  --brand-light: #60a5fa;
  --brand-dark: #1e40af;
  --navy: #0b1a3a;
  --cream: #f7f5f0;
  --ink: #0d0d10;
  --night: #050913;
  --night-2: rgba(14,20,38,.72);
  --night-3: #121a30;
  --line-dark: rgba(255,255,255,.08);
  --line-dark-2: rgba(255,255,255,.14);
  --fg-dark: #f4f4f6;
  --fg-dark-soft: #a3adc6;
  --fg-dark-mute: #66718d;
  --grad: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #0b1a3a 100%);
  --grad-light: linear-gradient(135deg, rgba(59,130,246,.12), rgba(37,99,235,.06));
}
html:not(#_)[data-mode="light"][data-theme="light"] {
  --bg: #f7f5f0;
  --bg-soft: #efece5;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --text: #0d0d10;
  --text-soft: #52525b;
  --muted: #8b8b94;
  --border: #e4e1d9;
  --border-strong: #cfcbc1;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.16);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,.35);
}
html:not(#_)[data-mode="light"][data-theme="dark"] {
  --bg: #09090b;
  --bg-soft: #111114;
  --surface: #121216;
  --surface-2: #18181c;
  --text: #f4f4f6;
  --text-soft: #a1a1aa;
  --muted: #6b6b74;
  --border: #232329;
  --border-strong: #34343c;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,.85);
}
html:not(#_)[data-mode="light"] body {
  background: var(--bg, var(--cream));
  color: var(--text, var(--ink));
}
html:not(#_)[data-mode="light"]:has(body.home) {
  background: var(--night);
}
html:not(#_)[data-mode="light"] body.home {
  color: var(--fg-dark);
}
html:not(#_)[data-mode="light"] ::selection {
  background: rgba(37,99,235,.25);
}
html:not(#_)[data-mode="light"] .eyebrow {
  color: var(--brand);
}
html:not(#_)[data-mode="light"] .lead {
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .muted {
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .ico {
  stroke: currentColor;
}
html:not(#_)[data-mode="light"] .ico-fill {
  fill: currentColor;
}
html:not(#_)[data-mode="light"] .loader {
  background: #070b17;
  color: #e6edff;
}
html:not(#_)[data-mode="light"] .loader::after {
  background: radial-gradient(closest-side, rgba(37,99,235,.18), transparent);
}
html:not(#_)[data-mode="light"] .ld-name {
  color: #f4f7ff;
}
html:not(#_)[data-mode="light"] .ld-sub {
  color: rgba(191,219,254,.6);
}
html:not(#_)[data-mode="light"] .ld-line {
  background: rgba(148,163,184,.18);
}
html:not(#_)[data-mode="light"] .loader-bar {
  background: linear-gradient(90deg, #3b82f6, #bfdbfe);
}
html:not(#_)[data-mode="light"] .scroll-progress {
  background: linear-gradient(90deg, #1d4ed8, #60a5fa, #a5f3fc);
  box-shadow: 0 0 12px rgba(96,165,250,.8);
}
html:not(#_)[data-mode="light"] .b1 {
  background: radial-gradient(closest-side, rgba(37,99,235,.30), transparent 70%);
}
html:not(#_)[data-mode="light"] .b2 {
  background: radial-gradient(closest-side, rgba(14,165,233,.20), transparent 70%);
}
html:not(#_)[data-mode="light"] .b3 {
  background: radial-gradient(closest-side, rgba(99,102,241,.24), transparent 70%);
}
html:not(#_)[data-mode="light"] .bg-grid {
  background-image: linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px);
  background-size: 80px 80px;
}
html:not(#_)[data-mode="light"] .beam {
  background: linear-gradient(90deg, transparent, rgba(147,197,253,.75), transparent);
}
html:not(#_)[data-mode="light"] .bg-spot {
  background: radial-gradient(closest-side, rgba(96,165,250,.13), transparent);
}
html:not(#_)[data-mode="light"] .nav-bar {
  background: rgba(255,255,255,.62);
  color: var(--ink);
  border: 1px solid rgba(13,13,16,.07);
  box-shadow: 0 10px 30px -14px rgba(11,26,58,.25);
}
html:not(#_)[data-mode="light"] .nav.on-dark .nav-bar {
  background: rgba(8,12,24,.72);
  color: #fff;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
}
html:not(#_)[data-mode="light"] .nav-links a:hover {
  background: rgba(13,13,16,.05);
}
html:not(#_)[data-mode="light"] .nav.on-dark .nav-links a:hover {
  background: rgba(255,255,255,.07);
}
html:not(#_)[data-mode="light"] .nav-links a[aria-current="page"] {
  background: rgba(37,99,235,.1);
  color: var(--brand);
}
html:not(#_)[data-mode="light"] .nav.on-dark .nav-links a[aria-current="page"] {
  background: rgba(96,165,250,.14);
  color: #bfdbfe;
}
html:not(#_)[data-mode="light"] .lang-btn {
  border: 1px solid currentColor;
  border-color: rgba(127,127,140,.28);
}
html:not(#_)[data-mode="light"] .flag-ico {
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
html:not(#_)[data-mode="light"] .lang-menu {
  background: #0d1426;
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.6);
}
html:not(#_)[data-mode="light"] .lang-menu li:hover {
  background: rgba(255,255,255,.07);
}
html:not(#_)[data-mode="light"] .lang-menu li.active {
  color: var(--brand-light);
}
html:not(#_)[data-mode="light"] .btn::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
}
html:not(#_)[data-mode="light"] .btn-blue {
  background: var(--brand-2);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
html:not(#_)[data-mode="light"] .btn-blue:hover {
  background: #4f8ff7;
}
html:not(#_)[data-mode="light"] .btn-dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
html:not(#_)[data-mode="light"] .btn-dark:hover {
  background: #1b2340;
}
html:not(#_)[data-mode="light"] .btn-ghost {
  background: rgba(255,255,255,.7);
  color: var(--ink);
  border-color: rgba(13,13,16,.12);
}
html:not(#_)[data-mode="light"] .btn-ghost:hover {
  background: #fff;
  border-color: rgba(13,13,16,.25);
}
html:not(#_)[data-mode="light"] .btn-light {
  background: #fff;
  color: var(--ink);
}
html:not(#_)[data-mode="light"] .btn-light:hover {
  background: #e9efff;
}
html:not(#_)[data-mode="light"] .btn-outline-light {
  background: rgba(255,255,255,.03);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
html:not(#_)[data-mode="light"] .btn-outline-light:hover {
  background: rgba(255,255,255,.09);
}
html:not(#_)[data-mode="light"] .btn-primary {
  background: var(--brand-2);
  color: #fff;
}
html:not(#_)[data-mode="light"] .btn-primary:hover {
  background: #4f8ff7;
}
html:not(#_)[data-mode="light"] .btn-outline {
  color: var(--text);
  border-color: var(--border-strong);
}
html:not(#_)[data-mode="light"] .btn-outline:hover {
  border-color: var(--text);
}
html:not(#_)[data-mode="light"] .menu-btn {
  border: 1px solid rgba(127,127,140,.28);
}
html:not(#_)[data-mode="light"] .menu-btn span {
  background: currentColor;
}
html:not(#_)[data-mode="light"] .text-link {
  color: var(--brand-light);
}
html:not(#_)[data-mode="light"] .text-link span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
}
html:not(#_)[data-mode="light"] .light-top {
  background: var(--cream);
  color: var(--ink);
}
html:not(#_)[data-mode="light"] .light-top::after {
  background: var(--night);
}
html:not(#_)[data-mode="light"] .hero-dots {
  background-image: radial-gradient(rgba(11,26,58,.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
html:not(#_)[data-mode="light"] .hero-aurora {
  background: radial-gradient(30% 35% at 72% 40%, rgba(59,130,246,.30), transparent 70%),
    radial-gradient(25% 30% at 88% 70%, rgba(14,165,233,.22), transparent 70%),
    radial-gradient(30% 30% at 20% 10%, rgba(99,102,241,.12), transparent 70%);
}
html:not(#_)[data-mode="light"] .hero-pill {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(13,13,16,.08);
  box-shadow: 0 2px 8px rgba(11,26,58,.06);
  color: #3f3f46;
}
html:not(#_)[data-mode="light"] .pill-tag {
  background: var(--navy);
  color: #fff;
}
html:not(#_)[data-mode="light"] .light-top h1 {
  color: var(--ink);
}
html:not(#_)[data-mode="light"] .h1-accent {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6 40%, #0ea5e9 60%, #1d4ed8);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
html:not(#_)[data-mode="light"] .hero-lead {
  color: #4b5470;
}
html:not(#_)[data-mode="light"] .hero-stats {
  border-top: 1px solid rgba(13,13,16,.09);
}
html:not(#_)[data-mode="light"] .hero-stats strong {
  color: var(--ink);
}
html:not(#_)[data-mode="light"] .hero-stats span {
  color: #6b7280;
}
html:not(#_)[data-mode="light"] .contours .ring {
  stroke: #2563eb;
}
html:not(#_)[data-mode="light"] .contours .orbit {
  fill: #3b82f6;
}
html:not(#_)[data-mode="light"] .contours circle {
  stroke: rgba(96,165,250,.35);
}
html:not(#_)[data-mode="light"] .hero-mark {
  filter: drop-shadow(0 10px 30px rgba(37,99,235,.45));
}
html:not(#_)[data-mode="light"] .float-chip {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(13,13,16,.07);
  box-shadow: 0 14px 30px -12px rgba(11,26,58,.3);
  color: var(--ink);
}
html:not(#_)[data-mode="light"] .float-chip .ico {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 10px -2px rgba(37,99,235,.55);
}
html:not(#_)[data-mode="light"] .float-chip:hover {
  box-shadow: 0 24px 40px -14px rgba(37,99,235,.45);
}
html:not(#_)[data-mode="light"] .float-chip::after {
  background: radial-gradient(closest-side, rgba(11,26,58,.28), transparent);
}
html:not(#_)[data-mode="light"] .chip-dot {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}
html:not(#_)[data-mode="light"] .crumb {
  color: #6b7280;
}
html:not(#_)[data-mode="light"] .crumb a:hover {
  color: var(--brand);
}
html:not(#_)[data-mode="light"] .jump a {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(13,13,16,.08);
}
html:not(#_)[data-mode="light"] .jump a:hover {
  background: #fff;
}
html:not(#_)[data-mode="light"] .section h2,
html:not(#_)[data-mode="light"] .statement-section h2 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .kicker {
  color: var(--brand-light);
}
html:not(#_)[data-mode="light"] .kicker::before {
  background: linear-gradient(90deg, transparent, var(--brand-light));
}
html:not(#_)[data-mode="light"] .section-lead {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .glass {
  background: linear-gradient(180deg, rgba(20,28,52,.7), rgba(10,15,30,.7));
  border: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .stack-card {
  background: linear-gradient(160deg, #0f1730 0%, #0a1022 100%);
  border: 1px solid rgba(148,163,184,.13);
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.9);
}
html:not(#_)[data-mode="light"] .stack-card::after {
  background: #050913;
}
html:not(#_)[data-mode="light"] .stack-card::before {
  background: radial-gradient(closest-side, rgba(59,130,246,.2), transparent);
}
html:not(#_)[data-mode="light"] .stack-card.is-blue {
  background: radial-gradient(120% 120% at 100% 0%, #4b8bff 0%, #2563eb 40%, #1a3aa8 100%);
  border-color: rgba(255,255,255,.15);
}
html:not(#_)[data-mode="light"] .stack-num,
html:not(#_)[data-mode="light"] .svc .stack-num {
  border: 1px solid rgba(148,163,184,.25);
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .is-blue .stack-num {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
html:not(#_)[data-mode="light"] .stack-card h3 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .stack-card p {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .is-blue p {
  color: rgba(255,255,255,.88);
}
html:not(#_)[data-mode="light"] .is-blue .text-link {
  color: #fff;
}
html:not(#_)[data-mode="light"] .photo {
  background: #0b1224;
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
html:not(#_)[data-mode="light"] .photo::after {
  background: linear-gradient(180deg, transparent 45%, rgba(5,9,19,.55));
}
html:not(#_)[data-mode="light"] .photo-chip {
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}
html:not(#_)[data-mode="light"] .photo-chip .ico {
  color: var(--brand);
}
html:not(#_)[data-mode="light"] .statement {
  color: #fff;
}
html:not(#_)[data-mode="light"] .statement .w.hl.lit {
  color: #7fb0ff;
}
html:not(#_)[data-mode="light"] .case {
  background: linear-gradient(160deg, rgba(16,24,46,.92), rgba(8,12,24,.92));
  border: 1px solid rgba(59,130,246,.22);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
html:not(#_)[data-mode="light"] .case:hover {
  border-color: rgba(96,165,250,.5);
}
html:not(#_)[data-mode="light"] .case::before {
  background: radial-gradient(500px 300px at 0% 0%, rgba(37,99,235,.22), transparent 70%);
}
html:not(#_)[data-mode="light"] .case-info {
  border-right: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"][dir="rtl"] .case-info {
  border-left: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .badge-live {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.35);
  color: #4ade80;
}
html:not(#_)[data-mode="light"] .badge-live i {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
html:not(#_)[data-mode="light"] .badge-tag {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.2);
  color: #dbe4f8;
}
html:not(#_)[data-mode="light"] .case h3 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .case-desc {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .case-meta div {
  border-top: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .case-meta dt {
  color: var(--fg-dark-mute);
}
html:not(#_)[data-mode="light"] .case-meta dd {
  color: #fff;
}
html:not(#_)[data-mode="light"] .case-foot {
  border-top: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .case-url {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .case-go {
  background: var(--brand-2);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(37,99,235,.9);
}
html:not(#_)[data-mode="light"] .case-go:hover {
  background: #4f8ff7;
}
html:not(#_)[data-mode="light"] .case-stage {
  background: radial-gradient(70% 70% at 60% 100%, rgba(37,99,235,.28), transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 28px;
}
html:not(#_)[data-mode="light"] .case-browser {
  background: #0e1426;
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
}
html:not(#_)[data-mode="light"] .cb-bar {
  background: #161e36;
}
html:not(#_)[data-mode="light"] .cb-bar > span {
  background: rgba(255,255,255,.2);
}
html:not(#_)[data-mode="light"] .cb-url {
  background: rgba(255,255,255,.05);
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .cb-screen {
  background: #fff;
}
html:not(#_)[data-mode="light"] .case-phone {
  background: #0b0f1c;
  border: 1px solid rgba(148,163,184,.3);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.9), inset 0 0 0 2px #1c2440;
}
html:not(#_)[data-mode="light"] .case-phone::before {
  background: #232c48;
}
html:not(#_)[data-mode="light"] .cp-screen {
  background: #fff;
}
html:not(#_)[data-mode="light"] .timeline-line {
  background: rgba(148,163,184,.15);
}
html:not(#_)[data-mode="light"] .timeline-line span {
  background: linear-gradient(90deg, #1d4ed8, #60a5fa, #a5f3fc);
  box-shadow: 0 0 14px rgba(96,165,250,.8);
}
html:not(#_)[data-mode="light"] .timeline .step {
  background: linear-gradient(180deg, rgba(20,28,52,.7), rgba(10,15,30,.7));
  border: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .timeline .step::before {
  background: #0a1022;
  border: 2px solid rgba(148,163,184,.4);
}
html:not(#_)[data-mode="light"] .timeline .step.done::before {
  background: #60a5fa;
  border-color: #93c5fd;
  box-shadow: 0 0 16px #60a5fa;
}
html:not(#_)[data-mode="light"] .step-num {
  background: linear-gradient(180deg, #93c5fd, rgba(96,165,250,.1));
  -webkit-background-clip: text;
  background-clip: text;
}
html:not(#_)[data-mode="light"] .timeline .step h4 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .timeline .step p {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .svc-sub {
  color: var(--fg-dark-mute);
}
html:not(#_)[data-mode="light"] .ticks li {
  color: #dbe4f8;
}
html:not(#_)[data-mode="light"] .ticks li::before {
  background: rgba(59,130,246,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html:not(#_)[data-mode="light"] .inc,
html:not(#_)[data-mode="light"] .value-card {
  background: linear-gradient(180deg, rgba(20,28,52,.7), rgba(10,15,30,.7));
  border: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .inc::after,
html:not(#_)[data-mode="light"] .value-card::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(96,165,250,.16), transparent 60%);
}
html:not(#_)[data-mode="light"] .inc:hover,
html:not(#_)[data-mode="light"] .value-card:hover {
  border-color: rgba(96,165,250,.35);
}
html:not(#_)[data-mode="light"] .inc-ico {
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(96,165,250,.25);
  color: #93c5fd;
}
html:not(#_)[data-mode="light"] .inc h4,
html:not(#_)[data-mode="light"] .value-card h3 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .inc p,
html:not(#_)[data-mode="light"] .value-card p {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .story-mark {
  background: radial-gradient(circle at 50% 50%, rgba(37,99,235,.35), transparent 65%), #0a1022;
  border: 1px solid rgba(148,163,184,.14);
}
html:not(#_)[data-mode="light"] .story-mark svg {
  filter: drop-shadow(0 0 40px rgba(59,130,246,.6));
}
html:not(#_)[data-mode="light"] .story-word {
  color: rgba(191,219,254,.7);
}
html:not(#_)[data-mode="light"] .faq-item {
  background: linear-gradient(180deg, rgba(20,28,52,.7), rgba(10,15,30,.7));
  border: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .faq-item[open] {
  border-color: rgba(96,165,250,.35);
}
html:not(#_)[data-mode="light"] .faq-item summary {
  color: #fff;
}
html:not(#_)[data-mode="light"] .faq-n {
  color: var(--fg-dark-mute);
}
html:not(#_)[data-mode="light"] .faq-item summary .ico {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .faq-item[open] summary .ico {
  color: var(--brand-light);
}
html:not(#_)[data-mode="light"] .faq-item p {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .contact-list li {
  background: linear-gradient(180deg, rgba(20,28,52,.7), rgba(10,15,30,.7));
  border: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .contact-list li:hover {
  border-color: rgba(96,165,250,.35);
}
html:not(#_)[data-mode="light"] .contact-list strong {
  color: var(--fg-dark-mute);
}
html:not(#_)[data-mode="light"] .contact-list a,
html:not(#_)[data-mode="light"] .contact-list span {
  color: #fff;
}
html:not(#_)[data-mode="light"] .ci-ico {
  background: rgba(59,130,246,.14);
  color: #93c5fd;
}
html:not(#_)[data-mode="light"] .ci-ico.whatsapp {
  background: rgba(37,211,102,.14);
  color: #4ade80;
}
html:not(#_)[data-mode="light"] .apply-panel {
  background: linear-gradient(160deg, #1d4ed8, #1e3a8a 70%, #172554);
  color: #e6edff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 40px 80px -30px rgba(37,99,235,.6);
}
html:not(#_)[data-mode="light"] .apply-panel .kicker {
  color: #bfdbfe;
}
html:not(#_)[data-mode="light"] .apply-panel .kicker::before {
  background: linear-gradient(90deg, transparent, #bfdbfe);
}
html:not(#_)[data-mode="light"] .apply-panel h3 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .apply-panel > p {
  color: rgba(230,237,255,.82);
}
html:not(#_)[data-mode="light"] .apply-panel .ticks li {
  color: #fff;
}
html:not(#_)[data-mode="light"] .apply-panel .ticks li::before {
  background-color: rgba(255,255,255,.16);
}
html:not(#_)[data-mode="light"] .apply-alt {
  color: rgba(219,230,255,.7);
}
html:not(#_)[data-mode="light"] .apply-alt a {
  color: #fff;
}
html:not(#_)[data-mode="light"] .cta-card {
  background: radial-gradient(80% 120% at 50% 120%, #2563eb 0%, #1e3a8a 40%, #0b1430 80%);
  border: 1px solid rgba(96,165,250,.3);
  box-shadow: 0 50px 100px -40px rgba(37,99,235,.6);
}
html:not(#_)[data-mode="light"] .cta-card::before {
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(147,197,253,.22) 75%, transparent 90%);
}
html:not(#_)[data-mode="light"] .cta-card::after {
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
html:not(#_)[data-mode="light"] .cta-card .section-lead {
  color: rgba(219,230,255,.8);
}
html:not(#_)[data-mode="light"] .cta-card .kicker {
  color: #bfdbfe;
}
html:not(#_)[data-mode="light"] .footer {
  color: var(--fg-dark-soft);
}
html:not(#_)[data-mode="light"] .footer-glow {
  background: linear-gradient(90deg, transparent, #3b82f6 30%, #a5f3fc 50%, #3b82f6 70%, transparent);
  box-shadow: 0 0 40px 6px rgba(59,130,246,.45);
}
html:not(#_)[data-mode="light"] .footer-big {
  background: linear-gradient(180deg, rgba(147,197,253,.30) 0%, rgba(96,165,250,.08) 60%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html:not(#_)[data-mode="light"] .footer-brand .logo {
  color: #fff;
}
html:not(#_)[data-mode="light"] .footer-col h4 {
  color: #fff;
}
html:not(#_)[data-mode="light"] .footer-col a:hover {
  color: #fff;
}
html:not(#_)[data-mode="light"] .footer-bottom {
  border-top: 1px solid rgba(148,163,184,.12);
}
html:not(#_)[data-mode="light"] .footer-bottom p {
  color: var(--fg-dark-mute);
}
@media (max-width: 1100px) {
  html:not(#_)[data-mode="light"] .nav-links {
    background: rgba(8,12,24,.97);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  }
  html:not(#_)[data-mode="light"] .nav-links a {
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  html:not(#_)[data-mode="light"] .nav-links a[aria-current="page"] {
    color: #93c5fd;
  }
  html:not(#_)[data-mode="light"] .nav-links .nav-mobile-cta {
    background: var(--brand-2);
    color: #fff;
  }
}
@media (max-width: 900px) {
  html:not(#_)[data-mode="light"] .case-info {
    border-bottom: 1px solid rgba(148,163,184,.12);
  }
}
html:not(#_)[data-mode="light"] .err-lines {
  stroke: #c3cbe0;
}
html:not(#_)[data-mode="light"] .err-panel {
  fill: rgba(59,130,246,.10);
}
html:not(#_)[data-mode="light"] .err-dots {
  stroke: #c3cbe0;
}
html:not(#_)[data-mode="light"] .err-code {
  stroke: #9fb0d6;
}
html:not(#_)[data-mode="light"] .err-arc,
html:not(#_)[data-mode="light"] .err-bar {
  stroke: #2563eb;
}
html:not(#_)[data-mode="light"] .err-mark rect {
  fill: #fff;
  stroke: #dbe3f3;
  filter: drop-shadow(0 18px 30px rgba(11,26,58,.18));
}
html:not(#_)[data-mode="light"] .err-shadow {
  fill: rgba(11,26,58,.14);
}
html:not(#_)[data-mode="light"] .err-label {
  color: var(--brand);
}

/* --- from apply/apply.css --- */
html:not(#_)[data-mode="light"] .apply-body {
  background: var(--bg);
  color: var(--text);
}
html:not(#_)[data-mode="light"] .apply-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
html:not(#_)[data-mode="light"] .mini-select,
html:not(#_)[data-mode="light"] .mini-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
html:not(#_)[data-mode="light"] .mini-select:hover,
html:not(#_)[data-mode="light"] .mini-btn:hover {
  border-color: var(--border-strong);
}
html:not(#_)[data-mode="light"] .apply-main .eyebrow {
  color: var(--brand);
}
html:not(#_)[data-mode="light"] .apply-main .lead {
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .step {
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
html:not(#_)[data-mode="light"] .step .dot {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
html:not(#_)[data-mode="light"] .step.is-current {
  color: var(--text);
  border-bottom-color: var(--brand);
}
html:not(#_)[data-mode="light"] .step.is-current .dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
html:not(#_)[data-mode="light"] .step.is-done {
  color: var(--text-soft);
  border-bottom-color: var(--brand-light);
}
html:not(#_)[data-mode="light"] .step.is-done .dot {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: #fff;
}
html:not(#_)[data-mode="light"] .field > span {
  color: var(--text);
}
html:not(#_)[data-mode="light"] .field b {
  color: var(--brand);
}
html:not(#_)[data-mode="light"] .field input,
html:not(#_)[data-mode="light"] .field select,
html:not(#_)[data-mode="light"] .field textarea {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}
html:not(#_)[data-mode="light"] .field input:focus,
html:not(#_)[data-mode="light"] .field select:focus,
html:not(#_)[data-mode="light"] .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
html:not(#_)[data-mode="light"] .field input[readonly] {
  background: var(--surface-2);
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .field input[aria-invalid="true"],
html:not(#_)[data-mode="light"] .field select[aria-invalid="true"],
html:not(#_)[data-mode="light"] .field textarea[aria-invalid="true"] {
  border-color: #dc2626;
}
html:not(#_)[data-mode="light"] .hint {
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .err {
  color: #dc2626;
}
html:not(#_)[data-mode="light"] .chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
html:not(#_)[data-mode="light"] .chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
html:not(#_)[data-mode="light"] .check {
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .check input {
  accent-color: var(--brand);
}
html:not(#_)[data-mode="light"] .drop {
  border: 1.5px dashed var(--border-strong);
  background: var(--surface-2);
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .drop:hover,
html:not(#_)[data-mode="light"] .drop:focus-visible,
html:not(#_)[data-mode="light"] .drop.is-over {
  border-color: var(--brand);
  background: var(--grad-light);
  color: var(--text);
}
html:not(#_)[data-mode="light"] .drop em {
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .filelist li {
  border: 1px solid var(--border);
  background: var(--surface);
}
html:not(#_)[data-mode="light"] .filelist .fsize {
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .filelist button {
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .filelist button:hover {
  color: #dc2626;
  background: var(--surface-2);
}
html:not(#_)[data-mode="light"] .notice {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .notice-error {
  border-color: rgba(220, 38, 38, .4);
  background: rgba(220, 38, 38, .07);
  color: #b91c1c;
}
html:not(#_)[data-mode="light"][data-theme="dark"] .notice-error {
  color: #fca5a5;
}
html:not(#_)[data-mode="light"] .notice strong {
  color: var(--text);
}
html:not(#_)[data-mode="light"] .done-mark {
  background: rgba(5, 150, 105, .12);
  color: #059669;
}
html:not(#_)[data-mode="light"] .done p {
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .done .ref code {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
html:not(#_)[data-mode="light"] .done .fine {
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .apply-foot {
  border-top: 1px solid var(--border);
  color: var(--muted);
}
html:not(#_)[data-mode="light"] .apply-foot a {
  color: var(--text-soft);
}
html:not(#_)[data-mode="light"] .apply-foot a:hover {
  color: var(--brand);
}

/* ===== hand-written light-mode fixes below this line ===== */
/* The logo's SVG gradients carry the dark theme's chrome stops in the
   HTML; stop-color in CSS beats those attributes. */
html:not(#_)[data-mode="light"] #amGrad stop:nth-of-type(1) { stop-color: #60a5fa; }
html:not(#_)[data-mode="light"] #amGrad stop:nth-of-type(2) { stop-color: #2563eb; }
html:not(#_)[data-mode="light"] #amGrad stop:nth-of-type(3) { stop-color: #0b1a3a; }
html:not(#_)[data-mode="light"] #amGradBar stop:nth-of-type(1) { stop-color: #93c5fd; }
html:not(#_)[data-mode="light"] #amGradBar stop:nth-of-type(2) { stop-color: #2563eb; }

/* the redesign scoped graphite accents to the chips; light uses blue */
html:not(#_)[data-mode="light"] .photo-chip { --brand: #2563eb; --brand-2: #3b82f6; --brand-light: #60a5fa; }

/* application page */
html:not(#_)[data-mode="light"] .apply-body .bg-fx { display: none; }
html:not(#_)[data-mode="light"] .apply-card {
  background: rgba(255,255,255,.82);
  box-shadow: 0 30px 60px -36px rgba(11,26,58,.3), inset 0 1px 0 #fff;
}
html:not(#_)[data-mode="light"] .progress-fill { background: linear-gradient(90deg, #1d4ed8, #60a5fa 50%, #2563eb); background-size: 200% 100%; }
html:not(#_)[data-mode="light"] .step.is-current .dot,
html:not(#_)[data-mode="light"] .step.is-done .dot { box-shadow: 0 0 0 4px rgba(37,99,235,.14); }
html:not(#_)[data-mode="light"] .done-mark { background: rgba(5,150,105,.12); color: #059669; box-shadow: none; }
html:not(#_)[data-mode="light"] .apply-main h1 { background: none; color: var(--text); animation: none; }
html:not(#_)[data-mode="light"] .field input,
html:not(#_)[data-mode="light"] .field select,
html:not(#_)[data-mode="light"] .field textarea { background: #fff; }
html:not(#_)[data-mode="light"] .field select option { background: #fff; color: #0d0d10; }
html:not(#_)[data-mode="light"] .apply-head { background: rgba(255,255,255,.75); }

/* theme switch on the cream nav */
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .mode-btn { background: rgba(13,13,16,.04); }

/* the dark sections: the dark theme's moving background, in the original
   site's navy and blue rather than black and silver */
html:not(#_)[data-mode="light"]:has(body.home) { background: #0a1430; }
html:not(#_)[data-mode="light"] .bg-fx .b1 { background: radial-gradient(closest-side, rgba(37,99,235,.26), transparent 70%); }
html:not(#_)[data-mode="light"] .bg-fx .b2 { background: radial-gradient(closest-side, rgba(14,165,233,.14), transparent 70%); }
html:not(#_)[data-mode="light"] .bg-fx .b3 { background: radial-gradient(closest-side, rgba(99,102,241,.18), transparent 70%); }
html:not(#_)[data-mode="light"] .bg-fx .bg-grid {
  background-image: radial-gradient(rgba(147,197,253,.22) 1px, transparent 1.3px);
  background-size: 32px 32px;
}
/* the cream hero ends in the same dome as before, but cut out with a mask
   instead of painted on, so the moving background below shows through it */
html:not(#_)[data-mode="light"] .light-top::after { display: none; }
html:not(#_)[data-mode="light"] .light-top {
  -webkit-mask-image: radial-gradient(ellipse 55% 90px at 50% calc(100% + 1px), transparent calc(100% - 1px), #000 100%);
          mask-image: radial-gradient(ellipse 55% 90px at 50% calc(100% + 1px), transparent calc(100% - 1px), #000 100%);
}
html:not(#_)[data-mode="light"] .section::before { background: linear-gradient(90deg, transparent, rgba(147,197,253,.22), transparent); }
/* the body's own fill covered the fixed .bg-fx layer (z-index -1), hiding
   the dots, glows and lines; let the html background show through instead */
html:not(#_)[data-mode="light"] body.home { background: transparent; }

/* service cards: cream panels like the light hero instead of navy */
html:not(#_)[data-mode="light"] .stack-card {
  --lm-chrome: #ffffff 0%, #bfdbfe 14%, #3b82f6 30%, #1e3a8a 42%, #93c5fd 55%, #ffffff 64%, #2563eb 78%, #0b1a3a 88%, #dbeafe 100%;
  background: linear-gradient(160deg, #ffffff 0%, #f7f5f0 100%);
  color: var(--ink);
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.7), 0 30px 60px -40px rgba(0,0,0,.6);
}
html:not(#_)[data-mode="light"] .stack-card::after { background: #d9d5cc; }
html:not(#_)[data-mode="light"] .stack-card::before { background: radial-gradient(closest-side, rgba(37,99,235,.12), transparent); }
html:not(#_)[data-mode="light"] .stack-card .card-spot {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,.08), transparent 60%);
}
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) h3 { color: var(--ink); }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) p { color: #50545c; }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .stack-num {
  border-color: rgba(13,13,16,.16);
  color: #50545c;
}
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .text-link { color: var(--brand); }
html:not(#_)[data-mode="light"] .stack-card .photo {
  background: #fff;
  box-shadow: 0 24px 50px -30px rgba(11,26,58,.45);
}
html:not(#_)[data-mode="light"] .stack-card .photo::after { background: linear-gradient(180deg, transparent 55%, rgba(11,26,58,.25)); }
html:not(#_)[data-mode="light"] .stack-card .stack-num { background: rgba(255,255,255,.7); }
html:not(#_)[data-mode="light"] .stack-card.is-blue .stack-num { background: rgba(255,255,255,.14); }
/* the glass nav takes the navy tint over the navy sections */
html:not(#_)[data-mode="light"] .nav.on-dark .nav-bar {
  background: linear-gradient(180deg, rgba(16,32,74,.72), rgba(10,20,48,.62));
  border-color: rgba(147,197,253,.16);
}

/* button borders: blue chrome without the near-black bands, which read as
   a grey smudge on cream */
html:not(#_)[data-mode="light"] {
  --lm-chrome: #ffffff 0%, #dbeafe 14%, #93c5fd 30%, #3b82f6 42%, #bfdbfe 55%, #ffffff 64%, #60a5fa 78%, #2563eb 88%, #e0ecff 100%;
}
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .mode-btn,
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .lang-btn {
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  color: var(--ink);
  box-shadow: 0 6px 16px -10px rgba(11,26,58,.35), inset 0 1px 0 #fff;
}
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .mode-btn::before,
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .lang-btn::before { opacity: .75; }
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .mode-btn:hover,
html:not(#_)[data-mode="light"] .nav:not(.on-dark) .lang-btn:hover { background: #fff; }
/* on the blue button the rim is light glass rather than a second blue */
html:not(#_)[data-mode="light"] .btn-blue {
  --lm-chrome: #ffffff 0%, #dbeafe 18%, #93c5fd 34%, #bfdbfe 50%, #ffffff 64%, #93c5fd 80%, #e0ecff 100%;
  box-shadow: 0 10px 24px -12px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
html:not(#_)[data-mode="light"] .btn-blue::before { opacity: .7; }
html:not(#_)[data-mode="light"] .btn:focus-visible,
html:not(#_)[data-mode="light"] .lang-btn:focus-visible { outline-color: var(--brand); }
html:not(#_)[data-mode="light"] {
  --lm-shine:
    transparent 0deg, transparent 40deg,
    rgba(255,255,255,.95) 62deg, rgba(191,219,254,.8) 74deg, rgba(147,197,253,.55) 84deg,
    transparent 104deg, transparent 220deg,
    rgba(255,255,255,.8) 240deg, rgba(186,230,253,.6) 252deg,
    transparent 274deg, transparent 360deg;
  --lm-flow:
    transparent 0deg, rgba(255,255,255,.55) 28deg, transparent 58deg,
    transparent 150deg, rgba(255,255,255,.4) 172deg, rgba(191,219,254,.4) 184deg, transparent 205deg,
    transparent 290deg, rgba(219,234,254,.4) 310deg, transparent 332deg;
}

/* cards toned down: soft blue-grey instead of bright white, deeper blue card */
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) {
  background: linear-gradient(160deg, #b9c4d8 0%, #9fadc6 100%);
}
html:not(#_)[data-mode="light"] .stack-card::after { background: #0a1430; }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) p { color: #262d3a; }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .stack-num { background: rgba(255,255,255,.45); border-color: rgba(11,26,58,.18); }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .text-link { color: #1239a8; }
html:not(#_)[data-mode="light"] .stack-card.is-blue {
  background: radial-gradient(120% 120% at 100% 0%, #2558c4 0%, #1a40b0 40%, #0f2468 100%);
}

/* cards: deep navy, a step above the page so they still lift off it */
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) {
  background: linear-gradient(160deg, #1a2b5c 0%, #101c40 100%);
}
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) h3 { color: #fff; }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) p { color: #b4c0da; }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .stack-num {
  background: rgba(255,255,255,.06);
  border-color: rgba(147,197,253,.3);
  color: #dbe5f7;
}
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .text-link { color: #93c5fd; }
html:not(#_)[data-mode="light"] .stack-card .card-spot {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(96,165,250,.14), transparent 60%);
}
html:not(#_)[data-mode="light"] .stack-card::before { background: radial-gradient(closest-side, rgba(59,130,246,.22), transparent); }
html:not(#_)[data-mode="light"] .stack-card::after { background: #050a1c; }
html:not(#_)[data-mode="light"] .stack-card .photo { background: #0b1430; box-shadow: 0 24px 50px -28px rgba(0,0,0,.8); }
html:not(#_)[data-mode="light"] .stack-card.is-blue {
  background: radial-gradient(120% 120% at 100% 0%, #1f4fb8 0%, #163a96 40%, #0c1d55 100%);
}

/* card borders on navy: a thin, quiet blue hairline with one soft moving
   highlight, instead of a bright white chrome band all the way round */
html:not(#_)[data-mode="light"] .stack-card,
html:not(#_)[data-mode="light"] .stack-card .photo {
  --lm-border: 1px;
  --lm-chrome: #1e3a8a 0%, #3b82f6 18%, #1e40af 34%, #60a5fa 52%, #1e3a8a 68%, #2563eb 84%, #1e3a8a 100%;
  --lm-flow: transparent 0deg, transparent 360deg;
  --lm-shine:
    transparent 0deg, transparent 50deg,
    rgba(147,197,253,.55) 70deg, rgba(219,234,254,.9) 80deg, rgba(147,197,253,.55) 90deg,
    transparent 110deg, transparent 360deg;
}
html:not(#_)[data-mode="light"] .stack-card .metal { opacity: .6; }
html:not(#_)[data-mode="light"] .stack-card:hover .metal { opacity: .95; }
html:not(#_)[data-mode="light"] .stack-card .photo .metal { opacity: .45; }
html:not(#_)[data-mode="light"] .stack-card:hover .photo .metal { opacity: .8; }

/* cards as on the original site: near-black navy, bright royal-blue
   featured card, faint borders */
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) {
  background: linear-gradient(160deg, #0f1730 0%, #0a1022 100%);
}
html:not(#_)[data-mode="light"] .stack-card.is-blue {
  background: radial-gradient(120% 120% at 100% 0%, #4b8bff 0%, #2563eb 40%, #1a3aa8 100%);
}
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) p { color: #a3adc6; }
html:not(#_)[data-mode="light"] .stack-card.is-blue p { color: rgba(255,255,255,.85); }
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .stack-num {
  background: transparent;
  border-color: rgba(148,163,184,.25);
  color: #a3adc6;
}
html:not(#_)[data-mode="light"] .stack-card.is-blue .stack-num {
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
html:not(#_)[data-mode="light"] .stack-card:not(.is-blue) .text-link { color: #60a5fa; }
html:not(#_)[data-mode="light"] .stack-card.is-blue .text-link { color: #fff; }
html:not(#_)[data-mode="light"] .stack-card::after { background: #050913; }
html:not(#_)[data-mode="light"] .stack-card .metal { opacity: .35; }
html:not(#_)[data-mode="light"] .stack-card:hover .metal { opacity: .7; }
html:not(#_)[data-mode="light"] .stack-card .photo .metal { opacity: .25; }
html:not(#_)[data-mode="light"] .stack-card:hover .photo .metal { opacity: .55; }

/* even 1px edge all the way round (the faint animated chrome came and went
   on navy); the chrome only shows on hover */
html:not(#_)[data-mode="light"] .stack-card {
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,.2),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 -20px 60px -30px rgba(0,0,0,.9);
}
html:not(#_)[data-mode="light"] .stack-card.is-blue {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 -20px 60px -30px rgba(0,0,0,.9);
}
html:not(#_)[data-mode="light"] .stack-card .photo {
  box-shadow: 0 0 0 1px rgba(148,163,184,.2), 0 24px 50px -28px rgba(0,0,0,.8);
}
html:not(#_)[data-mode="light"] .stack-card .metal { opacity: 0; }
html:not(#_)[data-mode="light"] .stack-card:hover > .metal { opacity: .7; }
html:not(#_)[data-mode="light"] .stack-card:hover .photo .metal { opacity: .5; }