:root{color-scheme:light;--ink:#182d28;--muted:#5c6b66;--line:#dce4dd;--paper:#f7f8f3;--accent:#b8d4a1}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}.shell{max-width:1240px;margin:auto;padding:30px 46px}a{color:inherit}button,input{font:inherit}button,.button{cursor:pointer;border:1px solid var(--ink);border-radius:9px;background:var(--ink);color:white;min-height:48px;padding:12px 20px;font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:22px}button:disabled{cursor:not-allowed;opacity:.65}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #546bcd;outline-offset:5px}header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:18px}.brand{display:inline-flex;align-items:center;font-size:27px;font-weight:780;letter-spacing:-1.1px;text-decoration:none}.brand span{font-weight:450}.brand i{width:7px;height:7px;background:#6e9559;border-radius:50%;margin:10px 0 0 5px}nav{display:flex;gap:30px;font-size:14px;font-weight:600}nav a{text-decoration:none}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:72px;align-items:center;padding:70px 0 60px}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:750;margin:0 0 20px}h1{font-size:clamp(42px,4.6vw,62px);line-height:1.05;letter-spacing:-2.7px;margin:0 0 26px;font-weight:620}h1 span{color:#66766d}.lead{font-size:18px;line-height:1.65;max-width:490px;margin-bottom:28px}h2{font-size:25px;line-height:1.25;letter-spacing:-.6px}.small,.muted{color:var(--muted);font-size:12px}.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:0 18px 50px #213b2710;transform:rotate(1deg)}.quote-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.08em;font-weight:700}.tag{background:#edf2e8;border-radius:5px;padding:4px 9px}.quote h2{margin-bottom:3px;font-size:24px}.quote p{margin-top:5px}.lines{margin:25px 0}.lines>div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid #edf0ec;font-size:14px}.lines small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.lines dd{margin:0;font-weight:650;white-space:nowrap}.lines .total{padding-top:20px;border:0;font-size:17px}.total dd{font-size:26px;line-height:1}.review{padding:11px 14px;background:#f1f5ed;font-size:12px;border-radius:7px;margin-bottom:15px}.dot{display:inline-block;background:#6c8f52;width:6px;height:6px;border-radius:50%;margin-right:8px}.workflow{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:44px;padding:35px 0}.number{font-size:12px;color:var(--muted)}.workflow h2{font-size:18px;margin:12px 0}.workflow p{font-size:14px;color:var(--muted);margin:0}.details{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:70px 0}.details p{font-size:14px;color:var(--muted)}.details h2{font-size:28px;max-width:420px}.faq h2{font-size:22px}details{border-bottom:1px solid var(--line);padding:15px 0}summary{cursor:pointer;font-size:15px;font-weight:600}.interest{background:#e9eee3;border:1px solid #dce5d3;border-radius:16px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:65px}.interest h2{font-size:32px;margin:0 0 18px}.interest p{max-width:370px;font-size:14px;color:var(--muted)}form>label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}input[type=email]{width:100%;min-height:48px;border:1px solid #8e9d91;border-radius:7px;background:white;padding:10px 13px}.check{display:block;font-size:12px;font-weight:400;line-height:1.6;margin:17px 0}.check input{width:17px;height:17px;margin-right:7px;vertical-align:middle}.check a{white-space:nowrap}form button{width:100%}.trap{position:absolute;left:-9999px}footer{padding:32px 0 6px;display:flex;align-items:center;justify-content:space-between;gap:22px}footer .brand{font-size:21px}footer div{display:flex;gap:20px;align-items:center}footer a,footer button,footer small{font-size:12px;color:var(--muted)}footer button{background:none;border:0;padding:0;min-height:44px;text-decoration:underline;font-weight:400}dialog{max-width:480px;border:1px solid var(--line);border-radius:16px;padding:28px;color:var(--ink)}dialog::backdrop{background:#10271e66}dialog .secondary{background:white;color:var(--ink);margin-left:8px}.skip{position:absolute;left:10px;top:-100px;padding:10px;background:white;z-index:3}.skip:focus{top:10px}.document{max-width:720px;margin:50px auto 90px}.document h1{font-size:42px}.document p{color:var(--muted)}@media(max-width:800px){.shell{padding:22px}.hero{gap:30px;padding:40px 0;grid-template-columns:1fr}.hero>div{max-width:580px}.quote{transform:none;max-width:550px;width:100%}.workflow{gap:25px}.details{gap:35px}.interest{padding:25px;gap:30px;grid-template-columns:1fr}footer{flex-wrap:wrap}}@media(max-width:520px){nav{gap:18px}nav a:first-child{display:none}h1{font-size:44px;letter-spacing:-2px}.lead{font-size:17px}.quote{padding:23px}.workflow,.details{grid-template-columns:1fr}.workflow{gap:28px}.details{padding:42px 0}.interest h2{font-size:29px}footer small{width:100%}.button{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Transitions.dev recipes: modal and stagger. Original selectors and reduced-motion guards retained. */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}


/* QuoteNext color and interaction layer */
:root{--ink:#29233f;--muted:#655e76;--line:#e0daec;--paper:#faf8ff;--accent:#6744c5;--feedback-dur:150ms;--lift-dur:250ms;--feedback-ease:cubic-bezier(.22,1,.36,1)}
body{background:radial-gradient(ellipse 65% 500px at 90% 8%,#ece3ff 0,transparent 75%),radial-gradient(ellipse 45% 450px at 0 25%,#ffece4 0,transparent 75%),var(--paper)}
.brand i{background:#e4775c;box-shadow:0 0 0 4px #f9e3dc}
h1 span{color:#6744b5}.hero .eyebrow{color:#68479b}.hero .button,form button,dialog button:not(.secondary){background:#603bb4;border-color:#603bb4;box-shadow:0 7px 18px #603bb41a}
.button,button{transition:transform var(--feedback-dur) var(--feedback-ease),background-color var(--feedback-dur) var(--feedback-ease),box-shadow var(--feedback-dur) var(--feedback-ease)}
.button>span{transition:transform var(--lift-dur) var(--feedback-ease)}
.button:active,button:not(:disabled):active{transform:scale(.98)}
.quote{border-color:#e1d7f1;background:linear-gradient(130deg,#fff 68%,#f5f0ff);box-shadow:0 24px 65px #50327c16;position:relative;overflow:hidden}
.quote::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#8555d7,#df8f9c,#e6b077)}
.tag{background:#eee5ff;color:#5f3894}.review{background:#e8f3ee;color:#255b49}.dot{background:#43846b}.lines .total dd{color:#6744b5}
.number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#eee5ff;color:#5c3998;font-weight:700}
.workflow article:nth-child(2) .number{background:#ffebe0;color:#8f4930}.workflow article:nth-child(3) .number{background:#e0f1e9;color:#28634f}
.workflow{border-color:#e2dced}.interest{background:linear-gradient(115deg,#eee5fa,#f7eee8);border-color:#dfd1ed;position:relative}.interest .eyebrow{color:#66428d}
input[type=email]{border-color:#a99abd;transition:border-color var(--feedback-dur),box-shadow var(--feedback-dur)}input[type=email]:focus{border-color:#6744c5;box-shadow:0 0 0 4px #6744c512}
input[type=checkbox]{accent-color:#6744c5}details[open] summary{color:#6744b5}dialog{background:#faf8ff;border-color:#ddd1ef;box-shadow:0 30px 90px #38214b33}dialog::backdrop{background:#22173966;backdrop-filter:blur(4px)}
.hero .button.t-stagger-line{display:inline-flex}.t-stagger-line--3{transition-delay:calc(var(--stagger-stagger)*2)}.t-stagger-line--4{transition-delay:calc(var(--stagger-stagger)*3)}.t-stagger-line--5{transition-delay:calc(var(--stagger-stagger)*4)}
.hero.t-stagger.is-shown>.quote{transform:rotate(1deg)}
@media(hover:hover) and (pointer:fine){
 .button:hover,button:not(:disabled):not(.secondary):hover{box-shadow:0 10px 25px #603bb42b}.button:hover>span{transform:translateX(5px)}
 .hero.t-stagger.is-shown>.quote:hover{transform:translateY(-5px) rotate(0deg)}
 nav a:hover,footer a:hover{color:#6744c5}
}
@media(max-width:800px){.hero.t-stagger.is-shown>.quote{transform:none}}
@media(prefers-reduced-motion:reduce){
 .button,button,.button>span,input[type=email]{transition:none!important}.button:active,button:not(:disabled):active,.button:hover>span{transform:none}
 .hero.t-stagger.is-shown>.quote,.hero.t-stagger.is-shown>.quote:hover{transform:none}
 dialog::backdrop{backdrop-filter:none}
}

/* Slow quotation examples: controls stay still while only the content changes. */
.quote-example h2{min-height:1.25em}.quote-example>p{min-height:1.55em}
.quote-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.quote-pagination{display:flex;align-items:center;gap:9px}
.quote-controls button{min-height:44px;min-width:44px;padding:8px 11px;border:1px solid #dfd5ef;background:#faf7ff;color:#5f3894;font-size:12px;box-shadow:none;gap:0}
.quote-controls button:hover{background:#eee5ff}.quote-controls [hidden]{display:none}
.quote-pagination span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:34px;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:520px){.quote-example h2{font-size:22px}.quote-example>p{min-height:3.1em}.quote-example .lines dt{max-width:175px;min-height:3.3em}.quote-example .lines .total dt{min-height:0}}