:root{
  --ease-spring: cubic-bezier(.22,1,.36,1);
}
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  font-family: 'Instrument Sans', sans-serif;
  color: #1C1224;
  background: #FDF9FB;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,.font-display{ font-family: 'Gabarito', sans-serif; }

/* Subtle grain texture for depth on dark sections */
.grain{ position:relative; }
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events:none; mix-blend-mode: overlay;
}

/* Flowing line motif echoing brand cover art */
.brand-lines{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.brand-lines svg{ position:absolute; width:140%; max-width:none; opacity:.10; }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2.5px solid #EC1E24;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Gabarito',sans-serif; font-weight:700; letter-spacing:-.01em;
  border-radius:9999px; padding:.9rem 1.75rem; font-size:1rem; line-height:1.1;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), background-color .25s ease, color .25s ease;
  min-height:48px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background:#EC1E24; color:#fff; box-shadow: 0 10px 24px -8px rgba(236,30,36,.55); }
.btn-primary:hover{ background:#C81118; transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(236,30,36,.6); }
.btn-secondary{ background:#fff; color:#6F2876; box-shadow: 0 10px 24px -10px rgba(28,10,32,.25); }
.btn-secondary:hover{ background:#F1E3F3; transform: translateY(-2px); }
.btn-ghost-dark{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.35); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-outline{ background:transparent; color:#6F2876; border:1.5px solid #D8B8DC; }
.btn-outline:hover{ background:#F1E3F3; border-color:#6F2876; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* Checklist ticks */
.tick{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:9999px; background:#6F2876; color:#fff; flex-shrink:0; }
.tick svg{ width:13px; height:13px; }

/* Hero visual */
.hero-visual__frame{ position:relative; border-radius:1.75rem; overflow:hidden; box-shadow: 0 30px 70px -20px rgba(20,7,24,.45); }
.hero-visual__frame img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.05) contrast(1.02); }
.hero-visual__overlay{ position:absolute; inset:0;
  background:
    linear-gradient(200deg, rgba(111,40,118,.38) 0%, rgba(46,18,51,0) 55%),
    linear-gradient(0deg, rgba(20,7,24,.72) 0%, rgba(20,7,24,0) 45%);
}

/* Segmented progress */
.step-track{ display:flex; align-items:center; gap:.5rem; }
.step-node{ display:flex; align-items:center; gap:.6rem; flex:1; }
.step-dot{ width:30px; height:30px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  font-family:'Gabarito',sans-serif; font-weight:700; font-size:.85rem; flex-shrink:0;
  background:#F1E3F3; color:#8A5D93; border:2px solid #E0C2E6; transition: all .3s var(--ease-spring); }
.step-label{ font-size:.8rem; font-weight:600; color:#8A5D93; display:none; }
@media(min-width:640px){ .step-label{ display:block; } }
.step-line{ height:2px; flex:1; background:#E0C2E6; border-radius:2px; }
.step-node.is-active .step-dot{ background:#EC1E24; border-color:#EC1E24; color:#fff; box-shadow:0 6px 16px -6px rgba(236,30,36,.6); }
.step-node.is-active .step-label{ color:#6F2876; }
.step-node.is-done .step-dot{ background:#6F2876; border-color:#6F2876; color:#fff; }
.step-node.is-done .step-line{ background:#6F2876; }

/* Form controls */
.field-label{ font-family:'Gabarito',sans-serif; font-weight:600; font-size:.925rem; color:#1C1224; display:block; margin-bottom:.4rem; }
.field-hint{ font-size:.78rem; color:#8A5D93; margin-top:.3rem; }
.field-error{ font-size:.8rem; color:#C81118; margin-top:.4rem; display:none; align-items:flex-start; gap:.35rem; font-weight:600; }
.field-error.is-visible{ display:flex; }
.text-input{
  width:100%; border:1.5px solid #E5D6E7; background:#fff; border-radius:.85rem; padding:.85rem 1rem;
  font-size:1rem; font-family:'Instrument Sans',sans-serif; color:#1C1224; transition: border-color .2s ease, box-shadow .2s ease;
  min-height:48px;
}
.text-input::placeholder{ color:#B79CBB; }
.text-input:focus{ outline:none; border-color:#6F2876; box-shadow:0 0 0 4px rgba(111,40,118,.13); }
.text-input.is-invalid{ border-color:#EC1E24; box-shadow:0 0 0 4px rgba(236,30,36,.1); }
select.text-input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236F2876' stroke-width='2.2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.75rem; }

.pill-option{ position:relative; }
.pill-option input{ position:absolute; opacity:0; width:1px; height:1px; }
.pill-option label{
  display:flex; align-items:center; justify-content:center; text-align:center; gap:.5rem; cursor:pointer;
  border:1.5px solid #E5D6E7; background:#fff; border-radius:.85rem; padding:.8rem 1rem; font-weight:600; font-size:.92rem;
  color:#4A2E4F; transition: all .2s ease; min-height:48px;
}
.pill-option input:checked + label{ border-color:#6F2876; background:#F1E3F3; color:#6F2876; box-shadow:0 0 0 3px rgba(111,40,118,.12); }
.pill-option input:focus-visible + label{ outline:2.5px solid #EC1E24; outline-offset:2px; }

.type-card{ position:relative; }
.type-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.type-card label{
  display:flex; flex-direction:column; gap:.6rem; cursor:pointer; border:2px solid #E5D6E7; background:#fff;
  border-radius:1.25rem; padding:1.5rem; transition: all .25s var(--ease-spring); height:100%;
}
.type-card input:checked + label{ border-color:#6F2876; box-shadow: 0 16px 34px -16px rgba(111,40,118,.4); background: linear-gradient(180deg,#fff, #FAF3FB); }
.type-card input:focus-visible + label{ outline:2.5px solid #EC1E24; outline-offset:2px; }
.type-card label:hover{ border-color:#C994D2; transform: translateY(-2px); }
.type-card__icon{ width:52px; height:52px; border-radius:.9rem; display:flex; align-items:center; justify-content:center; background:#F1E3F3; color:#6F2876; }
.type-card input:checked + label .type-card__icon{ background:#6F2876; color:#fff; }

.tool-panel{ transition: opacity .35s var(--ease-spring), transform .35s var(--ease-spring); }
[data-panel][hidden]{ display:none; }

/* Content is always visible/accessible; this only adds a subtle settle-in motion, never a hide state */
.fade-up{ opacity:1; transform: translateY(14px); transition: transform .7s var(--ease-spring); }
.fade-up.is-visible{ transform: translateY(0); }

details.faq-item summary{ list-style:none; cursor:pointer; }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item .faq-icon{ transition: transform .3s var(--ease-spring); }
details.faq-item[open] .faq-icon{ transform: rotate(45deg); }
details.faq-item[open] summary{ color:#6F2876; }

.toast{
  position:fixed; left:50%; bottom:1.5rem; transform: translate(-50%, 20px); z-index:100;
  background:#1C1224; color:#fff; font-weight:600; font-size:.9rem; padding:.85rem 1.4rem; border-radius:9999px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition: all .35s var(--ease-spring);
}
.toast.is-visible{ opacity:1; transform: translate(-50%, 0); }

.skip-link{ position:absolute; left:1rem; top:-60px; background:#EC1E24; color:#fff; padding:.75rem 1.25rem; border-radius:.6rem; font-weight:700; z-index:200; transition: top .2s ease; }
.skip-link:focus{ top:1rem; }

.card-elevated{ background:#fff; border-radius:1.75rem; box-shadow: var(--tw-shadow, 0 30px 70px -20px rgba(20,7,24,.45)); }