/* ---------- Theme tokens ---------- */
:root{
  --ad-gradient: linear-gradient(90deg,#ffd39a,#ff9ec2); /* more saturated */
  --ad-border: rgba(11,15,25,.14);
  --ad-h-sm: 96px;

  --bg:hsl(230 50% 90%);
  --ink:#101828;
  --muted:#5b667a;
  --panel:#ffffff;
  --panel-soft:#f9fbff;
  --line:#e6eaf2;
  --dash:#c7c7f4;
  --brand:#5b6cff;
  --brand-500: var(--brand);
  --brand-2:#8b9aff;
  --success:#238066;
  --radius-xs: 6px; /* small pills/badges */
  --radius-sm: 10px;
  --radius:    12px;
  --radius-lg: 14px;
  --shadow:0 8px 24px rgba(17,24,39,.08);
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

  --toast-tint: var(--brand-500, #372de9);

  --ring: rgba(255,255,255,.9);
  --ctrl-ring:        rgba(34,46,80,.55);   /* base ring */
  --ctrl-ring-hover:  rgba(34,46,80,.75);   /* hover */
  --ctrl-fill:        #f9fbff;              /* gentle fill (vs pure white) */

  --radio-size: 20px;
  --radio-ring: rgba(89,101,255,.18);
  --radio-stroke: #6b7cff;
  --radio-fill: #5965ff;

  --ambient: rgba(18, 28, 60, .18);
  --brand-amb: rgba(91,108,255,.28);
  --dot: 48px;          /* circle size */
  --track-h: 6px;
  --track: #b4c0ea;     /* line color */

  --ink-200: #e5e7eb;
  --ink-900: #0b1220;
  --surface-50: #ffffff;
  --rad-3: 12px; /* or var(--radius) */

  --col-min: 600px;                /* tune as you like */
  --col-br: 2px;                   /* base border weight */
  --col-br-active: 3px;            /* active border weight */
  --col-brc: #cdd6ea;              /* base border color */
  --col-brc-active: #8ea2ff;       /* active border color */
  --col-brc-done: #4ad1ab;         /* done border color */

  --col-tint-idle:  rgba(18,28,60,.12);     /* +3% */
  --col-tint-active: rgba(91,108,255,.16);  /* +4% */
  --col-tint-done:  rgba(43,217,168,.18);   /* +3% */

  --shadow-lg-y: 26px;

  --step-label: #27324a;   /* slightly darker than current */

  --btn-xl-h: 48px;                 /* tune if needed; ~48–56px for your .btn--xl */
  --chip-h: 40px;                   /* tweak if your chip is taller/shorter */
  --clear-h: 44px;                  /* height of your Clear button row */
  --cb-size: 22px;
  --opt-row-h: 40px;

  /* type scale */
  --fs-xs: 13px;             /* legal / fine print */
  --fs-sm: 14px;             /* hints, small UI */
  --fs-base: 16px;           /* body, labels */
  --fs-lg: 18px;             /* section titles, big buttons */
  --fs-display: clamp(36px, 4.2vw + 10px, 56px);
  --fs-subdisplay: clamp(16px, 1.4vw + 10px, 20px);

  /* weights */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-black: 900;

  /* --- Spacing tokens (add to :root) --- */
  --sp-0h: 2px;
  --sp-0: 4px;      /* micro */
  --sp-1h: 6px;     /* half step */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-3h: 18px;
  --sp-3hh: 22px;
  --sp-4: 24px;
  --sp-5: 32px;
  --pad-card: var(--sp-3);
  --gap-cards: var(--sp-4);
  --gap-rows: var(--sp-2);
  --pad-dz-block: var(--sp-3);       /* replaces mixed 18/16 */
  --pad-dz-inline: var(--sp-3);
  --container-pad: 40px; /* used once below */
  --_tight: 0 !important;

  --dz-pad-top: var(--pad-dz-block);
  --dz-chip-offset: 30px;
}



/* Slightly stronger on sRGB-only displays */
@media (color-gamut: srgb) {
  :root{
    --col-tint-idle:   rgba(18,28,60,.14);     /* +2% */
    --col-tint-active: rgba(91,108,255,.18);   /* +2% */
    --col-tint-done:   rgba(43,217,168,.20);   /* +2% */
  }
}

@media (prefers-contrast: more) {
  :root{
    --col-tint-idle:   rgba(18,28,60,.18);
    --col-tint-active: rgba(91,108,255,.22);
    --col-tint-done:   rgba(43,217,168,.24);
  }
}
/* notifier */
#notify-root { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
#notify-root.is-open { pointer-events: auto; }
#notify-root .notify-backdrop { position: absolute; inset: 0; background: rgba(10,14,27,.45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .12s ease; }
#notify-root.is-open .notify-backdrop { opacity: 1; }
#notify-root .notify-modal { position: absolute; inset: 0; display: grid; place-items: center; }
#notify-root .notify-card { width: min(520px, calc(100vw - 2rem)); background: var(--surface,#fff); color: var(--ink,#111);
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 20px; transform: translateY(6px); opacity: 0; transition: all .12s ease; }
#notify-root.is-open .notify-card { transform: translateY(0); opacity: 1; }
#notify-root .notify-detail { margin-top: 8px; max-height: 160px; overflow: auto; background: rgba(0,0,0,.05); padding: 8px; border-radius: 8px; white-space: pre-wrap; }
#notify-root .notify-actions { margin-top: 14px; text-align: right; }
#notify-root .hidden { display: none !important; }


/* ---------- Base ---------- */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  background:
      radial-gradient(900px 400px at 50% -260px, hsl(230 75% 94%) 0, transparent 60%),
    var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
  line-height: 1.5;
}
h1,h2,h3{margin:0 0 .5rem}


/* help classes */
.visually-hidden{ position:absolute !important; left:-9999px; }
.row{ display:flex; align-items:center; gap: var(--gap-rows); margin:var(--sp-2) 0 }
.hint{ color:var(--muted); margin: var(--sp-1) 0; }
.microcopy{ color:#667085; }
.hint,.microcopy{ font-size: var(--fs-sm); }
label{ font-size: var(--fs-base); }

/* ---------- Steps bar ---------- */

/* Each step */
.step{
  display: grid;
  justify-items: center;
  position: relative;
}

/* Your circle — keep your existing styles, just ensure size uses --dot */
.step .circle{
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 2;              /* above the track */
  position: relative;      /* <— needed for the halo pseudo */
}

.step .label{ display:block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color:var(--step-label); }
.step.is-active{ color:#2d3760 }
.step.is-active .circle{
  background: linear-gradient(180deg,#6d7cff,#4b5cf5);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 18px rgba(77,93,248,.28),
    0 0 0 var(--sp-0) rgba(91,108,255,.22);
}
.step.is-done{ color:#1b6e57 }
.step.is-done .circle{
  background: linear-gradient(180deg,#2fe0ad,#1bbf8c);
  color:#063b2f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 18px rgba(27,191,140,.24),
    0 0 0 var(--sp-0) rgba(43,217,168,.20);
}

 /* tiny emphasis when the step is active or done */
.step.is-active .label,
.step.is-done  .label{
  filter: saturate(1.05);
}


/* 1) Stop drawing the old step-level halo */
.step.is-active::before,
.step.is-done::before{
  content:none !important;
}

/* 2) Make the circle a positioning context */
.step .circle{ position: relative; }

/* 3) Active halo on the circle */
.step.is-active .circle::after{
  content: "";
  position: absolute;
  inset: -6px;                  /* thickness of halo */
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(91,108,255,.18);
  pointer-events: none;
}

/* 4) Done halo on the circle (green) */
.step.is-done .circle::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(43,217,168,.18);
  pointer-events: none;
}

.cover-controls{
  margin-top: var(--sp-1);
  display: grid;
  gap: var(--sp-1);
  color: #344054;
}
.cover-controls .inline-hint{ color:#5b667a; font-size: var(--fs-sm); }

/* quick visual nudge helper */
.glow{ animation: glow 1.1s ease-out 1; }
@keyframes glow{
  0%{ box-shadow: 0 0 0 var(--sp-1h) rgba(91,108,255,.20); }
  100%{ box-shadow: none; }
}

/* ---------- Grid layout ---------- */
/* Grid container */
.workflow{
  max-width: 1100px;
  margin: var(--sp-2) auto;
  padding: 0 var(--sp-2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
  align-items: stretch;
}

/* Each card is a vertical stack */
.workflow .col{
  display: flex;
  flex-direction: column;
  /* your borders/shadows here are fine */
  border-width: var(--col-br);
  border-color: var(--col-brc);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(15,23,42,.06);
  
}
/* Consistent card titles across all columns */
.workflow .col h2{
  margin: 0 0 .5rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}


.col{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding: calc(var(--pad-card) + 2px);
  box-shadow:var(--shadow);
  border-color: #dde3ee;
}

.col.is-active{ 
    border-color:#c9d0ff;
    border-width: var(--col-br-active); 
    box-shadow:0 0 0 var(--sp-0h) rgba(124,156,255,.25) inset 
}

.col.is-done{ 
    border-color:#b8efd9;
    border-width: var(--col-br-active);
}

/* Desktop: all columns get the Even column height */
@media (min-width: 901px){
  .workflow .col{ height: var(--rowH, auto); }

  /* IMPORTANT: make the preview pane fit inside that fixed height */
  .col[data-step="preview"]{
    display: flex;
    flex-direction: column;
    min-height: 0;            /* allow shrink */
  }

  .col[data-step="preview"] #previewPane{
    flex: 1 1 auto;
    min-height: 0;            /* kill any floor that forces overflow */
    max-height: none;         /* no arbitrary cap fighting us */
    overflow: hidden;         /* pane scrolls its content, not the card */
    margin: 0;                /* no rogue margins pushing it out */
  }

  /* The embed should fill the pane, not the universe */
  #previewEmbed{
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
  }
}


/* tiny bottom cushion so Even doesn’t look chopped */
#evenCard{ padding-bottom: calc(var(--sp-3) + 2px); }


/* --- Panel tints only (doesn't change .dz at all) -------------------- */

/* Idle: neither active nor done */
.workflow .col:not(.is-active):not(.is-done){
  background:
    linear-gradient(0deg, var(--col-tint-idle), var(--col-tint-idle)),
    var(--panel);
  border-color: #e3e8f3;                   /* a touch cooler */
}

/* Active: gentle blue wash; keeps your existing active border/shadow */
.workflow .col.is-active{
  background:
    linear-gradient(0deg, var(--col-tint-active), var(--col-tint-active)),
    var(--panel);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(91,108,255,.18);   /* brand-ish */
}

/* Done: barely-there green hint; keeps your existing done border */
.workflow .col.is-done{
  background:
    linear-gradient(0deg, var(--col-tint-done), var(--col-tint-done)),
    var(--panel);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(43,217,168,.18);   /* success hint */  
}
/* Smaller screens: shorten the min height */
@media (max-width: 900px){
  :root{ --col-min: 480px; }
}


/* ---------- Dropzones ---------- */
.dz{
  background: var(--panel-soft);
  border: var(--sp-0h) dashed var(--dash);
  border-radius: var(--radius);
  padding: var(--pad-dz-block) var(--pad-dz-inline);
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  grid-template-rows: auto 1.5fr auto;  /* header, filler, label/button */
}
.dz header{ font-weight: var(--fw-semibold); color:#253254; margin-bottom: var(--sp-1); }
.dz .btn{ background:var(--brand); color:#fff; padding: var(--sp-1) var(--sp-2); border-radius:var(--radius-sm); display:inline-block; cursor:pointer }
.dz.drag{ border-color:var(--brand); background:#eff2ff; }

.dz .hint{ margin: 0; text-align: center; }





/* ---------- Even mode fieldset ---------- */

/* #evenModeGroup input[type="checkbox"], */
#oddCover, #dropEvenFirst, #bothCovers{
  width:var(--cb-size); height:var(--cb-size);
}




@keyframes shimmer{ to{ background-position: 200% 0 } }

/* --- Preview scroll hint --- */
#scrollHint{
  position: absolute;
  left: 50%;
  bottom:var(--sp-1);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: #1f2a56;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 var(--sp-1h) var(--sp-3h) rgba(2,6,23,.10);
  pointer-events: none;              /* purely informative */
  opacity: 1;
  transition: opacity .22s ease, transform .22s ease;
}

#scrollHint svg{
  opacity: .9;
  animation: chevronNudge 1.2s ease-in-out infinite;
}

#scrollHint.is-hidden{
  opacity: 0;
  transform: translate(-50%, var(--sp-1h));
}

@keyframes chevronNudge{
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(3px) }
}


/* ---------- Shared options + CTA ---------- */
.options-shared, .cta{ max-width:1100px; margin: var(--sp-2) auto; padding: 0 var(--sp-2); }
.btn{
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 var(--sp-0h) 8px rgba(17,24,39,.06);
}
.btn:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); filter: none; }
.btn:focus-visible{
  outline: 3px solid rgba(91,108,255,.35);
  outline-offset: var(--sp-0h);
}

.btn--ghost{ background:#eff2ff; }
.btn--ghost:hover{ filter: none; transform:none; }
.btn--sm{ padding: var(--sp-1) var(--sp-2); border-radius:var(--radius-sm); font-size: var(--fs-sm); }


.btn[disabled]{
  background:linear-gradient(180deg,#e8ebf7,#dfe5f6) !important;
  color:#7a8699 !important;
  text-shadow:none;
  opacity: .55;                      /* avoid “washed out” look */
  box-shadow:none;                    /* keep height the same because we set a fixed height */
  filter: grayscale(.1);                     /* drop grayscale which can make it faint */
  cursor: not-allowed;
}

.btn[disabled]::after{ display:none }

.clear-btn.is-hidden,
.clear-btn[hidden]{ 
  display:inline-block !important;      /* keep the row’s height */
  visibility:hidden !important;
  pointer-events:none !important;
}

.cta{ 
text-align:center;
min-height: calc(var(--btn-xl-h) + var(--sp-2) + 2px);  /* button height + its top margin */
padding-top: var(--sp-1);
 }

.subhead{ margin: var(--sp-2) var(--sp-1) var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color:#253254; }

#mergeBtn:not([disabled]) { color:#fff !important }

/* If code sets [hidden] or a “hidden-ish” class, don't collapse layout */
#mergeBtn[hidden],
#mergeBtn.is-hidden{
  display: inline-block !important; /* keep it in the flow */
  visibility: hidden !important;    /* invisible but space kept */
}

/* Disabled state should stay visible (already styled, but just in case) */
#mergeBtn[disabled]{
  visibility: visible;              /* make sure disabled ≠ invisible */
  pointer-events: none;             /* still non-clickable */
}
/* Group that holds cover checkboxes below the dropzone 
.opt-group{ margin-top: var(--sp-1); }
*/
.opt-group{
  box-sizing: border-box;
  border: var(--sp-0h) solid transparent; /* same thickness as enabled */
  border-radius: var(--radius);
  padding: var(--sp-2);
  background: transparent;
  min-height: var(--opt-row-h);
  display: grid;                /* normalize internals */
  grid-auto-flow: row;
  row-gap: var(--sp-2);         /* single source of vertical spacing */
}

/* Kill stray margins the labels bring in */
.opt-group > label,
#evenModeGroup > label{
  margin: 0 !important;
  line-height: 1.35;            /* same line-height for both */
}

/* --- Inputs inside option rows: one clean set --- */
.opt-row{
  display:flex; 
  align-items:center; 
  gap: var(--sp-2);
  margin: var(--sp-2) 0; 
  color:#364152; 
  font-size:var(--fs-base);
  line-height:1.35; 
  cursor:pointer; 
  user-select:none;
  min-height: var(--opt-row-h);
}

/* Base input styling (checkbox + radio) */
.opt-row > input{
  margin:0; flex:0 0 auto; background:#fff;
  accent-color: var(--brand);
  /* stronger visible ring across browsers */
  box-shadow: 0 0 0 2.5px rgba(37,50,84,.42);
}

/* Safari/WebKit can render the ring faint—nudge a hair darker */
@supports (-webkit-touch-callout: none){
  .opt-row > input{ box-shadow: 0 0 0 3px rgba(37,50,84,.48) }
}

/* Checkboxes: slightly rounded square */
.opt-row > input[type="checkbox"]{
  width: 24px; height: 24px; border-radius: var(--radius-sm);
}

/* Radios: round + a touch larger */
.opt-row > input[type="radio"]{
  width: 24px; height: 24px; border-radius: 50%;
}

/* Checked state: add brand halo so it really pops */
.opt-row > input:checked{
  /* outer brand halo + tiny inner contrast ring */
  box-shadow:
    0 0 0 3px rgba(91,108,255,.48),
    0 0 0 1px #fff inset;
}

/* Hover/focus cues */
.opt-row > input:hover{ filter: brightness(.98) }
.opt-row > input:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand) 70%, white);
  outline-offset: 2px;
}

/* Disabled rows look muted and not clickable */
.opt-row:has(input:disabled){
  cursor:not-allowed; opacity:.55; filter:saturate(.85);
}

/* Row emphasis when selected (keep radios bold label) */
.opt-row:has(input[type="radio"]:checked){ font-weight:var(--fw-semibold) }

/* Group cards: increase border contrast when enabled/active */
.opt-group:has(input:not(:disabled)){
  background: transparent;
  border: var(--sp-0h) solid rgba(124,140,255,.42);   /* was .28 */
  border-radius: var(--radius);
  padding: var(--sp-2);
}

/* And a touch stronger when any option inside is checked */
.opt-group:has(input:checked){
  border-color: rgba(91,108,255,.55);
  box-shadow: 0 0 0 2px rgba(91,108,255,.10) inset;
}



/* Checkbox group (Odd) — enabled only */
.opt-group:has(input:not(:disabled)){
  background: transparent ;
  border: var(--sp-0h) solid rgba(124,140,255,.28);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-2);
  box-shadow:  none;
  border-color: rgba(124,140,255,.28)
}


/* Make the cover groups (Odd + Even) the same height */
.opt-group:has(#oddCover),
.opt-group:has(#bothCovers),
.opt-group:has(#dropEvenFirst){
  --pad: var(--sp-2);
  --gap: var(--sp-2);
  min-height: calc((2 * var(--opt-row-h)) + var(--gap) + (2 * var(--pad)));
  display: grid;
  align-content: start;
  row-gap: var(--gap);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .workflow{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
}

/* Download button "click me" pulse */
/* Base buttons */
.btn{
  position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  border:0; border-radius:var(--radius);
}
/* keep white text for “real” buttons, not ghost */
.btn:not(.btn--ghost){ color:#fff; }


.btn::before{
  /* subtle inner highlight to avoid the “flat sticker” look */
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 1px 0 var(--ring), inset 0 -1px 0 rgba(0,0,0,.12);
  pointer-events:none;
}
.btn--xl{
  font-size: var(--fs-lg); 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 var(--sp-5);            /* horizontal only */
  height: var(--btn-xl-h);
  border-radius:var(--radius-lg);
  box-shadow:
    0 var(--sp-2) 26px var(--ambient),          /* ambient */
    0 var(--sp-0h) 0 rgba(28, 32, 58, .22);       /* contact shadow */
  line-height: 1;                     /* let flex do the centering */
}
.btn--xl:active{ transform:none }        /* no bounce — avoids “moving” illusion */

/* Attention pulse: gradient + halo, no vertical motion */
.btn--attention{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  background-size:200% 200%;
  animation:btnPulse 1.8s ease-in-out infinite;
}
.btn--attention::after{
  /* soft outer ring to kill the top-right “gap” artefact and add depth */
  content:""; position:absolute; inset:-3px; border-radius:var(--radius-lg);
  box-shadow:0 0 0 var(--sp-1h) rgba(124,140,255,.14);
  pointer-events:none;
}
.btn--attention[disabled]{ animation:none }
@keyframes btnPulse{
  0%   { background-position:0% 50%;   box-shadow:0 var(--sp-2) 26px var(--brand-amb), 0 var(--sp-0h) 0 rgba(28,32,58,.22) }
  50%  { background-position:100% 50%; box-shadow:0 16px 32px var(--brand-amb), 0 var(--sp-0h) 0 rgba(28,32,58,.22) }
  100% { background-position:0% 50%;   box-shadow:0 var(--sp-2) 26px var(--brand-amb), 0 var(--sp-0h) 0 rgba(28,32,58,.22) }
}

/* One-shot pop when a disabled button becomes enabled */
@keyframes enablePop {
  0%   { transform: scale(.98); box-shadow: 0 0 0 0 rgba(124,140,255,0); }
  50%  { transform: scale(1.02); box-shadow: 0 0 0 var(--sp-1h) rgba(124,140,255,.22); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(124,140,255,0); }
}

/* One-shot pop when the button first becomes enabled */
#mergeBtn.is-just-enabled{
  animation: enablePop 150ms ease-out;
}

/* If the pulse is also on, run both animations together */
#mergeBtn.btn--attention.is-just-enabled{
  animation: btnPulse 1.8s ease-in-out infinite, enablePop 150ms ease-out;
}


/* If the button doesn't have the attention pulse */
.btn--xl.is-just-enabled { animation: enablePop 150ms ease-out; }

/* If it DOES have your ongoing pulse, chain them so the pulse resumes after 150ms */
.btn--attention.is-just-enabled {
  animation: enablePop 150ms ease-out, btnPulse 1.8s ease-in-out infinite 150ms;
}

@media (prefers-reduced-motion: reduce){
  .btn--xl.is-just-enabled { animation: none; }
  .btn--attention.is-just-enabled { animation: btnPulse 1.8s ease-in-out infinite; }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn--attention{ animation:none }
}

:where(button,.btn,[type="radio"],[type="checkbox"]):focus-visible{
  outline:3px solid rgba(91,108,255,.45);
  outline-offset:var(--sp-0h);
  border-radius:var(--radius);
}


/* Hard reset so no rogue box styles leak in */
input[type="radio"]{
  -webkit-appearance: none;
  appearance: none;
  width: var(--radio-size);
  height: var(--radio-size);
  padding: 0;
  margin: 0 0.6rem 0 0;
  border: 2px solid var(--radio-stroke);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--radio-ring) inset;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

/* The inner dot */
input[type="radio"]::before{
  content: "";
  width: calc(var(--radio-size) * .55);
  height: calc(var(--radio-size) * .55);
  border-radius: 50%;
  transform: scale(0);
  transition: transform .15s ease-in-out;
  background: var(--radio-fill);
}

input[type="radio"]:checked::before{ transform: scale(1); }
input[type="radio"]:focus-visible{
  outline: 2px solid var(--radio-fill);
  outline-offset: 2px;
}
input[type="radio"]:disabled{ opacity: .55; cursor: not-allowed; }

/* Keeps the circle from stretching inside your flex rows */
.opt-row input[type="radio"]{ flex: 0 0 auto; }

/* AdSense hardening: never let the unit collapse */


.ad-slot > ins.adsbygoogle{
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;       /* <- key: overrides inline 0px */
  min-height: 100% !important;
}

.ad-slot iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: inherit;
}


/* --- AD SLOTS: fixed-height, no layout shift --- */
/* wrapper that gives breathing room for top and ads */

/* keep exactly one .mast rule like you have now */
.mast{
  max-width: 1100px;
  margin: 0 auto var(--sp-1);
  border-top: 1px solid transparent; /* blocks margin collapse */
  padding: 0;
  overflow: hidden;
}

/* Base slot */
.ad-slot{
  position: relative;
  width: min(1100px, calc(100% - var(--container-pad)));
  height: 120px;
  margin: var(--sp-3) auto var(--sp-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;                 /* iframe paints the fill */
  border: 1px solid var(--ad-border);      /* <<< visible edge */
  box-shadow: 0 var(--sp-2) var(--shadow-lg-y) rgba(8,15,25,.06);
}

/* “Sponsored” badge (optional) */
.ad-slot .ad-label{
  position: absolute;
  top: var(--sp-1h); left: var(--sp-1);
  padding: var(--sp-0h) var(--sp-1);
  font: 600 11px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #0b0f19; background: #fff; border-radius: var(--radius-xs); opacity: .9;
  pointer-events: none;
}

/* Skeleton uses the SAME gradient so the look matches before JS loads */
.ad-slot .ad-skeleton{
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--ad-gradient);          /* <<< stronger color */
  transition: opacity .25s ease;
}
.ad-slot.is-loaded .ad-skeleton{ opacity: 0; }

/* Iframe fills the slot and inherits rounding */
.ad-slot iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  border: 0; border-radius: inherit;
}


/* Optional debug outline to see slot extents instantly */
.ad-slot.ad-debug{ outline: var(--sp-0h) dashed #ff6b6b; outline-offset: var(--sp-0h); }


/* Footer slot matches top spacing */
.site-footer .ad-slot{
  margin: var(--sp-4) auto var(--sp-2);
}

/* Smaller height on narrow screens */
@media (max-width: 640px){
  .ad-slot{ width: calc(100% - var(--sp-4)); height: var(--ad-h-sm); }
}



/* --- HERO / TITLE --- */
.hero{
  max-width: 1100px;
  margin: var(--sp-2) auto var(--sp-1);
  padding: 0 var(--sp-3);
  text-align: center;
}


.legal--top{
  margin-top: var(--sp-0h);
  color: #667085;
  font-size: var(--fs-xs);
}

/* Keep comfortable spacing between hero and steps */
.mast .steps{ margin-top: var(--sp-1); }

/* Footer legal alignment to match */
.legal--footer{
  text-align: center;
  color: #667085;
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}


/* Invisible but still in the flow (no ghosts, no clicks) */
.clear-btn.is-hidden{
  opacity: 0;
}

/* When visible, you keep your normal .btn look */
/* Legal block */
.legal{
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: #475467;
  text-align: center;
}
.legal a{ color:#334bd3; text-decoration:none }
.legal a:hover{ text-decoration:underline }


/* Loading shimmer */
.ad-skeleton{
  width:100%; height:100%;
  background:
    linear-gradient(90deg, rgba(91,108,255,.10), rgba(91,108,255,.02), rgba(91,108,255,.10));
  background-size: 300% 100%;
  animation: adShimmer 1.2s ease-in-out infinite;
}
@keyframes adShimmer { 0%{background-position:0 0} 100%{background-position:300% 0} }

/* Sticky CTA on small screens */
@media (max-width: 640px) {
  body.has-sticky { padding-bottom: var(--ad-h-sm); } /* prevent overlap */
  .cta.is-sticky {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 14px; width: min(680px, 92%);
    z-index: 2000; padding: var(--sp-2) var(--sp-2);
    background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
    border: 1px solid rgba(15,23,42,.08); border-radius: var(--radius-lg);
    box-shadow: 0 var(--sp-3h) 50px rgba(2, 6, 23, .20);
  }
  .cta.is-sticky .btn { width: 100%; }
}
/* Put 1 and 5 on the ends, 2–4 spaced between */
.steps{
  position: relative;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding-inline: 0 !important;   /* no side inset */
  gap: 0;
}

/* keep steps compact; label still centers under the circle */
.step{ display: grid; justify-items: center; }


/* connector from center of 1 to center of 5 */
.steps::before{
  content:"";
  position:absolute;
  left:  calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  top:   calc(var(--dot)/2 - var(--track-h)/2);
  height: var(--track-h);
  background: linear-gradient(180deg, #c9d3f1, #aeb8e6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),   /* top highlight */
    0 1px 0 rgba(18,28,60,.06);           /* subtle drop for contrast */
  border-radius: 999px;
  z-index: 0;
}

/* The notch that cuts the bar under the circle */
.step::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: calc(var(--dot)/2 - var(--track-h)/2); /* align with track */
  width: calc(var(--dot) + var(--sp-2));             /* a bit wider than the circle */
  height: calc(var(--track-h) + var(--sp-0h));         /* slightly taller than track */
  background: var(--bg);                      /* same as page bg */
  border-radius: 999px;
  z-index: 1;                                 /* above track, below circle */
}

/* Make the status row obey the dropzone width */
.dz-status{
  display:flex;
  align-items:center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  width:100%;
  max-width:100%;
  overflow:hidden;          /* nothing spills outside the dropzone */
  min-height: var(--chip-h);
}

/* Let the chip shrink and stay inside */
.dz-status .chip{
  position:relative;
  flex: 1 1 auto;           /* was 0 0 auto → wouldn't shrink */
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  gap: var(--sp-1);
  padding: var(--sp-0) var(--sp-2) var(--sp-0) var(--sp-2);               
  border-radius:999px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  overflow:hidden;          /* clip the label if needed */
  white-space:nowrap; text-overflow:ellipsis;
  margin-top: .4rem; 
  font-size: .95rem; 
  opacity: .78;

}

/* Ellipsis only the label text, keep the ✕ visible */
.dz-status .chip .label{
  display:block;
  min-width: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* The X is absolutely positioned, never clipped by ellipsis */
/* base: clearer target + a tad subdued */
.dz-status .chip .chip-x{
  display: none !important;
}


/* Keep your placeholder working when empty */
.dz-status:empty::before{ 
  content:"No file selected"; 
  color:#94a3b8; 
  display:block;                 /* ensures the row uses the reserved height */
  line-height: var(--chip-h);
}

/* --- SECTION TITLES + BOX CONTENT CENTERING --- */
/* “Odd pages”, “Even pages”, “Preview” */


/* Even/Back options (fieldset) — consolidated */
#evenModeGroup{
  /* base box */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: var(--sp-0h) solid transparent;
  border-radius: var(--radius);
  background: transparent;

  /* tighter rhythm */
  padding: var(--sp-1) var(--sp-2) var(--sp-2);  /* pull content up a bit */
  display: grid;
  grid-auto-flow: row;
  row-gap: var(--sp-1);                          /* was var(--sp-2) */
}

/* Title + legend use the same scale as section headers */
#evenModeGroup h3,
#evenModeGroup legend{
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  color: #253254;
  text-align: center;
  margin: var(--sp-0) var(--sp-1) var(--sp-1);   /* legend closer to radios */
}
#evenModeGroup h3{ font-size: 20px; } /* 20px if you want parity with big buttons */

/* Radio rows inside the fieldset: tighter */
#evenModeGroup .opt-row{
  margin: var(--sp-1) 0;          /* was var(--sp-2) 0 */
  min-height: 32px;               /* was 40px */
}

/* Kill stray label margins (keeps rows snug) */
#evenModeGroup > label{ margin: 0 !important; line-height: 1.35; }

/* Visual states (enabled / checked) */
#evenModeGroup:has(input:not(:disabled)){
  border-color: rgba(124,140,255,.28);
}
#evenModeGroup:has(input:checked){
  border-color: rgba(91,108,255,.55);
  box-shadow: 0 0 0 2px rgba(91,108,255,.10) inset;
}


.dz{ text-align:center; }                  /* keep the dropzone contents centered */

/* --- ALIGN THE TWO COVER CHECKBOX LINES --- */
.dz label{                                 /* only affects labels inside dropzones */
  display:grid;
  grid-template-columns: 20px 1fr;
  align-items:center;
  gap: var(--sp-2);
  justify-content:center;                  /* centers the whole line under the chip */
  margin: var(--sp-1) auto;
  max-width: 680px;
}


/* extra space between step bar ↔ hint ↔ cards */
.mast .steps{ margin-bottom: var(--sp-1); }
.workflow{ margin-top: var(--sp-2); }

/* --- HEADER POP: title + tagline --- */
.hero h1{
  font-size: var(--fs-display);
font-weight: var(--fw-black);

/* Header pop (subtle shadow for depth) */

  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 var(--sp-1h) var(--sp-3h) rgba(17,24,39,.08);

  letter-spacing: -0.015em;

}
.hero .tagline{
  margin-top: var(--sp-1h);
  color: #485163;          /* subtle, readable */
  font-size: var(--fs-subdisplay);
}

.tagline strong { font-weight: 800; }
.tagline u {
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
}

.tagline {
  margin: .25rem 0 1.25rem;
  opacity: .85;
  font-size: 1.1rem;
}


/* optional: nudge the step bar labels a smidge further from the bar */
.step .label{ margin-top: var(--sp-1h); }


/* Only target the cover checkboxes inside the dropzones */
.dz label:has(> input#oddCover),
.dz label:has(> input#bothCovers),
.dz label:has(> input#dropEvenFirst){
  display: grid;
  grid-template-columns: var(--sp-3hh) 1fr;   /* [checkbox] | [text] */
  align-items: start;                /* align tick with first line of text */
  gap: var(--sp-2);
  justify-content: start;            /* keep left-aligned under the chip */
  max-width: 680px;
  margin: var(--sp-2) auto 0;
  text-align: left;
}


.dz label:has(> input#oddCover)       > input,
.dz label:has(> input#bothCovers)     > input,
.dz label:has(> input#dropEvenFirst)  > input{
  align-self: start;
  margin-top: 0;                    /* small nudge = line up with text */
}
/* 1) Make each card feel equally tall and comfy */

.col .dz-status, .col .opt-group{ margin-top: var(--sp-2); }

.col .opt-group:first-of-type{
  /* uses your existing spacing tokens */
  --pad: var(--sp-2);
  --gap: var(--sp-2);
  min-height: calc((2 * var(--opt-row-h)) + var(--gap) + (2 * var(--pad)));
  display: grid;          /* keeps rows tidy */
  align-content: start;
  row-gap: var(--gap);
}



/* 3) Clear button: stronger contrast + center */
.clear-row{ 
  display:flex; 
  justify-content:center; 
  margin-top: var(--sp-3);
  min-height: var(--clear-h);  
  align-items:flex-start;
}

.clear-btn{
  background:#ffd3d3; 
  color:#7a0f0f; 
  border:1px solid #ffb3b3;
  padding: var(--sp-2) var(--sp-3); 
  border-radius:var(--radius); 
  font-weight: var(--fw-semibold);
  box-shadow:0 var(--sp-0h) 8px rgba(0,0,0,.06);
  opacity: 1 !important;
  filter: none !important;
}
.clear-btn:hover{ filter:brightness(1.02) }

/* 4) Step helper: a bit more presence + spacing */
.flow-hint{
  margin: var(--sp-2) auto var(--sp-3h); 
  font-size: var(--fs-subdisplay);

  font-weight: var(--fw-semibold); letter-spacing:.005em;
}
.flow-hint b, .flow-hint strong { font-weight: var(--fw-semibold); letter-spacing: .005em; }    /* if you wrap “Step 3” in <b> */
/* also place this near the end */
.btn.clear-btn{
  background: linear-gradient(180deg,#ffd0d0,#ffc2c2) !important;
  border: 1px solid #ff9c9c !important;
  color: #6e1010 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  opacity: 1 !important;
  filter: none !important;
}
.btn.clear-btn:hover{ filter: brightness(1.03) !important; }
.btn.clear-btn[disabled]{
  background:#f6dede !important;
  border-color:#efbcbc !important;
  color:#9f5151 !important;
  opacity:.8 !important;
}



/* Optional: let the main content area grow so footers/buttons stay anchored */
.panel__body {
  flex: 1 1 auto;
}

/* Mobile: stack nicely */
@media (max-width: 900px) {
  .columns-3 {
    grid-template-columns: 1fr;
  }
}

/* ---- Dropzone instruction line: "Drag & drop ODD/EVEN … [Choose file]" ---- */
.dz-instruction {
  display: inline;
  align-items: center;
  gap: .0;
  margin: 0;
  line-height: 1.25;
  font-size: clamp(15px, 1.55vw, 17px);
  flex-wrap: wrap;             /* wraps nicely on narrow screens */
  white-space: normal;
}

/* Keep KIND + pages together so “pages” doesn’t drop */
.dz-kind-group{ white-space: nowrap; }


/* Stacked ODD/FRONT and EVEN/BACK token */
.kind-stack{
  display: inline-grid;      /* stack lines but keep inline flow */
  grid-auto-flow: row;
  line-height: 1;
  margin: .1rem 0 .25rem;   /* tiny breathing room above the button */
  justify-self: start;      /* or center if you like */
}
.kind-stack .dz-kind{
  display: block;
  white-space: nowrap;
}
.kind-stack .dz-kind--top{
  font-weight: 800;
  letter-spacing: .02em;
}
.kind-stack .dz-kind--sub{
  font-weight: 700;
  font-size: .87em;
  letter-spacing: .01em;
  opacity: .75;
  margin-top: .12em;
  text-transform: uppercase;
}
/* tidy stacked token */
.dz .kind-stack { 
  display: inline-flex; 
  flex-direction: column; 
  align-items: center; 
  line-height: 1.05; 
}
.dz .dz-kind--top { 
  font-weight: 800; 
  font-size: 1.25rem;     /* ~20px; adjust to fit your min-height */
  letter-spacing: 0.02em;
}
.dz .dz-kind--sub { 
  font-weight: 700; 
  font-size: 0.875rem;    /* ~14px */
  letter-spacing: 0.08em; 
}

@media (max-width: 500px){
  .kind-stack .dz-kind--sub{ font-size: .8em; }
}


/* Ghost choose-file button sits inline without looking sad */
.btn.btn--ghost { /* keep your inline button looking like a button */
  display: inline-flex;
  align-items: center;
  padding: .45rem .7rem;
  border-radius: .6rem;
  border: 1px solid var(--ui-border, #d8dee4);
  background: var(--ui-bg, #fff);
  color: var(--ink);          /* ← readable text */
  text-shadow: none;          /* avoid the white-button “glow” */
  cursor: pointer;
  transition: box-shadow .15s ease, transform .02s ease;
}
.btn.btn--ghost:hover { filter: brightness(1.03); }
.btn.btn--ghost:active { transform: translateY(0); }


.dz-status.error { color: #b3261e; opacity: 1; }

.dz .btn.btn--ghost{
  position: relative;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  border: none;                     /* no hard border */
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  margin-top: var(--dz-chip-offset);
}

/* kill the bright 1px seam from the global .btn::before */
.dz .btn.btn--ghost::before{
  /* gentler inner highlight; no “white border” look */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.12);
}

/* subtle outer halo to match the Download button vibe (no pulse) */
.dz .btn.btn--ghost::after{
  content: "";
  position: absolute;
  inset: -6px;                      /* halo thickness */
  border-radius: inherit;
  box-shadow:
    0 0 0 4px rgba(124,140,255,.14),
    0 8px 24px rgba(91,108,255,.20);
  pointer-events: none;
}

/* optional: a hair more pop on hover */
.dz .btn.btn--ghost:hover::after{
  box-shadow:
    0 0 0 5px rgba(124,140,255,.18),
    0 10px 28px rgba(91,108,255,.24);
}

/* Preserve your dotted dropzone look, but make sure flex line doesn’t wrap badly */


/* Remove layout footprint of the now-hidden column headings */
.col > h2.visually-hidden {
  margin: 0;
  padding: 0;
  height: 0;
}

/* Make the KIND token and the word “pages” pop */
.dz-instruction .dz-kind {
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.dz-instruction .dz-noun,
#previewStatus .dz-noun {
  font-weight: 400; /* un-bold “pages” */
  letter-spacing: 0;
  white-space: nowrap;
}

.dz .dz-kind,
.col .card h3 { white-space: nowrap; }


/* Nudge the preview status up to align with the dropzone instruction lines */

#previewStatus .status-note {
  display: block;
  min-height: 1.4em;   /* roughly one line at your current font-size */
  margin-top: .25rem;
}
#previewStatus .status-note .hint {
  font-size: .92em;
  opacity: .8;
}


/* Delta-note icon: perfectly centered, slightly larger */
.status-note.note--delta{
  display:inline-flex;
  align-items:center;
  gap: var(--sp-1);
}

.note-ico{
  display:inline-grid;
  place-items:center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg,#6d7cff,#4b5cf5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.note-ico svg{
  width: 12px;
  height: 12px;
  display: block; /* kill baseline offset */
  shape-rendering: geometricPrecision;
  fill: #fff !important;   /* override fill="currentColor" */
  color: #fff !important;  /* belt + braces for Safari quirks */
}
.note-ico{ box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.35),
  inset 0 1px 0 rgba(255,255,255,.55);
}

/* Modal primary action button */
.modal .btn-primary {
  min-width: 96px;
  padding: .55rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1;
  background: var(--brand-500, #5562f7);
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: background .15s ease, transform .04s ease;
}
.modal .btn-primary:hover { background: var(--brand-600, #4450d6); }
.modal .btn-primary:active { transform: translateY(1px); }
.modal .btn-primary:focus-visible {
  outline: 2px solid var(--brand-300, #aab2ff);
  outline-offset: 2px;
}

/* ── Notify modal (matches notify.ts) ─────────────────────────── */
#notify{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                 /* hidden by default */
}

#notify.is-open{                 /* toggled by notify.ts show()/hide() */
  display: grid;
  place-items: center;
}

#notify .notify-backdrop{
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #0b1220 60%, transparent);
}

#notify .notify-modal{
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
}

#notify .notify-card{
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17,25,40,.25), 0 1px 0 rgba(255,255,255,.9) inset;
  color: #111827;
}

#notify h3{ font-size: 18px; font-weight: 700; margin: 0 0 8px; }
#notify p{  margin: 0 0 12px; color: #334155; }
#notify .notify-detail{
  margin: 8px 0 0; padding: 8px 10px; background: #f8fafc; border-radius: 10px;
  max-height: 180px; overflow: auto; color: #0f172a;
}
#notify .notify-detail.hidden{ display:none; }

#notify .notify-actions{ display:flex; justify-content:flex-end; gap:8px; }

/* Button style used by notify.ts (btn btn--primary) */
#notify .btn{ appearance:none; border:0; cursor:pointer; padding:8px 12px; border-radius:10px; font-weight:600; }
#notify .btn--primary{ background: var(--brand-500, #5562f7); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); }
#notify .btn--primary:hover{ background: var(--brand-600, #4450d6); }
#notify .btn--primary:active{ transform: translateY(1px); }
#notify .btn--primary:focus-visible{ outline:2px solid var(--brand-300, #aab2ff); outline-offset:2px; }
#notify[style*="display: grid"], #notify.is-open{ display:grid; place-items:center; }

/* Legal pages */
.legal-wrap {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 20px 64px;
  font-size: 16px;
  line-height: 1.6;
}
.legal-wrap h1 { font-size: 28px; margin: 0 0 8px; }
.legal-wrap h2 { font-size: 18px; margin: 28px 0 8px; }
.legal-wrap .muted { color: #6b7280; font-size: 14px; }
.legal-wrap .back { color: var(--brand-500, #5562f7); text-decoration: none; }
.legal-wrap .back:hover { text-decoration: underline; }


/* ================= PDF Preview: single source of truth ================= */




/* Optional link under viewer */
.pv-fallback{ font-size:.9rem; opacity:.8; margin:.5rem 0 0; }
.pv-fallback a{ text-decoration:underline; }





/* FAQ */

.page.page-doc .faq { display: grid; gap: var(--sp-3); }
.faq-item {
  border: 1px solid var(--ink-200);
  border-radius: var(--rad-3);
  background: var(--surface-50);
  padding: var(--sp-3) var(--sp-4);
}
.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.faq-item p { margin: var(--sp-2) 0 0; }

/* FAQ children */
.faq-subwrap { margin-top: .5rem; display: grid; gap: .375rem; }
.faq-sub { border-left: 2px solid var(--ink-200); padding-left: .75rem; }
.faq-sub summary { font-weight: 600; font-size: .95em; }
.faq-sub p { margin: .25rem 0 0; }


/* Privacy notice pop up fades unobtrusive toast */
.toast--privacy {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%) translateY(10px);
  max-width: min(92vw, 720px);
  background: var(--surface-50);
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  border-radius: .75rem;
  padding: .6rem .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  font-size: 14px;
  z-index: 40;
  opacity: 0;
  transition:
    opacity .4s cubic-bezier(.22,.61,.36,1),
    transform .4s cubic-bezier(.22,.61,.36,1);
  background: color-mix(in srgb, var(--toast-tint) 10%, #fff);
  border-color: color-mix(in srgb, var(--toast-tint) 30%, #fff);  
}

.toast--privacy.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--privacy .toast-link {
  margin-left: .6rem;
  text-decoration: underline;
  font-weight: 600;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .toast--privacy { transition: none; transform: translateX(-50%);
  background: color-mix(in srgb, var(--toast-tint) 16%, #0b0f1a);
    border-color: color-mix(in srgb, var(--toast-tint) 45%, #0b0f1a);
   }
}
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-visible {
    transition: none !important;
  }
}

/* ============ Preview column: single source of truth ============ */

/* 1) The preview card itself is a vertical stack: title, then pane */
.col[data-step="preview"]{
  display: flex;
  flex-direction: column;
}

/* 2) Make the title look like the others (you already did this, keep it) */
.col[data-step="preview"] > h2{
  text-align: center;
  font-weight: 600;
  font-size: clamp(15px, 1.55vw, 17px);  /* match .dz-instruction */
  line-height: 1.25;
  margin: var(--dz-pad-top) 0 .5rem;     /* align baseline with Even text */
}

/* 3) The pane fills the rest of the card — stop capping it at 600px */
.col[data-step="preview"] #previewPane{
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* let it grow; keep your floor */
  min-height: clamp(360px, 45vh, 9999px);
  max-height: none;           /* kill the 600px cap */
  overflow: hidden;           /* pane owns scrolling, not the card */
  background: #fff;
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
  padding-top: .35rem;
}

/* 4) Status takes its natural height. When present, it doesn’t hog space. */
#previewStatus{
  padding: 0;
  margin: 0.4rem 0 var(--sp-2);
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.25;
  flex: 0 0 auto;
}
#previewPane:not([aria-busy="true"]) #previewStatus{ display:none; }

/* 5) The embed actually fills the pane. The min-height:0 bit is key for flex. */
#previewEmbed{
  display: block;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;              /* allow child to shrink inside flex container */
  border: 0;
  background: transparent;
}

/* 6) Busy shimmer still works and doesn’t jump the layout */
#previewPane[aria-busy="true"] #previewEmbed { opacity:.6; filter:saturate(.9); }
#previewPane[aria-busy="true"]::after{
  content:""; position:absolute; inset:var(--sp-2);
  border-radius:var(--radius-sm);
  background:repeating-linear-gradient(-45deg,
    rgba(91,108,255,.08) 0 16px, rgba(91,108,255,.15) 16px 32px);
  animation: shimmer 1.1s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion:reduce){
  #previewPane[aria-busy="true"]::after{ animation:none; }
}

@media (max-width: 1023px){
  .col[data-step="preview"] #previewPane{ min-height: clamp(360px, 50vh, 9999px); }
}

#previewPane { position: relative; }
#previewEmbed { display: none; pointer-events: none; }
#previewPane.has-pdf #previewEmbed { display: block; pointer-events: auto; }
#previewPane.loading #previewEmbed { opacity: .6; }

/* Scope so it doesn't leak */
.about-tool details > summary { cursor: pointer; }
.about-tool details > summary::-webkit-details-marker { display: inline; } /* restore native caret (WebKit) */
.about-tool details > summary::marker { content: initial; }                 /* restore caret (Firefox) */

/* Pull the About block closer to the hero */
#about-tool { margin-top: 8px; }          /* if it had 24px+, this alone buys you space */

/* Compact internals */
#about-tool details { padding: 8px 10px; border-radius: 10px; }
#about-tool summary { margin: 0 0 6px; }
#about-tool p       { margin: 4px 0; }
#about-tool h3      { margin: 8px 0 4px; font-size: 0.95rem; }
#about-tool ul      { margin: 4px 0 0; padding-left: 1.1rem; }
#about-tool li      { margin: 2px 0; }


/* — tighten hero block without changing horizontal padding — */
.hero{
  /* was: margin: var(--sp-2) auto var(--sp-1); */
  margin: var(--sp-1) auto var(--sp-1h);
}

/* compress H1 only vertically; keep your display sizing */
.hero h1{
  margin: 0 0 .35rem;
  line-height: 1.08;
}

/* unify tagline spacing:
   - generic .tagline gets a lean margin
   - inside .hero we kill the extra top gap completely */
.tagline{
  /* was: .25rem 0 1.25rem */
  margin: .1rem 0 .6rem;
  opacity: .9;                 /* a touch clearer than .85 */
  font-size: 1.05rem;          /* still readable; keep your var if you prefer */
}
.hero .tagline{
  /* was: margin-top: var(--sp-1h) */
  margin-top: 0;
}

/* pull the About block closer to the hero */
#about-tool{
  /* if it had a chunky top margin in your base styles, override here */
  margin-top: .5rem;
}

/* optional: trim internal About whitespace without making it ugly */
#about-tool details{ padding: 8px 10px; }
#about-tool summary{ margin: 0 0 6px; }
#about-tool p      { margin: 4px 0; }
#about-tool ul,
#about-tool ol {
  margin: 4px 0;
  padding-left: 1.1rem;
}
#about-tool ol.about-steps {
  list-style-type: decimal;
}
/* small screens: squeeze a hair more */
@media (max-width: 720px){
  .hero{ margin: .5rem auto .25rem; }
  .tagline{ margin: .1rem 0 .45rem; font-size: 1rem; }
}


/* 2) Stop margin-collapsing at the page start */
main, .page, #app{
  padding-top: 0 ;                   /* tiny breathing room */
  border-top: 0 ;  /* or: overflow: auto; */
}


/* First child inside .mast, whatever it is */
.mast > *:first-child { margin-top: 0; }

/* 3) If the unit sometimes mounts with a different class/id, clamp those too */
#adTop {
  margin-top: 0 ;
}

/* Optional: globally tighten ad slots a notch */
.ad-slot{ margin-top: var(--sp-1) }



/* TEMP DEBUG — remove when done 
.workflow { outline: 2px dashed red !important; }
.workflow .col { outline: 1px solid lime !important; } */