/* ============================================================
   SaiLink LP — design system v2
   3 colors only: Navy #0A0E2A / Cyan #05DCEE (bright #00EFFA) / Off-white #FEFFFA
   Grays = navy at low opacity. Font: Zen Kaku Gothic New.
   Two tones via [data-tone]: refined (base) | bold
   Layout: editorial split (aside + main), full-bleed navy bands for rhythm.
   ============================================================ */

:root{
  --navy:#0A0E2A;
  --cyan:#05DCEE;          /* tweakable accent */
  --cyan-bright:#00EFFA;
  --bg:#FEFFFA;

  --ink:        #0A0E2A;
  --ink-78:     rgba(10,14,42,.78);
  --ink-62:     rgba(10,14,42,.62);
  --ink-46:     rgba(10,14,42,.46);
  --ink-32:     rgba(10,14,42,.32);
  --ink-16:     rgba(10,14,42,.16);
  --line:       rgba(10,14,42,.12);
  --line-soft:  rgba(10,14,42,.07);
  --fill:       rgba(10,14,42,.035);
  --fill-2:     rgba(10,14,42,.06);

  --maxw: 1140px;
  --pad: clamp(22px, 5vw, 60px);
  --aside-w: clamp(210px, 23vw, 290px);
  --gap: clamp(40px, 5vw, 88px);
  --sec-y: clamp(66px, 9vw, 128px);
  --measure: 660px;
  --tint: color-mix(in srgb, var(--cyan) 6%, var(--bg));   /* 準強調地 */

  --r: 14px;
  --motif-op: .05;
  --ease: cubic-bezier(.22,.61,.36,1);
}
[data-motif="subtle"]{ --motif-op:.085; }
[data-motif="bold"]{ --motif-op:.14; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight:400; line-height:1.9; letter-spacing:.01em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- shell / sections ---- */
.shell{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.sec{ position:relative; padding-block:var(--sec-y); }
.sec.tint{ background:var(--tint); }   /* \u6e96\u5f37\u8abf\u30bb\u30af\u30b7\u30e7\u30f3 */
.measure{ max-width:var(--measure); }

/* editorial split: aside (number + heading) | main (content) */
.sec-grid{ display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,40px); }
@media (min-width:860px){
  .sec-grid{ grid-template-columns:var(--aside-w) minmax(0,1fr); gap:var(--gap); }
  .sec-aside{ position:sticky; top:clamp(40px,8vh,80px); align-self:start; }
}
.sec-main{ min-width:0; }

/* hairline only between two consecutive light sections */
.sec-split:not(.band) + .sec-split:not(.band)::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(100% - var(--pad)*2); max-width:var(--maxw); height:1px; background:var(--line-soft);
}
/* stronger divider where two tinted sections meet (05→06) */
.sec.tint + .sec.tint::before{ background:var(--line); }

/* ---- section aside header ---- */
.idx{
  display:block; font-size:clamp(40px,5vw,62px); font-weight:800; line-height:.9;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:transparent; -webkit-text-stroke:1.4px var(--ink-32);
}
[data-tone="bold"] .idx{ -webkit-text-stroke:0; color:var(--ink-16); }
.aside-lbl{
  display:inline-flex; align-items:center; gap:.5em; margin-top:16px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--ink-46);
}
.aside-lbl .bolt-i{ width:10px; height:13px; color:var(--cyan); flex:none; }
.sec-aside h2{ margin-top:14px; }

/* ---- type ---- */
h1,h2,h3,p{ margin:0; text-wrap:pretty; }
h1{ font-size:clamp(31px, 5.4vw, 60px); font-weight:700; line-height:1.26; letter-spacing:-.015em; }
h1 .hl{ color:var(--cyan); }
.sec-head{ font-size:clamp(24px, 3.3vw, 37px); font-weight:700; line-height:1.32; letter-spacing:-.01em; }
h3{ font-size:clamp(17px,2.3vw,21px); font-weight:700; line-height:1.5; }

.lede{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-78); line-height:1.95; }
.body{ font-size:clamp(15px,1.3vw,16.5px); color:var(--ink-78); }
.small{ font-size:13.5px; color:var(--ink-62); line-height:1.8; }

/* ---- eyebrow (hero) ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em; flex-wrap:wrap;
  font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--ink-62);
}
.eyebrow .bolt-i{ width:12px; height:16px; color:var(--cyan); flex:none; }
.eyebrow .sep{ color:var(--ink-32); font-weight:500; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:inherit; font-size:16px; font-weight:700; letter-spacing:.02em;
  color:var(--navy); background:var(--cyan); border:none; border-radius:var(--r);
  padding:17px 32px; cursor:pointer; text-decoration:none; line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 26px -10px var(--cyan);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
}
.btn:hover{ transform:translateY(-2px); filter:saturate(1.08); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 34px -10px var(--cyan); }
.btn:active{ transform:translateY(0); }
.btn .arr{ width:17px; height:17px; }
.btn.lg{ font-size:17px; padding:20px 38px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; filter:none; }
.btn:disabled:hover{ transform:none; box-shadow:none; filter:none; }

/* ---- consent row (modal) ---- */
.consent{ display:flex; align-items:flex-start; gap:11px; margin-top:18px;
  font-size:13.5px; line-height:1.7; color:var(--ink-78); }
.consent input{ width:18px; height:18px; accent-color:var(--cyan); flex:none; cursor:pointer; margin:2px 0 0; }
.consent label{ cursor:pointer; }
.consent-link{ color:var(--cyan); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.consent .req{ margin-left:6px; }

/* ---- hero ---- */
.topbar{ padding-top:clamp(22px,4vw,40px); }
.logo{ display:block; width:clamp(120px,16vw,168px); height:auto; }
.hero{ padding-top:clamp(30px,5vw,56px); padding-bottom:var(--sec-y); }
.hero .eyebrow{ margin-bottom:26px; }
.hero h1{ max-width:none; margin-bottom:clamp(26px,3vw,34px); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,38px); align-items:start; }
@media (min-width:760px){ .hero-grid{ grid-template-columns:5fr 7fr; gap:clamp(32px,3.4vw,52px); } }
.hero .sub{
  font-size:clamp(17px,1.7vw,21px); font-weight:500; color:var(--ink); line-height:1.62;
}
.hero .sub .hl{ color:var(--cyan); font-weight:700; }
.hero .cta-wrap{ margin-top:28px; }
.hero .desc{
  font-size:clamp(14.5px,1.2vw,15.5px); color:var(--ink-62); line-height:1.95;
  padding:20px 22px; background:var(--fill); border:1px solid var(--line-soft);
  border-left:2.5px solid var(--cyan); border-radius:0 var(--r) var(--r) 0;
}
.hero .desc .h{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--ink); font-size:12px; letter-spacing:.1em; margin-bottom:9px; }
.hero .desc .h .bolt-i{ width:11px; height:14px; color:var(--cyan); flex:none; }

/* ============================================================
   ②④ parent–child framed block  (result → 2 scenes, one chunk)
   ============================================================ */
.pc{
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--bg); box-shadow:0 18px 40px -32px rgba(10,14,42,.55);
}
.pc + .pc-note{ margin-top:20px; }
.pc-head{
  position:relative; padding:clamp(20px,2.6vw,30px); background:var(--fill-2);
  border-bottom:1px solid var(--line);
}
.pc.is-sol .pc-head{
  background:color-mix(in srgb, var(--cyan) 11%, var(--bg));
  border-bottom-color:color-mix(in srgb, var(--cyan) 30%, var(--line));
}
.pc-tag{
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:13px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--ink-46);
}
.pc-tag .sq{ width:8px; height:8px; border-radius:2px; background:var(--ink-32); flex:none; }
.pc.is-sol .pc-tag{ color:color-mix(in srgb,var(--cyan) 60%, var(--navy)); }
.pc.is-sol .pc-tag .sq{ background:var(--cyan); }
.pc-result{ font-size:clamp(18px,2vw,24px); font-weight:700; line-height:1.6; letter-spacing:-.005em; }
.pc-result .em{ color:var(--cyan); }

.pc-body{ position:relative; padding:clamp(18px,2.4vw,28px); display:flex; flex-direction:column; gap:16px; }
.pc-body::before{
  content:""; position:absolute; left:clamp(28px,3vw,40px); top:0; height:18px; width:2px;
  background:var(--line); transform:translateX(-50%);
}
.scene{
  position:relative; background:var(--fill); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:18px 20px 19px 22px;
}
.scene::before{
  content:""; position:absolute; left:-13px; top:25px; width:13px; height:2px; background:var(--line);
}
.pc.is-sol .scene::before{ background:var(--cyan); }
.pc-body{ padding-left:clamp(34px,4vw,52px); }
.pc-body::after{
  content:""; position:absolute; left:clamp(28px,3vw,40px); top:18px; bottom:25px; width:2px;
  background:var(--line); transform:translateX(-50%);
}
.scene .tag{
  display:inline-flex; align-items:center; gap:.45em; margin-bottom:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-46);
}
.scene .tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none; }
.scene p{ font-size:clamp(14px,1.2vw,15.5px); color:var(--ink-78); line-height:1.85; }

.maps{
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:16px;
  font-size:12.5px; font-weight:700; color:var(--cyan); letter-spacing:.02em;
}
.maps .bolt-i{ width:11px; height:14px; }

/* mirror highlight echo */
[data-motion="on"] .pc{ transition:box-shadow .5s var(--ease), border-color .5s var(--ease); }
[data-motion="on"] .pc.flash{
  border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 16%, transparent), 0 18px 40px -32px rgba(10,14,42,.55);
}

/* ---- note / supplement card ---- */
.note-card{
  background:var(--fill); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:20px 22px;
}
.note-card .lbl{ font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--cyan); margin-bottom:8px; }

/* ============================================================
   full-bleed navy bands  (③ なぜ今か / ⑥ CTA) — rhythm breaks
   ============================================================ */
.band{ background:var(--navy); color:var(--bg); }
.band .idx{ -webkit-text-stroke:1.4px rgba(254,255,250,.32); color:transparent; }
[data-tone="bold"] .band .idx{ -webkit-text-stroke:0; color:rgba(254,255,250,.2); }
.band .aside-lbl{ color:rgba(254,255,250,.55); }
.band .sec-head, .band h3{ color:var(--bg); }
.band .lede{ color:rgba(254,255,250,.82); }
.band .body{ color:rgba(254,255,250,.72); }
.band .note-card{ background:rgba(254,255,250,.06); border-color:rgba(254,255,250,.14); }
.band .small{ color:rgba(254,255,250,.6); }
.band .btn{ box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 34px -8px var(--cyan); }

/* ③ statement layout */
.why-lede{ font-size:clamp(19px,2.1vw,27px); font-weight:500; line-height:1.62; letter-spacing:-.01em; }
.why-lede .hl{ color:var(--cyan); font-weight:700; }

/* ⑥ CTA layout */
.cta-band .sec-main{ display:flex; flex-direction:column; align-items:flex-start; }
.price-line{ display:flex; gap:12px; align-items:flex-start; margin-top:26px; font-size:13.5px; line-height:1.8; color:rgba(254,255,250,.7); }
.price-line .tk{ color:var(--cyan); font-weight:700; flex:none; }

/* ---- founder (⑤) ---- */
.founder{ display:flex; gap:16px; align-items:flex-start; margin-top:26px; padding:22px;
  background:var(--fill); border:1px solid var(--line-soft); border-radius:var(--r); }
.founder .ava{ width:50px; height:50px; border-radius:50%; flex:none; background:var(--navy); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; }
.founder .ava .bolt-i{ width:17px; height:22px; }
.founder .meta{ font-size:13.5px; color:var(--ink-62); line-height:1.8; }
.founder .meta b{ color:var(--ink); font-weight:700; }

/* ---- footer ---- */
.site-foot{ padding:48px 0 64px; border-top:1px solid var(--line-soft); }
.site-foot .row{ display:flex; flex-direction:column; gap:8px; }
.site-foot .nm{ font-weight:700; font-size:16px; letter-spacing:.02em; color:var(--ink);
  text-decoration:none; transition:color .15s; }
.site-foot a.nm:hover{ color:var(--cyan); }
.site-foot .cp{ font-size:12.5px; color:var(--ink-46); }
.site-foot .foot-nav{ display:flex; gap:20px; margin-top:4px; }
.site-foot .foot-nav a{ font-size:13px; font-weight:600; color:var(--ink-62); text-decoration:none;
  letter-spacing:.02em; transition:color .15s; }
.site-foot .foot-nav a:hover{ color:var(--cyan); }
.site-foot .foot-nav a.is-soon{ color:var(--ink-32); cursor:default; pointer-events:none; }

/* ---- header nav (company page) ---- */
.topbar .bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar .logo-link{ display:inline-flex; line-height:0; }
.topbar .top-nav{ display:flex; gap:clamp(16px,4vw,32px); }
.topbar .top-nav a{ font-size:14px; font-weight:600; color:var(--ink-62); text-decoration:none;
  letter-spacing:.02em; transition:color .15s; }
.topbar .top-nav a:hover, .topbar .top-nav a[aria-current]{ color:var(--cyan); }

/* ---- company page ---- */
.page-head{ position:relative; padding-top:clamp(28px,5vw,48px); padding-bottom:clamp(40px,6vw,72px); }
.page-head h1{ margin-top:18px; }
.co-table{ width:100%; border-collapse:collapse; border-top:1px solid var(--line); }
.co-table tr{ border-bottom:1px solid var(--line-soft); }
.co-table th{ text-align:left; vertical-align:top; padding:20px 24px 20px 0; width:clamp(120px,26%,200px);
  font-size:13.5px; font-weight:700; color:var(--ink-46); letter-spacing:.04em; white-space:nowrap; }
.co-table td{ vertical-align:top; padding:20px 0; font-size:15px; color:var(--ink); line-height:1.85; }
.co-table td .note{ display:block; font-size:13px; color:var(--ink-62); margin-top:4px; }
.co-table .row-cta td{ padding-top:24px; }
.co-statement{ margin-top:clamp(36px,5vw,56px); padding:24px 26px; background:var(--tint);
  border:1px solid var(--line-soft); border-radius:var(--r); font-size:15px; line-height:2;
  color:var(--ink-78); max-width:720px; }
.co-statement .lead{ display:block; font-weight:700; color:var(--cyan); font-size:12.5px;
  letter-spacing:.14em; margin-bottom:10px; }

/* ---- legal / privacy policy ---- */
.legal{ max-width:760px; }
.legal .intro{ font-size:15px; line-height:2; color:var(--ink-78); margin-bottom:8px; }
.legal section{ margin-top:clamp(30px,4vw,44px); }
.legal h2{ font-size:clamp(17px,2vw,20px); font-weight:700; color:var(--ink); line-height:1.5;
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line-soft); }
.legal h2 .n{ color:var(--cyan); margin-right:.5em; font-feature-settings:"tnum" 1; }
.legal p{ font-size:14.5px; line-height:2; color:var(--ink-78); }
.legal p + p{ margin-top:14px; }
.legal ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.legal li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.85; color:var(--ink-78); }
.legal li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px;
  background:var(--cyan); border-radius:1px; transform:rotate(45deg); }
.legal .sign{ margin-top:clamp(36px,5vw,52px); padding-top:22px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.9; color:var(--ink-62); }
.legal .sign b{ color:var(--ink); font-weight:700; }

/* ---- reveal ---- */
[data-motion="on"] .rv{ opacity:0; transform:translateY(18px); }
[data-motion="on"] .rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
/* LCP: first-view H1 はリビールアニメから除外し初回ペイントで最終状態に固定（下層の.rv演出は不変） */
[data-motion="on"] #hero-h1.rv,
[data-motion="on"] .page-head h1.rv{ opacity:1; transform:none; }

/* ---- background lightning motif ---- */
.motif{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.motif .bolt{ position:absolute; color:var(--cyan); opacity:var(--motif-op); }
.band .motif .bolt{ color:var(--cyan); }
.sec > .shell{ position:relative; z-index:1; }

a, button{ -webkit-tap-highlight-color:transparent; }

/* ============================================================
   ④ Human / AI division flow diagram
   ============================================================ */
.flow{ margin-top:30px; max-width:760px; }
.flow-cap{ display:flex; align-items:center; gap:.55em; margin-bottom:10px;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-46); }
.flow-cap.is-ai{ color:color-mix(in srgb,var(--cyan) 62%,var(--navy)); }
.flow-cap .pill{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.04em; }
.flow-cap.is-old .pill{ background:var(--fill-2); color:var(--ink-62); }
.flow-cap.is-ai .pill{ background:color-mix(in srgb,var(--cyan) 16%,transparent); color:var(--navy); }

.flow-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px 6px; align-items:stretch; }
.node{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius:10px; padding:12px 5px; min-height:58px; text-align:center;
  font-size:11px; font-weight:700; line-height:1.28; letter-spacing:.01em; }
.node small{ font-weight:500; font-size:9.5px; opacity:.7; line-height:1.2; }
.node.human{ background:var(--fill-2); color:var(--ink-62); border:1px solid var(--line); }
.node.ai{ background:color-mix(in srgb,var(--cyan) 17%, var(--bg)); border:1.5px solid var(--cyan);
  color:var(--navy); font-size:12px; box-shadow:0 8px 22px -12px var(--cyan); }
.node.ai b{ display:block; }
.node.ai small{ color:var(--ink-62); opacity:1; }
.node.goal{ background:var(--navy); color:var(--bg); border:1px solid var(--navy); }
.node.goal small{ color:var(--cyan); opacity:1; font-weight:700; }
.node.empty{ background:transparent; border:1px dashed var(--line); color:var(--ink-32); font-weight:600; font-size:9.5px; }
.flow-shift{ grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:6px 0 2px;
  font-size:11.5px; font-weight:700; color:color-mix(in srgb,var(--cyan) 62%,var(--navy)); }
.flow-shift .ar{ width:13px; height:13px; flex:none; color:var(--cyan); }
.flow-shift .ln{ height:1px; flex:1; background:linear-gradient(90deg,var(--cyan),transparent); }
.flow-legend{ display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:18px; }
.flow-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--ink-62); }
.flow-legend i{ width:13px; height:13px; border-radius:4px; flex:none; }
.flow-legend i.i-ai{ background:color-mix(in srgb,var(--cyan) 17%,var(--bg)); border:1.5px solid var(--cyan); }
.flow-legend i.i-hu{ background:var(--fill-2); border:1px solid var(--line); }
.flow-legend i.i-go{ background:var(--navy); }

/* ============================================================
   Contact modal
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:1000; display:none; }
.modal[data-open="1"]{ display:block; }
.modal .scrim{ position:absolute; inset:0; background:rgba(10,14,42,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s var(--ease); }
.modal[data-open="1"] .scrim{ opacity:1; }
.modal .sheet{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%) translateY(8px);
  width:min(100%,540px); max-height:92vh; overflow:auto; background:var(--bg);
  border-radius:22px 22px 0 0; padding:28px clamp(22px,5vw,34px) calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 50px -12px rgba(10,14,42,.4); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
@media (min-width:560px){ .modal .sheet{ bottom:auto; top:50%; transform:translate(-50%,calc(-50% + 8px)); border-radius:22px; } }
.modal[data-open="1"] .sheet{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:560px){ .modal[data-open="1"] .sheet{ transform:translate(-50%,-50%); } }
.modal .hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px; }
.modal .hd h3{ font-size:21px; }
.modal .hd .x{ appearance:none; border:none; background:var(--fill-2); color:var(--ink-62);
  width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer; flex:none; line-height:1; }
.modal .hd .x:hover{ background:var(--line); }
.modal .sub{ font-size:13.5px; color:var(--ink-62); margin-bottom:22px; line-height:1.7; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:12.5px; font-weight:700; color:var(--ink-78); letter-spacing:.02em; }
.field label .req{ color:var(--cyan); margin-left:5px; }
.field label .opt{ color:var(--ink-46); margin-left:5px; font-weight:600; }
.field .hint{ font-size:11px; color:var(--ink-46); font-weight:500; letter-spacing:0; margin-top:-2px; }
.choice-group{ display:flex; flex-direction:column; gap:9px; }
.choice{ display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s;
  font-size:14.5px; color:var(--ink-78); }
.choice:hover{ border-color:color-mix(in srgb,var(--cyan) 40%, var(--line)); }
.field .choice input{ width:18px; height:18px; accent-color:var(--cyan); flex:none; cursor:pointer; margin:0; padding:0; }
.choice:has(input:checked){ border-color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 7%, var(--bg)); color:var(--ink); font-weight:600; }
.field input, .field textarea{ font-family:inherit; font-size:15px; color:var(--ink); background:var(--fill);
  border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; outline:none;
  transition:border-color .15s, background .15s; width:100%; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color:var(--cyan); background:var(--bg); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-32); }
.modal .thanks{ display:none; text-align:center; padding:26px 0 14px; }
.modal[data-done="1"] form{ display:none; }
.modal[data-done="1"] .thanks{ display:block; }
.modal .thanks .ck{ width:58px; height:58px; border-radius:50%; background:var(--cyan);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--navy); }
.modal .thanks h3{ margin-bottom:8px; }
.modal .thanks p{ font-size:14px; color:var(--ink-62); }