/* ---------- Start page ---------- */
[hidden] { display:none !important; }
.start { padding-block:56px 120px; background:linear-gradient(var(--paper), var(--paper)); }
.sgrid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:48px; align-items:start; }
.s-left { grid-column:1 / span 5; position:sticky; top:110px; display:flex; flex-direction:column; gap:28px; padding-top:24px; }
.s-left h1 { margin:0; font-size:clamp(44px, 5.4vw, 76px); line-height:.98; font-weight:500; letter-spacing:-.04em; }
.s-left .sub { margin:0; max-width:34ch; font-size:20px; line-height:30px; color:var(--ink-muted); }
.next { list-style:none; margin:8px 0 0; padding:0; counter-reset:n; }
.next li { counter-increment:n; display:grid; grid-template-columns:40px 1fr; gap:2px 12px; padding:18px 0; border-top:1px solid var(--line); }
.next li:last-child { border-bottom:1px solid var(--line); }
.next li::before { content:counter(n); grid-row:1 / span 2; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-size:13px; font-weight:600; }
.next b { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.next span { font-size:15px; line-height:23px; color:var(--ink-muted); }
.s-note { margin:0; font-size:15px; line-height:23px; color:var(--ink-subtle); }
.s-right { grid-column:7 / span 6; }
.sform, .done { padding:32px; border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-float); }
.sform { display:flex; flex-direction:column; gap:20px; }
.f-row { display:grid; gap:16px; } .f-row.two { grid-template-columns:1fr 1fr; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; margin:0; padding:0; border:0; }
.field label, .field legend { font-size:14px; font-weight:600; color:var(--ink); padding:0; }
.field label em { font-style:normal; font-weight:500; color:var(--ink-subtle); }
.field input, .field select, .field textarea { width:100%; height:46px; padding:0 14px; border:1px solid var(--line-control); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font:inherit; font-size:16px; transition:border-color .15s, box-shadow .15s; }
.field textarea { height:auto; padding:12px 14px; line-height:24px; resize:vertical; }
.field select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position:calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-subtle); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); }
.field [aria-invalid="true"] { border-color:var(--risk); }
.err { margin:0; min-height:0; font-size:13.5px; line-height:19px; color:var(--risk); }
.err:empty { display:none; }
.outs legend { margin-bottom:10px; }
.ocards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ocard { --t:var(--tint-iris); --ti:var(--iris-ink); position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 16px 14px 44px; border-radius:12px; border:1.5px solid transparent; background:var(--t); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.ocard.rose { --t:var(--tint-rose); --ti:var(--rose-ink); } .ocard.sky { --t:var(--tint-sky); --ti:var(--sky-ink); } .ocard.aqua { --t:var(--tint-aqua); --ti:var(--aqua-ink); }
.ocard.plain { --t:var(--mist); --ti:var(--ink); }
.ocard.wide { grid-column:1 / -1; }
.field .ocard { padding:14px 16px 14px 46px; font-weight:400; }
.field .ocard input { position:absolute; left:16px; top:16px; width:18px; height:18px; margin:0; padding:0; border:0; box-shadow:none; accent-color:var(--ti); }
.ocard b { font-size:15px; font-weight:600; }
.ocard span { font-size:13.5px; color:var(--ink-muted); }
.ocard:has(input:checked) { border-color:var(--ti); box-shadow:0 0 0 3px color-mix(in srgb, var(--ti) 15%, transparent); }
.ocard:has(input:focus-visible) { outline:2px solid var(--signal); outline-offset:2px; }
.f-submit { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:4px; }
.f-submit .btn { height:50px; padding:0 28px; font-size:16px; }
.f-fine { margin:0; font-size:13.5px; color:var(--ink-subtle); }
.f-fine a { color:inherit; }
.f-status { margin:0; font-size:14px; color:var(--risk); }
.f-status:empty { display:none; }
.done { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:48px 40px; outline:none; }
.done-mark { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--gain-soft); color:var(--gain); }
.done-mark svg { width:26px; height:26px; }
.done h2 { margin:0; font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.025em; }
.done p { margin:0; max-width:40ch; font-size:17px; line-height:27px; color:var(--ink-muted); }
@media (max-width: 1080px) { .s-left, .s-right { grid-column:1 / -1; } .s-left { position:static; } }
@media (max-width: 640px) {
  .start { padding-block:32px 80px; }
  .sform { padding:20px; } .f-row.two, .ocards { grid-template-columns:1fr; }
  .done { padding:32px 24px; }
}
