/* Hallmark · v2.0.0 · theme: brand (DESIGN.md) · genre: editorial · scope: app · redesign: restyle · copy: verbatim · signature: upright Ganesha report cover · built: existing project */
/* Critique: preserve compact checkout; strengthen hierarchy, control contrast, and stable multilingual spacing. Finish-review: subagent; 2 findings resolved (mobile spacing, ready-state activity). */
/* Language labels retain both names; parentheses replace separator dots without changing option values. */
/* Hallmark · waive 24b · compact checkout retains optical spacing · Birth details and consent must fit the desktop viewport without enlarging the form. */
:root{
  --ink:#24231f;--paper:#fffdf9;--coral:#f88250;--action:#9c3814;
  --muted:#666258;--line:#d9d4ca;--focus:#995027;--error:#9e241b;
  --surface:#f5f0e7;--white:#fffefa;--edge:#888074;--placeholder:#716b62;
  --selection:#f7c8af;--hover:#f6966e;--pressed:#efa075;--button-ink:#21170f;
  --error-surface:#fff0eb;--error-edge:#bd7560;--preview:#f5e9da;--preview-ink:#62401f;
  --cover-shadow:#34261424;--backdrop:#24231fa6;--ease-out:cubic-bezier(.16,1,.3,1);--clear:transparent;--font-body:Avenir,Arial,sans-serif;
  --font-display:Spectral,Georgia,serif;--font-script:system-ui,sans-serif;
}
@font-face{font-family:Spectral;src:url('/assets/spectral.ttf') format('truetype');font-display:swap}
@font-face{font-family:Avenir;src:url('/assets/avenir.ttf') format('truetype');font-display:swap}
@font-face{font-family:Avenir;src:url('/assets/avenir-demi.ttf') format('truetype');font-weight:600;font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{scrollbar-color:var(--edge) var(--surface);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font-body)}
::selection{background:var(--selection);color:var(--ink)}
a{color:inherit;text-underline-offset:4px}
a:hover{color:var(--action)}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:var(--clear)}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button:disabled,input:disabled,select:disabled{opacity:.6;cursor:not-allowed}
button:active:not(:disabled){transform:translateY(1px)}
.back-navigation{height:56px;padding:6px clamp(16px,3vw,40px)}
.back-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px}
.back-link:hover{background:var(--surface)}
.back-link:active{background:var(--selection)}
.back-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{max-width:1248px;margin:auto;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,5vw,64px);padding:8px 40px 32px;align-items:start}
.introduction{min-width:0;padding:24px 28px;background:var(--surface);border-radius:12px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.2;text-wrap:balance;overflow-wrap:break-word;min-width:0}
h2{font-size:26px;margin:0 0 14px;letter-spacing:-.02em}
p{margin:0 0 18px;max-width:70ch}
.introduction .rotating-heading{font-size:30px;line-height:1.35;height:120px;position:relative;color:var(--action);margin:0;letter-spacing:-.02em}
.rotating-heading>span{display:none}
.rotating-heading>span.current{position:absolute;inset:0;display:block;animation:heading-in .3s ease}
.rotating-heading>span:not([lang="en"]){font-family:var(--font-script);font-size:.87em;line-height:1.5;letter-spacing:normal}
@keyframes heading-in{from{opacity:0}to{opacity:1}}
.report-preview{position:relative;width:202px;max-width:100%;margin:22px auto 0}
.report-preview img{display:block;width:100%;height:auto;box-shadow:0 12px 24px var(--cover-shadow);border-radius:2px}
.report-preview figcaption{font-size:12px;text-align:center;margin-top:12px;color:var(--muted)}
.checkout{padding-top:8px;min-width:0}
.steps{position:relative;list-style:none;display:flex;padding:0;margin:0 0 24px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.steps li{flex:1;padding:0 0 12px;position:relative}
.steps li[aria-current="step"]{color:var(--action);font-weight:600}
.steps li[aria-current="step"]:after{content:'';position:absolute;height:3px;bottom:-1px;left:0;right:16px;background:var(--action);border-radius:2px}
.muted{color:var(--muted)}
.field{min-width:0;margin:10px 0}
.field label,.coupon>label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.field small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}
input:not([type=checkbox]),select{width:100%;min-width:0;min-height:46px;border:1px solid var(--edge);background:var(--white);color:var(--ink);padding:9px 12px;border-radius:7px;caret-color:var(--action)}
input::placeholder{color:var(--placeholder);opacity:1}
input:hover,select:hover{border-color:var(--ink)}
input:focus-visible,select:focus-visible{border-color:var(--focus);outline-offset:2px}
.field-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.field-pair .field{margin:0 0 2px}
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:12px;line-height:1.6;color:var(--muted);cursor:pointer}
.check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--action)}
.check a{color:var(--ink)}
.primary{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;min-height:50px;margin-top:16px;background:var(--coral);border:0;border-radius:9px;color:var(--button-ink);font-weight:600;text-decoration:none;line-height:1.4}
.primary:hover{background:var(--hover);color:var(--button-ink)}
.primary:active:not(:disabled){background:var(--pressed)}
.primary:disabled{cursor:wait}
.action-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.secondary{border:1px solid var(--edge);background:var(--clear);border-radius:7px;padding:9px 18px;min-height:44px}
.secondary:hover{background:var(--surface)}
.secondary:active{background:var(--selection)}
.text-button{border:0;border-radius:3px;background:none;padding:10px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px;color:var(--action);font-size:14px}
.text-button:hover{text-decoration-thickness:2px}
.inline-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px}
.disclaimer{font-size:12px;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line);line-height:1.65;max-width:none}
.error{color:var(--error);background:var(--error-surface);padding:14px 16px;border:1px solid var(--error-edge);border-radius:7px;margin-bottom:20px;font-size:14px;overflow-wrap:anywhere}
.field .field-error{color:var(--error)}
input[aria-invalid="true"]{border-color:var(--error)}
.places{padding:0;margin:6px 0 0;list-style:none;background:var(--white);border:1px solid var(--edge);max-height:240px;overflow:auto;border-radius:7px}
.places button{width:100%;text-align:left;border:0;background:var(--white);padding:12px;font-size:14px;min-height:44px}
.places button:hover,.places button:focus-visible{background:var(--surface)}
.places li+li{border-top:1px solid var(--line)}
.places .empty{padding:14px;font-size:14px;color:var(--muted)}
.preview-code{background:var(--preview);color:var(--preview-ink);padding:12px 14px;font-size:13px;border-radius:7px;overflow-wrap:anywhere}
#code{letter-spacing:.2em;font-size:24px;max-width:260px;font-variant-numeric:tabular-nums}
.receipt{margin:24px 0}
.receipt>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0}
.receipt dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.receipt .total{border-top:1px solid var(--line);margin-top:8px;padding-top:18px;font-size:24px;font-weight:600}
#discount-row{color:var(--action);font-size:14px}
.coupon{margin:24px 0}
.coupon>div{display:flex;gap:12px}
.coupon input{min-width:0;text-transform:uppercase}
.coupon p{font-size:13px;color:var(--action);margin-top:8px}
.coupon>.field-error:not([hidden]){display:block;margin-top:8px;color:var(--error);font-size:14px;line-height:1.5}
.purchase-note{font-size:14px;color:var(--muted)}
.fine{font-size:12px;margin-top:12px}
#delivery-estimate{font-size:14px;margin:12px 0 18px;line-height:1.6}
.report-symbol{margin:24px 0}
.generation-progress{height:8px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;margin:24px 0 10px}
.generation-progress span{display:block;height:100%;width:100%;background:var(--coral);transform:scaleX(var(--fraction,0));transform-origin:left;transition:transform 420ms var(--ease-out)}
.generation-progress.running:after{content:'';position:absolute;inset:0 auto 0 var(--completed,0%);width:24%;background:var(--coral);animation:processing-pulse 1.2s ease-in-out infinite}
@keyframes processing-pulse{50%{opacity:.25}}
#details-summary,#verify-address{overflow-wrap:anywhere}
footer{border-top:1px solid var(--line);max-width:1168px;margin:auto;padding:16px 0;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.footer-credit{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;min-width:0}
footer p{margin:0;max-width:none}
footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}
.attribution{font-size:11px}
@media(min-width:851px){
  #details-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px}
  #details-form>h2,#details-form>.field-pair,#details-form>.check,#details-form>.primary,#roman-field{grid-column:1/-1}
}
@media(max-width:1248px){footer{margin-inline:40px}}
@media(min-width:1001px) and (max-width:1199px){.introduction .rotating-heading{font-size:26px;height:128px}.introduction{padding-inline:24px}}
@media(max-width:1000px){
  main{grid-template-columns:minmax(0,1fr);max-width:620px;padding:4px 24px 28px;gap:24px}
  .introduction{position:relative;padding:18px 128px 16px 18px}
  .introduction .rotating-heading{font-size:25px;height:158px;letter-spacing:-.02em}
  .report-preview{position:absolute;right:18px;top:20px;width:90px;margin:0}
  .report-preview figcaption{font-size:10px;line-height:1.4;margin-top:8px}
  .checkout{padding-top:0}
  .steps{margin-bottom:16px}
  h2{font-size:25px}
  .field{margin:10px 0}
  .field-pair{gap:14px;margin:12px 0}
  .check{margin:12px 0}
  footer{margin-inline:24px;padding:16px 0}
}
@media(max-width:400px){
  main{padding-inline:16px;gap:16px}
  .introduction{padding:12px 104px 12px 16px}
  .introduction .rotating-heading{font-size:22px;height:140px}
  .report-preview{width:72px;right:16px;top:14px}
  .steps{font-size:11px}
  .primary{font-size:14px;padding-inline:14px}
  footer{margin-inline:16px}
}
@media(max-width:350px){.introduction .rotating-heading{height:150px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rotating-heading>span.current,.generation-progress.running:after,.report-stages li.current:after{animation:none}
  button:active:not(:disabled){transform:none}
}





/* Calm, non-blocking motion. All visual state follows existing server responses. */
.steps li[aria-current="step"]:after{display:none}
.steps:after{content:'';position:absolute;bottom:-1px;left:0;width:25%;height:3px;background:var(--action);transform:translateX(calc(var(--step,0) * 100%));transition:transform 220ms var(--ease-out);border-radius:2px}
.rotating-heading>span.current{animation:heading-in 220ms var(--ease-out)}
.rotating-heading>span.leaving{position:absolute;inset:0;display:block;pointer-events:none;animation:heading-out 180ms ease-in forwards}
@keyframes heading-out{to{opacity:0}}
.primary,.secondary,.back-link{transition:transform 120ms var(--ease-out)}
.primary[aria-busy="true"],.text-button[aria-busy="true"],.secondary[aria-busy="true"]{position:relative}
.primary[aria-busy="true"] .action-icon{visibility:hidden}
.primary[aria-busy="true"]:after{content:'';position:absolute;right:18px;width:16px;height:16px;border:2px solid currentColor;border-right-color:var(--clear);border-radius:50%;animation:busy-spin 800ms linear infinite}
.text-button[aria-busy="true"],.secondary[aria-busy="true"]{animation:processing-pulse 1.2s ease-in-out infinite}
@keyframes busy-spin{to{transform:rotate(360deg)}}
.places:not([hidden]){animation:places-in 160ms var(--ease-out)}
@keyframes places-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.confirmed:before{content:'✓';color:var(--action);margin-right:8px;font-weight:600}
#sample-open{display:block;border-radius:2px}
#sample-open:hover{outline:1px solid var(--action);outline-offset:4px}
#sample-open:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
#sample-dialog{width:min(800px,calc(100% - 32px));max-width:800px;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);overflow:hidden}
#sample-dialog[open]{display:flex;flex-direction:column}
#sample-dialog::backdrop{background:var(--backdrop)}
.sample-open{overflow-y:hidden}
.sample-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);flex:none}
.sample-toolbar h2{font-size:23px;margin:0}
.sample-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:7px;background:var(--clear);color:var(--ink)}
.sample-close:hover{background:var(--surface)}
.sample-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sample-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;background:var(--surface);padding:16px}
.sample-scroll img{display:block;width:100%;height:auto}
#sample-image-error{padding:16px;margin:0;color:var(--error)}
.sample-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line);flex:none}
.sample-controls p{font-size:13px;text-align:center;line-height:1.4;margin:0}
@media(max-width:480px){
  #sample-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  .sample-toolbar,.sample-controls{padding:8px 12px;gap:8px}
  .sample-scroll{padding:8px}
  .sample-controls .secondary{font-size:13px;padding:8px 12px}
  .sample-controls p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .steps:after,.generation-progress span,.primary,.secondary,.back-link{transition:none}
  .rotating-heading>span.current,.places:not([hidden]),[aria-busy="true"],.primary[aria-busy="true"]:after{animation:none}
  .rotating-heading>span.leaving{display:none}
}
@media(hover:none){#sample-open:hover{outline:none}#sample-open:focus-visible{outline:3px solid var(--focus)}}

#details-form .generate-report{justify-content:center;text-align:center;padding-inline:36px}

.sample-download{margin-left:auto;font-size:13px;white-space:nowrap}
#sample-jump{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px}
#sample-page-number{width:64px;min-height:44px;padding:8px;text-align:center}
.sample-status{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(max-width:480px){
  .sample-toolbar h2{font-size:20px}
  .sample-download{font-size:12px}
  #sample-jump{gap:4px;font-size:12px}
  #sample-page-number{width:56px}
  .sample-controls .secondary{padding-inline:8px}
}

.report-stages{margin:30px 0 24px;text-align:center;color:var(--action)}
.progress-line{font-size:20px;font-weight:600;line-height:1.5;margin:0 auto 12px;max-width:34ch;min-height:3em;display:flex;align-items:center;justify-content:center}
.status-art{--status-size:230px;width:min(230px,65%);aspect-ratio:1;margin:0 auto;pointer-events:none}
.status-art svg{display:block;width:100%;height:100%}
.status-art[hidden],.report-stages[hidden]{display:none}
.error-art{--status-size:210px;width:min(210px,60%);margin:20px auto 24px}
@media(max-width:480px){.progress-line{font-size:18px;max-width:28ch}.report-stages{margin-top:24px}.status-art{--status-size:190px;width:190px}}