/* =============================================================
   FIORELLA Tax & Multiservicios — the tax-form page
   Layout: form-paper ground; the hero's right side IS a numbered
   appointment form (header bands, line numbers, square boxes);
   services read as a schedule with dotted leaders to the price.
   ============================================================= */

/* 1. Tokens */
:root {
  --form: #f1f4ee;        /* page ground: tax-form paper */
  --white: #fffffe;
  --navy: #142640;        /* form ink */
  --navy-soft: #4b5b71;
  --red: #c4122f;         /* dropout red: line numbers, stamp, main action */
  --red-deep: #9e0d24;
  --shade: #e2e8df;       /* shaded header bands */
  --rule: rgba(20, 38, 64, 0.2);

  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* 2. Reset & base */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--navy); background: var(--form);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}
img, svg { display: block; max-width: 100%; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--navy); color: var(--white); }
.num { font-variant-numeric: tabular-nums; }
.hp { position: absolute; left: -9999px; }
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: .6rem 1rem; background: var(--navy); color: var(--white); }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 1rem); }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* 3. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.2rem;
  font-weight: 700; font-size: .98rem; border-radius: 4px; transition: background-color .2s, color .2s, transform .3s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-ghost { border: 1.5px solid var(--navy); background: var(--white); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.btn-block { width: 100%; }

/* 4. Header */
.utility { background: var(--navy); color: rgba(255, 255, 254, .85); font-size: .82rem; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
.lang-toggle {
  min-width: 44px; min-height: 32px; padding: 0 .7rem; border: 1px solid rgba(255, 255, 254, .4); border-radius: 4px;
  font-weight: 700; font-size: .8rem; letter-spacing: .08em; color: var(--white);
}
.lang-toggle:hover { background: var(--white); color: var(--navy); }
.masthead {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--white); border-bottom: 2px solid var(--navy);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--white); }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.logo { display: grid; line-height: 1; }
.logo-name { font-weight: 900; font-size: 1.55rem; letter-spacing: -0.04em; }
.logo-sub { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-soft); margin-top: .2rem; }
.links { display: none; gap: 1.8rem; font-weight: 600; font-size: .95rem; }
.links a { padding-block: .3rem; border-bottom: 2px solid transparent; }
.links a:hover { border-bottom-color: var(--red); }
.masthead .btn { min-height: 44px; padding: .5rem 1rem; font-size: .9rem; }

/* 5. Hero */
.hero {
  padding-block: 2.4rem 3.2rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(20, 38, 64, .045) 31px 32px),
    var(--form);
}
.hero-inner { display: grid; gap: 2.2rem; align-items: start; }
.hero-copy { display: grid; gap: 1.1rem; min-width: 0; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 4.1rem); font-weight: 900; letter-spacing: -0.035em; max-width: 15ch; }
.hero-sub { font-size: 1.1rem; color: var(--navy-soft); max-width: 48ch; }
.hero-points { display: grid; gap: .55rem; font-weight: 600; }
.hero-points li { display: flex; gap: .6rem; align-items: flex-start; }
.hero-points li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .22rem; border: 1.5px solid var(--navy);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23c4122f' stroke-width='2.2'/%3E%3C/svg%3E") center/90% no-repeat;
}
.hero-phone { font-weight: 600; }
.hero-phone a { color: var(--red); border-bottom: 1.5px solid currentColor; }

/* Tax form */
.taxform {
  position: relative; background: var(--white); border: 2px solid var(--navy); min-width: 0;
  box-shadow: 10px 10px 0 -2px var(--shade);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  animation: settle 1s var(--ease-out) backwards;
}
.taxform.is-tilting { transition: transform .12s linear, box-shadow .3s; box-shadow: calc(var(--sx, 0px) + 10px) calc(var(--sy, 0px) + 14px) 0 -2px var(--shade); }
@keyframes settle { from { translate: 0 22px; rotate: -1.2deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
.taxform-head { display: grid; grid-template-columns: auto 1fr; border-bottom: 2px solid var(--navy); }
.form-id { display: grid; align-content: center; padding: .7rem .9rem; border-right: 1px solid var(--navy); line-height: 1; }
.form-word { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.form-num { font-weight: 900; font-size: 1.6rem; letter-spacing: -0.03em; }
.form-title { padding: .7rem .9rem; background: var(--shade); }
.form-title h2 { font-size: 1.25rem; font-weight: 800; }
.form-title p { font-size: .82rem; color: var(--navy-soft); }
.form-year { display: none; }
.line {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: .6rem; row-gap: .1rem;
  padding: .55rem .9rem .7rem .6rem; border-bottom: 1px solid var(--rule); border-left: 0; border-right: 0; border-top: 0; margin: 0; min-width: 0;
}
.ln { display: grid; place-items: center; width: 26px; height: 26px; font-weight: 800; font-size: .85rem; color: var(--red); border: 1.5px solid var(--red); border-radius: 2px; font-variant-numeric: tabular-nums; }
.line-field { font-size: .8rem; font-weight: 700; color: var(--navy-soft); padding: 0; }
.line input, .line select {
  grid-column: 2; width: 100%; min-height: 40px; border: 0; border-bottom: 1.5px dotted var(--navy);
  background: transparent; font-family: var(--type); font-size: 1.1rem; color: var(--navy); padding: .2rem 0;
  border-radius: 0;
}
.line select { cursor: pointer; }
.line input:focus, .line select:focus { outline: none; border-bottom: 2px solid var(--red); background: rgba(196, 18, 47, .04); }
.line-choice { display: grid; }
.line-choice legend { float: left; grid-column: 2; }
.line-choice .ln { grid-row: 1; }
.boxes { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding-top: .3rem; }
.box { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; font-family: var(--type); font-size: 1.05rem; cursor: pointer; }
.box input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.box span::before {
  content: ""; display: inline-block; vertical-align: -3px; width: 18px; height: 18px; margin-right: .45rem;
  border: 1.5px solid var(--navy); background: var(--white) center/90% no-repeat;
}
.box input:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5l11 11M13.5 2.5l-11 11' stroke='%23142640' stroke-width='2'/%3E%3C/svg%3E");
}
.box input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.taxform-foot { display: grid; gap: .6rem; padding: 1rem .9rem 1.1rem; }
.fine { font-size: .78rem; color: var(--navy-soft); text-align: center; }
.form-ok { margin: 0 .9rem 1rem; padding: .8rem .9rem; background: var(--shade); font-weight: 600; border-left: 3px solid var(--red); }
.stamp {
  position: absolute; right: 8%; top: 38%; z-index: 3; pointer-events: none;
  padding: .35rem 1rem; border: 4px double var(--red); color: var(--red); border-radius: 6px;
  font-weight: 900; font-size: 1.9rem; letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-12deg); opacity: .85; mix-blend-mode: multiply;
  animation: stamp .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes stamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .85; } }

/* 6. Sections */
.section { padding-block: 4.2rem; }
.section-paper { background: var(--white); border-block: 1px solid var(--rule); }
.section-head { display: grid; gap: .55rem; margin-bottom: 2rem; }
.section-head h2, .docs h2 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); font-weight: 900; }
.section-sub { color: var(--navy-soft); max-width: 56ch; }

.schedule { border-top: 2px solid var(--navy); }
.schedule li {
  display: grid; grid-template-columns: 34px 1fr; column-gap: .8rem; row-gap: .4rem; align-items: start;
  padding-block: 1.1rem; border-bottom: 1px solid var(--rule);
}
.schedule .ln { margin-top: .15rem; }
.sched-text { min-width: 0; }
.sched-text h3 { font-size: 1.2rem; font-weight: 800; }
.sched-text p { color: var(--navy-soft); font-size: .95rem; max-width: 60ch; }
.leader { display: none; }
.sched-price { grid-column: 2; font-family: var(--type); font-size: 1rem; }
.sched-price b { font-size: 1.35rem; font-weight: 700; color: var(--navy); }

.docs { display: grid; gap: 2rem; align-items: start; }
.docs-intro { display: grid; gap: .8rem; min-width: 0; }
.situations { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.sit-label { width: 100%; font-weight: 700; font-size: .9rem; }
.sit { position: relative; display: inline-flex; }
.sit input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sit span {
  display: inline-flex; align-items: center; min-height: 42px; padding: .45rem .9rem;
  border: 1.5px solid var(--navy); border-radius: 4px; font-weight: 600; font-size: .92rem; cursor: pointer;
  background: var(--white); transition: background-color .15s, color .15s;
}
.sit input:checked + span { background: var(--navy); color: var(--white); }
.sit input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.checklist-card { border: 2px solid var(--navy); background: var(--white); box-shadow: 10px 10px 0 -2px var(--shade); min-width: 0; }
.checklist-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--shade); border-bottom: 2px solid var(--navy); }
.checklist-head h3 { font-size: 1.1rem; font-weight: 800; }
.count { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .4rem; background: var(--red); color: var(--white); font-weight: 800; border-radius: 2px; }
.checklist { counter-reset: doc; }
.checklist li { counter-increment: doc; border-bottom: 1px solid var(--rule); }
.checklist label { display: grid; grid-template-columns: 26px 22px 1fr; gap: .6rem; align-items: start; padding: .7rem 1rem; cursor: pointer; }
.checklist label::before { content: counter(doc); font-weight: 800; font-size: .85rem; color: var(--red); padding-top: .15rem; font-variant-numeric: tabular-nums; }
.checklist input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin-top: .15rem; border: 1.5px solid var(--navy); background: var(--white) center/90% no-repeat; cursor: pointer; }
.checklist input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23c4122f' stroke-width='2.4'/%3E%3C/svg%3E"); }
.checklist span { font-family: var(--type); font-size: 1rem; line-height: 1.45; }
.checklist input:checked + span { text-decoration: line-through; text-decoration-color: var(--red); color: var(--navy-soft); }
.checklist li.is-new { animation: inkin .5s var(--ease-out); }
@keyframes inkin { from { background: rgba(196, 18, 47, .08); } to { background: transparent; } }
.checklist-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 1rem; }
.copied { padding: 0 1rem 1rem; font-weight: 600; color: var(--red); }

.process { display: grid; gap: 1rem; }
.process li { display: grid; gap: .45rem; padding: 1.3rem; background: var(--white); border: 1.5px solid var(--navy); align-content: start; }
.process h3 { font-size: 1.25rem; font-weight: 800; }
.process p { color: var(--navy-soft); }

.faq-wrap { max-width: 860px; }
.faq { border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; color: var(--red); font-size: 1.3rem; line-height: 1.2; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1.1rem; color: var(--navy-soft); max-width: 62ch; }

.footer { background: var(--navy); color: rgba(255, 255, 254, .8); padding-block: 2.6rem 1.3rem; }
.footer-inner { display: grid; gap: 1.2rem; }
.footer-logo { color: var(--white); font-size: 2rem; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 1.2rem; font-weight: 700; color: var(--white); }
.footer-contact a:hover { color: #ff9aa9; }
.demo-note { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 254, .15); font-size: .8rem; opacity: .7; }

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: .4rem;
  padding: .5rem max(12px, env(safe-area-inset-right, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: var(--white); border-top: 2px solid var(--navy);
}
.mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1.5px solid var(--navy); border-radius: 4px; font-weight: 700; font-size: .95rem; }
.mobile-bar .mobile-bar-red { background: var(--red); border-color: var(--red); color: var(--white); }

/* 7. Motion layer: paper, ink and stamps */
.hero { position: relative; isolation: isolate; overflow: clip; }
.forms-float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.forms-float span {
  position: absolute; left: var(--x); top: var(--y); font-family: var(--type); font-weight: 700; color: var(--navy); opacity: .06;
  white-space: nowrap; animation: drift 18s ease-in-out infinite alternate; animation-delay: var(--d);
}
.forms-float span:nth-child(3n) { color: var(--red); opacity: .07; }
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(14px, -26px, 0) rotate(3deg); } }

.hero-copy > * { animation: rise .8s var(--ease-out) backwards; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { translate: 0 16px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

.ink { position: relative; display: inline-block; white-space: nowrap; color: var(--red); }
.ink-line { position: absolute; left: -2%; right: -2%; bottom: -.12em; width: 104%; height: .34em; overflow: visible; }
.ink-line path {
  fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 0; animation: ink 1.1s .7s cubic-bezier(.65, 0, .35, 1) backwards;
}
@keyframes ink { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }

.taxform .ln { animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(.55s + var(--i, 0) * .1s); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.taxform .line input, .taxform .line select { background-image: linear-gradient(var(--red), var(--red)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--ease-out); }
.taxform .line input:focus, .taxform .line select:focus { background-size: 100% 2px; }

.season-stamp {
  position: absolute; right: 4%; top: -18px; z-index: 4; pointer-events: none;
  padding: .3rem .8rem; border: 3px double var(--red); border-radius: 6px; color: var(--red); background: var(--white);
  font-weight: 900; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 14px -8px rgba(20, 38, 64, .5);
  transform: rotate(-9deg); animation: slam .5s 1.2s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
@keyframes slam { from { transform: rotate(-9deg) scale(2.2); opacity: 0; } 70% { opacity: .95; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }

.schedule.anim-ready .leader { transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-out); }
.schedule.anim-ready li.is-in .leader { transform: scaleX(1); }
.schedule.anim-ready li { transition: background-color .3s; }
.schedule li:hover { background: rgba(196, 18, 47, .035); }
.schedule li:hover .ln { background: var(--red); color: var(--white); }
.schedule .ln { transition: background-color .2s, color .2s; }

.checklist-card { position: relative; }
.progress { height: 6px; background: var(--shade); }
.progress span { display: block; height: 100%; width: 0; background: var(--red); transition: width .6s var(--ease-out); }
.progress-text { padding: .5rem 1rem 0; font-size: .82rem; font-weight: 700; color: var(--navy-soft); }
.ready-stamp {
  position: absolute; right: 1.2rem; top: 4.4rem; z-index: 3; pointer-events: none;
  padding: .3rem 1rem; border: 4px double var(--red); border-radius: 6px; color: var(--red);
  font-weight: 900; font-size: 1.7rem; letter-spacing: .14em; text-transform: uppercase; mix-blend-mode: multiply;
  transform: rotate(-10deg); animation: slam .45s cubic-bezier(.2, 1.5, .4, 1) backwards;
}

.track { display: none; position: relative; height: 4px; margin-bottom: 1rem; background: var(--shade); }
.track-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); transition: width .9s var(--ease-out); }
.process .ln { transition: background-color .35s, color .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.process li { transition: border-color .4s, box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.process li.is-done { border-color: var(--red); box-shadow: 6px 6px 0 -1px var(--shade); }
.process li.is-done .ln { background: var(--red); color: var(--white); transform: scale(1.15) rotate(-6deg); }
.process li:hover { transform: translateY(-3px); }

.btn-red { position: relative; overflow: hidden; }
.btn-red::after {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 254, .35), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.btn-red:hover::after { opacity: 1; }

/* Process player: a "video" drawn live, scrubbable, that follows your case */
.vp-case { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.vp-case-label { font-weight: 700; font-size: .9rem; margin-right: .2rem; }
.vp-chip {
  min-height: 42px; min-width: 64px; padding: .4rem .9rem; border: 1.5px solid var(--navy); border-radius: 4px; background: var(--white);
  font-family: var(--type); font-weight: 700; font-size: 1rem; transition: background-color .15s, color .15s, transform .3s var(--ease-out);
}
.vp-chip:hover { transform: translateY(-1px); }
.vp-chip.is-on { background: var(--navy); color: var(--white); box-shadow: 4px 4px 0 -1px var(--red); }
.vp { margin-bottom: 2rem; border: 2px solid var(--navy); background: var(--white); box-shadow: 12px 12px 0 -2px var(--shade); }
.vp-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; cursor: pointer; background: var(--form);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.vp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp-title {
  position: absolute; left: 2.4cqw; top: 2.4cqw; display: flex; align-items: center; gap: .5em; padding: .3em .7em .3em .3em; pointer-events: none;
  background: var(--white); border: 1.5px solid var(--navy); font-weight: 800; font-size: clamp(12px, 2cqw, 18px); line-height: 1;
  box-shadow: 4px 4px 0 -1px var(--shade);
}
.vp-title b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border: 1.5px solid var(--red); color: var(--red); border-radius: 2px; }
.vp-note { position: absolute; right: 2.4cqw; bottom: 2cqw; font-family: var(--type); font-size: clamp(10px, 1.4cqw, 13px); color: var(--navy-soft); pointer-events: none; }
.vp-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .7rem; z-index: 2; }
.vp-big-icon {
  position: relative; display: grid; place-items: center; width: clamp(64px, 11cqw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--red); color: var(--white);
  box-shadow: 0 0 0 6px rgba(255, 255, 254, .9), 0 0 0 8px var(--navy); transition: transform .3s var(--ease-out);
}
.vp-big-icon::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--red); animation: halo 1.8s var(--ease-out) infinite; }
@keyframes halo { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.vp-big-icon svg { width: 42%; height: 42%; fill: currentColor; margin-left: 6%; }
.vp-big:hover .vp-big-icon { transform: scale(1.06); }
.vp-big-label { padding: .35rem .8rem; background: var(--white); border: 1.5px solid var(--navy); font-weight: 800; font-size: clamp(.8rem, 1.9cqw, 1rem); white-space: nowrap; }
.vp:not([data-state="poster"]) .vp-big { display: none; }
.vp-end {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1rem; text-align: center;
  background: rgba(241, 244, 238, .9); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
.vp-end-title { font-weight: 900; font-size: clamp(2rem, 7cqw, 4.2rem); letter-spacing: -0.035em; line-height: 1; }
.vp-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.vp[data-state="ended"] .vp-end { opacity: 1; visibility: visible; transition: opacity .4s; }
.vp-bar { display: flex; align-items: center; gap: .9rem; padding: .55rem .9rem; border-top: 2px solid var(--navy); background: var(--white); }
.vp-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--red); color: var(--white); transition: background-color .2s; }
.vp-btn:hover { background: var(--red-deep); }
.vp-btn svg { width: 20px; height: 20px; fill: currentColor; }
.vp-btn .i-play { margin-left: 3px; }
.vp-btn .i-pause, .vp[data-state="playing"] .vp-btn .i-play { display: none; }
.vp[data-state="playing"] .vp-btn .i-pause { display: block; }
.vp-track { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.vp-track input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.vp-track input:focus-visible { outline: none; }
.vp-track input::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--red) var(--p, 0%), var(--shade) var(--p, 0%)); border: 1px solid var(--navy); }
.vp-track input::-moz-range-track { height: 6px; background: linear-gradient(90deg, var(--red) var(--p, 0%), var(--shade) var(--p, 0%)); border: 1px solid var(--navy); }
.vp-track input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--white); border: 2px solid var(--navy); }
.vp-track input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--navy); }
.vp-track input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--red); outline-offset: 2px; }
.vp-tick { position: absolute; left: calc(100% * var(--at)); top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; background: var(--navy); pointer-events: none; }
.vp-time { flex: none; font-family: var(--type); font-weight: 700; font-size: .95rem; }
.process li[data-chap] { position: relative; cursor: pointer; }
.process li[data-chap]::after { content: ""; position: absolute; left: -1.5px; bottom: -1.5px; height: 4px; width: var(--cp, 0%); background: var(--red); }
.process li.is-playing { border-color: var(--red); background: #fff8f9; }
.pr-go {
  justify-self: start; display: inline-flex; align-items: center; gap: .45em; margin-top: .35rem; padding: .35rem .65rem; border: 1.5px solid var(--navy); border-radius: 4px;
  font-weight: 700; font-size: .82rem; background: var(--white); transition: background-color .15s, color .15s;
}
.pr-go::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--red); }
.pr-go:hover, .process li.is-playing .pr-go { background: var(--navy); color: var(--white); }
.countdown {
  justify-self: start; display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .8rem; border: 1.5px dashed var(--red); border-radius: 4px;
  font-family: var(--type); font-weight: 700; font-size: .95rem; color: var(--navy); background: var(--white);
}
.cd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
@container (max-width: 520px) {
  .vp-note { display: none; }
}

/* 8. Responsive */
@media (min-width: 540px) {
  .form-year { display: grid; align-content: center; justify-items: center; padding: .7rem .9rem; border-left: 1px solid var(--navy); line-height: 1.1; }
  .form-year span { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .form-year b { font-size: 1.4rem; font-weight: 900; }
  .taxform-head { grid-template-columns: auto 1fr auto; }
  .line { grid-template-columns: 34px minmax(130px, .8fr) 1.4fr; }
  .line input, .line select { grid-column: 3; }
  .line-choice legend { grid-column: 2; }
  .boxes { grid-column: 3; padding-top: 0; }
}
@media (min-width: 720px) {
  .schedule li { grid-template-columns: 34px minmax(0, 1fr) minmax(60px, .35fr) auto; align-items: end; column-gap: 1rem; }
  .schedule li > .ln { align-self: start; }
  .leader { display: block; border-bottom: 2px dotted var(--navy); margin-bottom: .55rem; opacity: .5; }
  .sched-price { grid-column: auto; white-space: nowrap; }
  .process { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .links { display: flex; }
  .hero { padding-block: 4rem 5rem; }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .hero-copy { padding-top: 1.5rem; }
  .docs { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; }
  .footer-inner { grid-template-columns: 1fr auto; align-items: end; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
  .section { padding-block: 5.5rem; }
}

@media (min-width: 720px) {
  .track { display: block; }
}

/* 9. Reduced motion: everything lands in its final state */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stamp, .season-stamp, .ready-stamp, .forms-float span, .hero-copy > *, .ink-line path, .taxform, .taxform .ln, .vp-big-icon::after, .cd-dot { animation: none; }
  .schedule.anim-ready .leader { transform: none; transition: none; }
}