:root{
    --quartz-bg: #F5F1E7;
    --quartz-card: #FFFFFF;
    --quartz-card-edge: #FDFBF4;
    --ink: #2B2620;
    --ink-soft: #85795F;
    --gold: #C9A227;
    --gold-light: #F1D888;
    --gold-pale: #F7ECC6;
    --gold-deep: #8B6B14;
    --gold-text-on-gold: #33260A;
    --gold-gradient: linear-gradient(135deg, #F7E9B8 0%, #D9B23C 40%, #B8860B 75%, #EAC96B 100%);
    --garnet: #7C2D2D;
    --garnet-pale: #F4E2E0;
    --line: #E4DAC0;
    --line-soft: #EFE7D2;
    --focus: #8B6B14;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  *{ box-sizing: border-box; }

  html{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body{
    margin:0;
    background-color: var(--quartz-bg);
    background-image:
      radial-gradient(ellipse 900px 480px at 12% -8%, rgba(212,178,90,0.14), transparent 62%),
      radial-gradient(ellipse 700px 420px at 108% 8%, rgba(180,148,90,0.11), transparent 60%),
      radial-gradient(ellipse 820px 520px at 45% 118%, rgba(201,162,39,0.09), transparent 62%),
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MjAiIGhlaWdodD0iNjIwIj4KPHBhdGggZD0iTS00MCw5MCBDMTEwLDQwIDIzMCwxNzAgMzYwLDk1IFM1ODAsMTUgNjYwLDEyMCIgc3Ryb2tlPSJyZ2JhKDE3MCwxMzgsNzQsMC4xNikiIHN0cm9rZS13aWR0aD0iMS42IiBmaWxsPSJub25lIi8+CjxwYXRoIGQ9Ik0tMzAsMzQwIEMxMTAsMjcwIDI3MCw0MDAgNDMwLDMxMCBTNjEwLDM1MCA2NjAsMjcwIiBzdHJva2U9InJnYmEoMTUwLDEyMCw2NCwwLjEzKSIgc3Ryb2tlLXdpZHRoPSIxLjMiIGZpbGw9Im5vbmUiLz4KPHBhdGggZD0iTTYwLC0zMCBDMTAwLDE1MCA0NSwyNzAgMTUwLDQzMCBTMTMwLDYxMCAyMTAsNjYwIiBzdHJva2U9InJnYmEoMTgwLDE1MCw4NiwwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjMiIGZpbGw9Im5vbmUiLz4KPHBhdGggZD0iTTQyMCwtNDAgQzQ2MCwxMzAgMzk1LDIzMCA0NzAsMzcwIFM0MzAsNTgwIDUxMCw2NDAiIHN0cm9rZT0icmdiYSgxNjAsMTMyLDcwLDAuMTApIiBzdHJva2Utd2lkdGg9IjEuMSIgZmlsbD0ibm9uZSIvPgo8cGF0aCBkPSJNMjQwLDIwIEMyNjAsMTIwIDIxMCwxODAgMjYwLDI2MCIgc3Ryb2tlPSJyZ2JhKDE5MCwxNjAsOTUsMC4xMCkiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=");
    background-size: auto, auto, auto, 620px 620px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    color: var(--ink);
    font-family: var(--font-body);
    min-height:100vh;
    display:flex;
    justify-content:center;
    padding: 40px 16px 64px;
  }

  .page{ width:100%; max-width: 660px; }

  .masthead{ text-align:center; margin-bottom: 26px; }
  .brand-logo{
    width: 72px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 3px 8px rgba(139,107,20,0.28));
  }
  .brand-name{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 20px;
  }
  .eyebrow{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 6px;
  }
  .title{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 42px;
    margin: 0;
    color: var(--ink);
    letter-spacing: 0.3px;
  }
  .subtitle{
    font-size: 14px;
    color: var(--ink-soft);
    margin: 8px 0 0;
  }
  .masthead-divider{
    width: 64px;
    height: 2px;
    background: var(--gold-gradient);
    margin: 18px auto 0;
    border-radius: 2px;
  }

  .ladder{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin: 30px 4px 22px;
    gap: 4px;
  }
  .rung{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    position:relative;
  }
  .rung:not(:last-child)::after{
    content:"";
    position:absolute;
    top:17px;
    left:calc(50% + 21px);
    width:calc(100% - 21px);
    height:2px;
    background: var(--line);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 300ms ease-out, background-color 250ms ease;
  }
  .rung.passed:not(:last-child)::after{
    background: var(--gold);
    transform: scaleX(1);
    animation: ladder-connector 300ms ease-out both;
    animation-delay: calc(var(--step-index, 0) * 90ms);
  }
  .rung-dot{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-body); font-size:11.5px; font-weight:700;
    border:2px solid var(--line);
    background: var(--quartz-card);
    color: var(--ink-soft);
    z-index:1;
    position:relative;
  }
  .rung.active .rung-dot{
    border-color: var(--gold);
    color: var(--gold-deep);
    box-shadow: 0 0 0 4px rgba(201,162,39,0.16);
  }
  .rung.passed .rung-dot{
    background: var(--gold-gradient);
    border-color: var(--gold-deep);
    color: var(--gold-text-on-gold);
    animation: rung-pop 300ms cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--step-index, 0) * 90ms);
  }
  .rung.passed .rung-dot::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.55);
  }
  .rung.failed .rung-dot{
    background: var(--quartz-card);
    border-color: var(--garnet);
    color: var(--garnet);
  }
  .rung-label{
    margin-top:7px;
    font-size:11px;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-weight: 500;
  }

  .card{
    position: relative;
    background: linear-gradient(180deg, var(--quartz-card-edge), var(--quartz-card) 40%);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 36px 34px;
    box-shadow: 0 1px 0 var(--line-soft), 0 22px 44px -26px rgba(139,107,20,0.38);
    overflow: hidden;
  }
  .card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background: var(--gold-gradient);
  }
  .card-panel{
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .25s ease, transform .25s ease;
    will-change: opacity, transform;
  }
  .card-panel-visible{
    opacity: 1;
    transform: translateX(0);
  }
  .card-panel-exit{
    opacity: 0;
    transform: translateX(-18px);
  }

  h2.screen-title{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 25px;
    margin: 0 0 6px;
    color: var(--ink);
  }
  h2.screen-title.welcome-title{
    color: var(--garnet);
  }
  .welcome-accent{
    width: 46px;
    height: 3px;
    background: var(--gold-gradient);
    border-radius: 2px;
    margin: 0 0 20px;
  }
  p.screen-lede{
    color: var(--ink-soft);
    margin: 0 0 22px;
    font-size: 15px;
    line-height:1.5;
  }

  .card-fade-exit{ opacity: 0; }
  .card-fade{
    opacity: 0;
    transform: translateX(0);
    transition: opacity .55s ease;
    will-change: opacity;
  }
  .card-fade.card-panel-visible{
    opacity: 1;
    transform: translateX(0);
  }

  label.field-label{
    display:block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 6px;
  }
  input[type="text"], input[type="tel"], input[type="date"], textarea{
    width:100%;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  input[type="text"]:focus, input[type="tel"]:focus, input[type="date"]:focus, textarea:focus{
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,162,39,0.14);
  }
  input[type="text"]:focus-visible, input[type="tel"]:focus-visible, input[type="date"]:focus-visible, textarea:focus-visible, button:focus-visible, .opt:focus-visible{
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .field-group{ margin-bottom: 16px; }
  textarea{ resize: vertical; min-height: 96px; line-height:1.5; }

  .choice-group{ margin-bottom: 14px; }
  .choice{
    display:block;
    width:100%;
    text-align:left;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14.5px;
    cursor:pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .choice:hover{ border-color: var(--gold); }
  .choice.selected{
    border-color: var(--gold);
    background: rgba(201,162,39,0.08);
    font-weight:600;
    box-shadow: inset 3px 0 0 var(--gold);
  }

  .choice .format-name{
    display:block;
    font-weight:700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 3px;
  }
  .choice .format-desc{
    display:block;
    font-weight:400;
    font-size: 13px;
    color: var(--ink-soft);
  }
  .choice.selected .format-name{ color: var(--gold-deep); }

  fieldset{
    border: none;
    padding: 0;
    margin: 0 0 20px;
  }
  fieldset legend{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 0;
  }
  .qnum{
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--gold-deep);
    margin-right: 6px;
  }
  .opt{
    display:block;
    width:100%;
    text-align:left;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    cursor:pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s cubic-bezier(.2,.8,.2,1);
  }
  .opt:hover{ border-color: var(--gold); transform: translateX(3px); box-shadow: 0 3px 10px -6px rgba(139,107,20,0.35); }
  .opt:active{ transform: translateX(3px) scale(0.985); transition-duration: .08s; }
  .opt.selected{
    border-color: var(--gold);
    background: rgba(201,162,39,0.08);
    font-weight:600;
    box-shadow: inset 3px 0 0 var(--gold);
    animation: opt-select-pop .28s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes opt-select-pop{
    0%{ transform: scale(0.97); }
    60%{ transform: scale(1.01); }
    100%{ transform: scale(1); }
  }

  .btn{
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight:700;
    padding: 12px 22px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor:pointer;
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
  }
  .btn:hover:not(:disabled){
    transform: translateY(-2px);
  }
  .btn:active:not(:disabled){
    transform: translateY(0) scale(0.97);
    transition-duration: .08s;
  }
  .btn-primary{
    background: var(--gold-gradient);
    color: var(--gold-text-on-gold);
    border-color: var(--gold-deep);
  }
  .btn-shine{
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn-shine::before{
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(120deg, transparent 10%, rgba(255,255,255,0.22) 45%, transparent 85%);
    transform: translateX(-140%) rotate(18deg);
    opacity: 0;
    animation: button-shine 7.5s ease-in-out infinite;
    pointer-events: none;
  }
  .btn-primary:hover:not(:disabled){
    filter: brightness(1.08);
    box-shadow: 0 10px 22px -8px rgba(139,107,20,0.6);
  }
  .btn-primary:disabled{ background:#EDE6D0; color:#B7AC90; border-color: var(--line); cursor:not-allowed; }
  .btn-ghost{
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line);
  }
  .btn-ghost:hover{ border-color: var(--gold-deep); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(139,107,20,0.4); }

  .row{ display:flex; justify-content:space-between; align-items:center; margin-top: 22px; gap: 12px; flex-wrap: wrap; }
  .row.end{ justify-content:flex-end; }

  .send-status{
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .send-status.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  .send-status.success{ color: var(--gold-deep); }
  .send-status.error{ color: var(--garnet); }

  .block-meta{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    color: var(--gold-deep);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .seal-wrap{ display:flex; justify-content:center; margin: 6px 0 22px; }
  .seal-medal{
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--gold-gradient);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 12px 26px -12px rgba(139,107,20,0.6), inset 0 0 0 1px rgba(255,255,255,0.4);
    opacity: 0;
    transform: scale(0.82);
    filter: drop-shadow(0 0 0 rgba(201,162,39,0));
  }
  .seal-medal.reveal{
    opacity: 1;
    transform: scale(1);
    animation: medal-appear 600ms ease-out both;
  }
  .seal-medal.stamp-animate{
    animation: medal-appear 600ms ease-out both, stamp-apply 400ms cubic-bezier(.2,.8,.2,1.15) 140ms both;
  }
  .seal-medal::before{
    content:"";
    position:absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.55);
  }
  .seal-code{
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight:700;
    color: var(--gold-text-on-gold);
  }

  .result-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 18px 0;
    font-size: 13.5px;
  }
  .result-item{
    border-top: 1px solid var(--line-soft);
    padding-top: 8px;
  }
  .result-item .k{
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--gold-deep);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display:block;
    margin-bottom: 3px;
  }
  .result-item .v{ font-weight:600; color: var(--ink); }

  .trace{
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 18px;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
  }

  .writing-echo{
    background:#fff;
    border:1px solid var(--line-soft);
    border-radius:3px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--ink);
    white-space: pre-wrap;
    margin-top:6px;
  }

  .foot-note{
    text-align:center;
    color: var(--ink-soft);
    font-size: 12px;
    margin-top: 22px;
  }

  .status-indicator{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto 18px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.75);
    color: var(--gold-deep);
  }
  .status-indicator.offline{
    color: var(--garnet);
    border-color: var(--garnet-pale);
    background: rgba(244,226,224,0.7);
  }

  .confetti-layer{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
  .confetti-piece{
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(135deg, #f7e6a7 0%, var(--gold) 50%, #8b6b14 100%);
    opacity: 0;
    animation: confetti-fall 1s ease-out forwards;
  }

  @keyframes ladder-connector{
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes rung-pop{
    0% { transform: scale(0.86); }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  @keyframes medal-appear{
    0% { opacity: 0; transform: scale(0.82); filter: drop-shadow(0 0 0 rgba(201,162,39,0)); }
    100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 10px 22px rgba(139,107,20,0.22)); }
  }
  @keyframes stamp-apply{
    0% { transform: scale(0.9); }
    55% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  @keyframes button-shine{
    0%, 100% { transform: translateX(-140%) rotate(18deg); opacity: 0; }
    10% { opacity: 0.16; }
    35% { transform: translateX(140%) rotate(18deg); opacity: 0.16; }
  }
  @keyframes confetti-fall{
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    12% { opacity: 0.85; }
    100% { opacity: 0; transform: translate3d(var(--drift, 24px), 132px, 0) rotate(240deg); }
  }

  @media (max-width:480px){
    .card{ padding: 26px 20px; }
    .title{ font-size: 32px; }
    .brand-logo{ width: 58px; }
    .result-grid{ grid-template-columns: 1fr; }
    .rung-label{ display:none; }
  }

  @media print{
    body{ background:#fff; padding:0; }
    .ladder, .foot-note, .no-print{ display:none !important; }
    .card{ box-shadow:none; border:none; padding:0; }
  }

.timer-box{
  position: fixed;
  top: 15px;
  right: 15px;
  background: #fff;
  border: 1px solid #C9A227;
  border-radius: 6px;
  padding: 10px 15px;
  font-weight: 700;
  color: #8B6B14;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* PREMIUM UPGRADE - VISUAL ONLY */
body{
background:
radial-gradient(circle at top left, rgba(212,154,47,.18), transparent 30%),
radial-gradient(circle at bottom right, rgba(212,154,47,.12), transparent 30%),
#f6f2e9 !important;
}

.card{
border-radius:18px !important;
border:1px solid rgba(201,162,39,.35) !important;
box-shadow:0 30px 80px rgba(0,0,0,.10),0 0 40px rgba(201,162,39,.10) !important;
}

.title{
font-size:54px !important;
letter-spacing:1px !important;
}

.screen-title{
font-size:34px !important;
}

.opt,.choice{
border-radius:12px !important;
padding:14px 16px !important;
}

.opt:hover,.choice:hover{
transform:translateY(-2px) !important;
}

.btn-primary{
box-shadow:0 12px 30px rgba(201,162,39,.35) !important;
}

.timer-box{
border-radius:14px !important;
padding:12px 18px !important;
font-size:18px !important;
background:rgba(255,255,255,.95) !important;
box-shadow:0 10px 30px rgba(201,162,39,.25) !important;
}

.rung-dot{
width:42px !important;
height:42px !important;
}

.result-grid{
gap:20px !important;
}


.premium-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:20px 0;
}
.premium-stat{
background:rgba(201,162,39,.08);
border:1px solid rgba(201,162,39,.25);
padding:12px;
border-radius:12px;
text-align:center;
font-weight:700;
}
.hero-message{
background:linear-gradient(135deg,#fff,#faf6ea);
border:1px solid rgba(201,162,39,.25);
padding:18px;
border-radius:14px;
margin:18px 0;
text-align:center;
}
.cta-premium{
margin-top:18px;
padding:16px;
border-radius:14px;
background:linear-gradient(135deg,#f7e9b8,#e7c85f);
text-align:center;
font-weight:700;
}


/* PREMIUM V4 */
.hero-premium{
background:linear-gradient(135deg,#fff,#f9f3df);
border:1px solid rgba(201,162,39,.35);
border-radius:22px;
padding:28px;
margin:24px 0;
text-align:center;
box-shadow:0 20px 60px rgba(201,162,39,.12);
}
.hero-premium h1{
font-size:48px;
margin:0 0 10px 0;
}
.kpi-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:18px;
}
.kpi{
padding:16px;
border-radius:16px;
background:white;
border:1px solid rgba(201,162,39,.25);
font-weight:700;
}
.luxury-banner{
margin:20px 0;
padding:18px;
border-radius:18px;
background:linear-gradient(135deg,#c9a227,#f1d888);
color:#33260A;
font-weight:700;
text-align:center;
}


/* =========================================================
   RESPONSIVE PREMIUM THEME
   Keeps the exact same visual language on desktop + phone.
   ========================================================= */

:root{
  --quartz-bg:#090806;
  --quartz-card:#11100D;
  --quartz-card-edge:#17140F;
  --ink:#F5F1E8;
  --ink-soft:#A9A08D;
  --gold:#D4A72C;
  --gold-light:#F2D77A;
  --gold-pale:#3A2D10;
  --gold-deep:#D9AE3B;
  --gold-text-on-gold:#171107;
  --line:#332C1D;
  --line-soft:#282318;
  --focus:#F1CF68;
  --garnet:#E59A8F;
  --garnet-pale:#3B2421;
  color-scheme:dark;
}

html{
  background:#090806;
  scroll-behavior:smooth;
}

body{
  min-height:100svh;
  padding:clamp(24px,4vw,46px) 16px 56px;
  background:
    radial-gradient(700px 420px at 8% -5%, rgba(212,167,44,.12), transparent 65%),
    radial-gradient(650px 420px at 105% 10%, rgba(212,167,44,.08), transparent 62%),
    radial-gradient(700px 460px at 50% 110%, rgba(212,167,44,.06), transparent 68%),
    #090806 !important;
  color:var(--ink);
  overflow-x:hidden;
}

.page{
  width:100%;
  max-width:720px;
}

.masthead{
  position:relative;
  text-align:center;
  margin:18px 0 24px;
  padding:10px 8px 0;
}

.brand-logo{
  width:76px;
  height:76px;
  object-fit:contain;
  margin:0 auto 12px;
  filter:drop-shadow(0 8px 22px rgba(212,167,44,.20));
}

.brand-name{
  color:var(--gold);
  font-size:13px;
  letter-spacing:4px;
  margin-bottom:18px;
}

.eyebrow{
  color:#968D7A;
  font-size:10px;
  letter-spacing:2.8px;
}

.title{
  color:#F7F2E9;
  font-size:clamp(40px,7vw,62px) !important;
  line-height:.95;
  letter-spacing:.2px !important;
}

.subtitle{
  color:#9C9381;
  font-size:14px;
  margin-top:12px;
}

.masthead-divider{
  width:72px;
  height:2px;
  margin-top:20px;
  background:linear-gradient(90deg,transparent,#D4A72C,transparent);
}

.ladder{
  margin:24px 4px 22px;
  gap:2px;
}

.rung:not(:last-child)::after{
  background:#2C2619;
}

.rung-dot{
  width:38px !important;
  height:38px !important;
  border-color:#3A3223;
  background:#151411;
  color:#8E8675;
}

.rung.active .rung-dot{
  border-color:var(--gold);
  color:var(--gold-light);
  background:#1B170F;
  box-shadow:0 0 0 5px rgba(212,167,44,.10);
}

.rung.passed .rung-dot{
  background:linear-gradient(135deg,#F6DE91,#C99A22);
  border-color:#8F6B16;
  color:#171107;
}

.rung-label{
  color:#807765;
}

.card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 26%),
    #11100D !important;
  border:1px solid rgba(212,167,44,.28) !important;
  border-radius:22px !important;
  padding:clamp(24px,4vw,38px) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.42),
    0 0 45px rgba(212,167,44,.07) !important;
}

.card::before{
  height:3px;
  background:linear-gradient(90deg,#8B6513,#D4A72C,#F0D477,#D4A72C,#8B6513);
}

.screen-title,
h2.screen-title{
  color:#F5F1E8;
  font-size:clamp(26px,4vw,34px) !important;
  line-height:1.08;
}

h2.screen-title.welcome-title{
  color:#F2C2BE;
}

.screen-lede{
  color:#9F9787 !important;
  font-size:15px;
  line-height:1.6;
}

.welcome-accent{
  background:linear-gradient(90deg,#8B6513,#E0B945);
}

.field-group{margin-bottom:18px;}

label.field-label{
  color:var(--gold);
  font-size:10px;
  letter-spacing:1.8px;
}

input[type="text"],
input[type="tel"],
input[type="date"],
textarea{
  width:100%;
  min-height:52px;
  padding:14px 15px;
  border:1px solid #393225;
  border-radius:13px;
  background:#1D1E23;
  color:#F1EEE7;
  -webkit-text-fill-color:#F1EEE7;
  font-size:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

input::placeholder,
textarea::placeholder{
  color:#6E6C70;
  opacity:1;
}

input[type="date"]{
  color-scheme:dark;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus{
  border-color:#C89B2A;
  box-shadow:0 0 0 4px rgba(212,167,44,.10);
}

.choice-group{margin-bottom:16px;}

.choice,
.opt{
  min-height:52px;
  border:1px solid #393225;
  border-radius:14px !important;
  background:#1D1E23;
  color:#EEEAE2;
  box-shadow:none;
}

.choice{
  padding:14px 16px !important;
}

.choice:hover,
.opt:hover{
  border-color:#A77E20;
  background:#24251A;
}

.choice.selected,
.opt.selected{
  border-color:#D4A72C;
  background:rgba(212,167,44,.10);
  color:#FFF7DF;
  box-shadow:inset 3px 0 0 #D4A72C,0 8px 22px rgba(0,0,0,.18);
}

.choice .format-name,
.opt{
  color:#EEEAE2;
}

.choice .format-desc{
  color:#918B7E;
}

.choice.selected .format-name{
  color:#F0C95A;
}

fieldset{
  margin-bottom:20px;
}

fieldset legend{
  color:#ECE8DF;
  line-height:1.4;
  margin-bottom:10px;
}

.qnum{
  color:#D4A72C;
}

.btn{
  min-height:50px;
  border-radius:13px;
  padding:13px 20px;
  font-size:14px;
}

.btn-primary{
  background:linear-gradient(135deg,#F0D47C 0%,#D4A72C 45%,#B98212 100%);
  border-color:#8F6A17;
  color:#171107;
}

.btn-primary:disabled{
  background:#29261E;
  color:#777160;
  border-color:#393225;
}

.btn-ghost{
  color:#AAA292;
  border-color:#393225;
  background:#151411;
}

.btn-ghost:hover{
  color:#F0ECE4;
  border-color:#A77E20;
}

.row{
  margin-top:24px;
}

.timer-box{
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  padding:10px 14px !important;
  min-width:108px;
  text-align:center;
  border:1px solid #A77E20;
  border-radius:15px !important;
  background:rgba(10,9,7,.88) !important;
  color:#E3BB50;
  box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:16px !important;
  z-index:9999;
}

.status-indicator{
  background:#151411;
  color:#D4A72C;
  border-color:#393225;
}

.writing-echo{
  background:#1D1E23;
  border-color:#393225;
  color:#EEEAE2;
}

.result-item{
  border-top-color:#30291D;
}

.result-item .k{
  color:#CDA83E;
}

.result-item .v{
  color:#F2EEE5;
}

.trace{
  color:#8D8678;
  border-top-color:#393225;
}

.foot-note{
  color:#777161;
}

.hero-premium,
.hero-message,
.kpi,
.premium-stat{
  background:#151411;
  border-color:#3B3222;
  color:#EEEAE2;
  box-shadow:0 14px 35px rgba(0,0,0,.20);
}

.luxury-banner,
.cta-premium{
  background:linear-gradient(135deg,#B98515,#F0D477);
  color:#171107;
}

@media (max-width:700px){
  body{
    padding:18px 12px 38px;
  }

  .page{
    max-width:100%;
  }

  .masthead{
    margin-top:38px;
    margin-bottom:18px;
    padding-top:6px;
  }

  .brand-logo{
    width:64px;
    height:64px;
    margin-bottom:10px;
  }

  .brand-name{
    font-size:11px;
    letter-spacing:3.2px;
    margin-bottom:15px;
  }

  .eyebrow{
    font-size:9px;
    letter-spacing:2.2px;
  }

  .title{
    font-size:clamp(38px,12vw,52px) !important;
    line-height:.96;
  }

  .subtitle{
    font-size:13px;
    line-height:1.45;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }

  .ladder{
    margin:20px 0 16px;
  }

  .rung-dot{
    width:36px !important;
    height:36px !important;
    font-size:10px;
  }

  .rung-label{
    display:none;
  }

  .rung:not(:last-child)::after{
    top:17px;
    left:calc(50% + 18px);
    width:calc(100% - 18px);
  }

  .card{
    padding:24px 18px 22px !important;
    border-radius:19px !important;
  }

  .screen-title,
  h2.screen-title{
    font-size:28px !important;
  }

  .screen-lede{
    font-size:14px;
    line-height:1.55;
  }

  .field-group{
    margin-bottom:16px;
  }

  input[type="text"],
  input[type="tel"],
  input[type="date"],
  textarea{
    min-height:54px;
    border-radius:13px;
  }

  .choice,
  .opt{
    min-height:54px;
    padding:14px 15px !important;
    font-size:15px;
  }

  fieldset{
    margin-bottom:19px;
  }

  fieldset legend{
    font-size:15px;
  }

  .row{
    gap:10px;
  }

  .row .btn{
    flex:1 1 auto;
  }

  .timer-box{
    top:max(10px,env(safe-area-inset-top));
    right:10px;
    min-width:96px;
    padding:9px 12px !important;
    font-size:14px !important;
  }
}

@media (max-width:380px){
  body{padding-left:9px;padding-right:9px;}
  .card{padding-left:15px !important;padding-right:15px !important;}
  .screen-title,h2.screen-title{font-size:25px !important;}
  .brand-name{letter-spacing:2.7px;}
  .rung-dot{width:33px !important;height:33px !important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
iframe[name="sheetSubmitFrame"] {
  display: none !important;
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
html,
body {
  touch-action: pan-y;
}


/* =========================================================
   NURIK'S ACADEMY — MARBLE BEIGE LIGHT THEME
   Final visual overrides: keeps the existing HTML/JS intact.
   ========================================================= */

:root{
  --quartz-bg:#F1ECE2;
  --quartz-card:#FBF8F1;
  --quartz-card-edge:#FFFDF8;
  --ink:#2B2721;
  --ink-soft:#746B5D;
  --gold:#A97820;
  --gold-light:#D7B45A;
  --gold-pale:#F2E6C8;
  --gold-deep:#8B641A;
  --gold-text-on-gold:#2C210C;
  --gold-gradient:linear-gradient(135deg,#8B641A 0%,#C89A32 48%,#A97820 100%);
  --line:#D8CCB7;
  --line-soft:#E9E0D0;
  --focus:#A97820;
  --garnet:#7C2D2D;
  --garnet-pale:#F1DEDA;
  color-scheme:light;
}

html{
  background:#F1ECE2;
}

body{
  color:var(--ink);
  background-color:#F1ECE2 !important;
  background-image:
    radial-gradient(900px 520px at 8% -8%,rgba(255,255,255,.82),transparent 62%),
    radial-gradient(760px 480px at 108% 12%,rgba(214,188,132,.18),transparent 64%),
    radial-gradient(820px 540px at 45% 112%,rgba(196,160,83,.12),transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-40 90 C110 40 230 170 360 95 S580 15 660 120' stroke='%23b69b6a' stroke-opacity='.16' stroke-width='1.5'/%3E%3Cpath d='M-30 340 C110 270 270 400 430 310 S610 350 660 270' stroke='%239e865b' stroke-opacity='.12' stroke-width='1.2'/%3E%3Cpath d='M60 -30 C100 150 45 270 150 430 S130 610 210 660' stroke='%23c5ad7b' stroke-opacity='.13' stroke-width='1.2'/%3E%3Cpath d='M420 -40 C460 130 395 230 470 370 S430 580 510 640' stroke='%23a78c5e' stroke-opacity='.10' stroke-width='1.1'/%3E%3Cpath d='M240 20 C260 120 210 180 260 260' stroke='%23c8b17f' stroke-opacity='.12' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,auto,auto,620px 620px;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
}

/* Main content card: warm ivory stone instead of dark charcoal. */
.card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.12) 45%,rgba(218,198,160,.10)),
    #FBF8F1 !important;
  border:1px solid rgba(169,120,32,.34) !important;
  box-shadow:
    0 28px 70px rgba(82,65,38,.14),
    0 3px 12px rgba(82,65,38,.06) !important;
}

.card::before{
  background:linear-gradient(90deg,#8B641A,#C89A32,#E0C574,#C89A32,#8B641A);
}

/* The requested heading:
   🚀 Test Your English in 5 Minutes */
h2.screen-title.welcome-title,
h2.screen-title{
  color:#A97820 !important;
}

h2.screen-title.welcome-title{
  background:linear-gradient(90deg,#8B641A 0%,#C89A32 48%,#9A6D1F 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.welcome-accent{
  background:linear-gradient(90deg,#8B641A,#C89A32,#D9B45A) !important;
}

/* Supporting text */
.screen-lede,
p.screen-lede{
  color:#6F6659 !important;
}

/* Header */
.brand-name{
  color:#A97820 !important;
}

.eyebrow{
  color:#827765 !important;
}

.title{
  color:#2B2721 !important;
}

.subtitle{
  color:#746B5D !important;
}

.masthead-divider{
  background:linear-gradient(90deg,transparent,#A97820,#D3AF58,transparent) !important;
}

/* Level ladder */
.rung-dot{
  background:#F9F5EC !important;
  border-color:#CDBFA7 !important;
  color:#756B5B !important;
}

.rung-label{
  color:#756B5B !important;
}

.rung.active .rung-dot{
  background:#FFF9EA !important;
  border-color:#A97820 !important;
  color:#8B641A !important;
  box-shadow:0 0 0 5px rgba(169,120,32,.10) !important;
}

.rung.passed .rung-dot{
  background:linear-gradient(135deg,#F0D78D,#B9851F) !important;
  border-color:#8B641A !important;
  color:#2C210C !important;
}

.rung:not(:last-child)::after{
  background:#D8CCB7 !important;
}

.rung.passed:not(:last-child)::after{
  background:#B98A2A !important;
}

/* Form fields and answer options */
input[type="text"],
input[type="tel"],
input[type="date"],
textarea{
  background:#FFFDF8 !important;
  color:#2B2721 !important;
  -webkit-text-fill-color:#2B2721 !important;
  border-color:#D8CCB7 !important;
}

input::placeholder,
textarea::placeholder{
  color:#9A9182 !important;
}

.choice,
.opt{
  background:#FFFDF8 !important;
  color:#302B24 !important;
  border-color:#D8CCB7 !important;
}

.choice:hover,
.opt:hover{
  background:#FBF5E8 !important;
  border-color:#B98A2A !important;
}

.choice.selected,
.opt.selected{
  background:rgba(169,120,32,.09) !important;
  border-color:#B98A2A !important;
  color:#332710 !important;
}

.choice .format-name,
.opt{
  color:#302B24 !important;
}

.choice .format-desc{
  color:#807667 !important;
}

.choice.selected .format-name{
  color:#8B641A !important;
}

fieldset legend{
  color:#302B24 !important;
}

.qnum{
  color:#A97820 !important;
}

.field-label{
  color:#8B641A !important;
}

/* Buttons */
.btn-primary{
  background:linear-gradient(135deg,#E8C76D 0%,#C89A32 48%,#A97820 100%) !important;
  border-color:#8B641A !important;
  color:#2C210C !important;
  box-shadow:0 10px 26px rgba(169,120,32,.22) !important;
}

.btn-ghost{
  background:#FFFDF8 !important;
  color:#746B5D !important;
  border-color:#D8CCB7 !important;
}

.btn-ghost:hover{
  color:#2B2721 !important;
  border-color:#A97820 !important;
}

/* Timer */
.timer-box{
  background:rgba(255,252,245,.94) !important;
  color:#8B641A !important;
  border-color:#B98A2A !important;
  box-shadow:0 10px 28px rgba(82,65,38,.13) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Result / secondary blocks */
.hero-premium,
.hero-message,
.kpi,
.premium-stat{
  background:#FBF8F1 !important;
  border-color:#D8CCB7 !important;
  color:#302B24 !important;
  box-shadow:0 14px 35px rgba(82,65,38,.10) !important;
}

.writing-echo{
  background:#FFFDF8 !important;
  border-color:#D8CCB7 !important;
  color:#302B24 !important;
}

.result-item{
  border-top-color:#E5DCCB !important;
}

.result-item .k{
  color:#8B641A !important;
}

.result-item .v{
  color:#302B24 !important;
}

.trace{
  color:#807667 !important;
  border-top-color:#D8CCB7 !important;
}

.foot-note{
  color:#807667 !important;
}

.status-indicator{
  background:#FFFDF8 !important;
  color:#8B641A !important;
  border-color:#D8CCB7 !important;
}

.status-indicator.offline{
  background:#F5E6E2 !important;
  color:#7C2D2D !important;
  border-color:#E7C9C2 !important;
}

.luxury-banner,
.cta-premium{
  background:linear-gradient(135deg,#B98515,#E7C86D) !important;
  color:#2C210C !important;
}

/* Mobile: keep the same marble/ivory visual language. */
@media (max-width:700px){
  body{
    background-color:#F1ECE2 !important;
  }

  .card{
    background:
      linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.12)),
      #FBF8F1 !important;
  }

  h2.screen-title.welcome-title,
  h2.screen-title{
    font-size:28px !important;
  }
}

@media (max-width:380px){
  h2.screen-title.welcome-title,
  h2.screen-title{
    font-size:25px !important;
  }
}