/* よそおいマーケティング顧問 LP／サンクスページ共通。YOSOOI Design System のトークンを使う。
   PCは「左＝固定／中央＝本編／右＝目次」の3カラム、スマホは本編だけ。 */
:root{
  --green:#22D05E; --green-deep:#1AAE4D; --green-ink:#062b14; --green-wash:#E9FAEF;
  --beige:#F6E6D6; --blond:#D8B27A;
  --ink:#111; --paper:#fff; --bg:#fafaf8; --line:#ECECE8; --muted:#6b6b66; --danger:#C62828;
  --display:'Zen Maru Gothic',system-ui,sans-serif;
  --body:'Noto Sans JP',system-ui,sans-serif;
  --r:20px; --col:480px; --gut:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:68px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.85; letter-spacing:.01em; -webkit-font-smoothing:antialiased}
::selection{background:var(--green); color:var(--green-ink)}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:900; line-height:1.45; margin:0}
p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}

/* 3カラム */
.col{position:relative; width:100%; max-width:var(--col); margin-inline:auto; background:var(--paper); overflow-x:clip}
.side{display:none}
@media (min-width:1024px){
  body{background-color:var(--bg); background-image:radial-gradient(var(--line) 1.2px,transparent 1.2px); background-size:22px 22px}
  .col{box-shadow:0 0 0 1.5px var(--line), 0 30px 60px -40px rgba(0,0,0,.25)}
  .side{display:flex; position:fixed; top:0; bottom:0; width:calc((100vw - var(--col))/2); flex-direction:column; justify-content:center; padding:24px clamp(18px,3vw,48px)}
  .side-l{left:0; align-items:center; text-align:center; gap:18px}
  .side-r{right:0; align-items:flex-start}
}
.side .logo b{font-size:clamp(24px,2.4vw,34px)}
.side-copy{font-family:var(--display); font-weight:700; font-size:clamp(14px,1.25vw,17px); line-height:1.7}
.side-copy em{font-style:normal; background:linear-gradient(transparent 62%, var(--green) 62%)}
.side-chara{position:relative; display:grid; justify-items:center}
.side-chara img{position:relative; height:clamp(150px,34vh,300px); width:auto}
.side-chara::before{content:""; position:absolute; bottom:-10px; left:50%; width:230px; max-width:100%; height:36px; transform:translateX(-50%); background:var(--green); border-radius:50%}
.side .btn{width:100%; max-width:280px; margin-top:10px}
.idx-title{font-family:var(--display); font-weight:900; font-size:26px; letter-spacing:.06em; margin-bottom:14px}
.idx{display:grid; gap:2px}
.idx a{display:grid; grid-template-columns:26px minmax(0,1fr); gap:6px; align-items:baseline; padding:7px 10px; border-radius:12px; text-decoration:none; font-size:13.5px; font-weight:500; color:var(--muted); line-height:1.5}
.idx a span{font-family:var(--display); font-weight:700; font-size:11px; color:var(--muted)}
.idx a:hover{color:var(--ink)}
.idx a.on{background:var(--green); color:var(--green-ink); font-weight:700}
.idx a.on span{color:var(--green-ink)}

/* 部品 */
.logo{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; flex-wrap:wrap}
.logo b{font-family:var(--display); font-weight:900; font-size:19px; letter-spacing:.02em}
.logo span{font-family:var(--display); font-weight:700; font-size:9.5px; letter-spacing:.18em; color:var(--muted)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--display); font-weight:700; font-size:15px; line-height:1.4; padding:15px 24px; border-radius:999px; border:1.5px solid transparent; text-decoration:none; cursor:pointer; transition:transform .15s ease, background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-green{background:var(--green); color:var(--green-ink); border-color:var(--green)}
.btn-green:hover{background:var(--green-deep); border-color:var(--green-deep)}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-wide{width:100%; font-size:17px; padding:18px 20px}
.btn .arr{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--green-ink); color:var(--green); font-size:13px; flex:none}
.btn-dark .arr{background:var(--green); color:var(--green-ink)}
.kicker{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); display:inline-flex; gap:8px; align-items:center}
.kicker i{width:7px; height:7px; border-radius:50%; background:var(--green)}
.mark{background:linear-gradient(transparent 62%, var(--green) 62%, var(--green) 94%, transparent 94%)}
.sec{padding:clamp(56px,14vw,72px) var(--gut)}
.sec-head{display:grid; gap:12px; margin-bottom:28px; justify-items:start}
.sec-head h2{font-size:clamp(1.5rem,6.4vw,1.8rem)}
.sec-head p{color:var(--muted); font-size:15px}
.tint{background:var(--bg)}
.fine{font-size:12px; color:var(--muted); line-height:1.7}

/* ヘッダー */
.hd{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px var(--gut); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.hd .btn{padding:8px 16px; font-size:13px; white-space:nowrap}

/* 流れる帯 */
.mq{overflow:hidden; white-space:nowrap}
.mq > div{display:inline-flex; animation:mq 34s linear infinite}
.mq span{flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-tags{padding:12px 0; border-bottom:1px solid var(--line)}
.mq-tags span{font-size:13px; color:#555; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 13px; margin-right:8px}
.mq-big{background:var(--green); color:var(--green-ink); padding:11px 0}
.mq-big > div{animation-duration:24s}
.mq-big span{font-family:var(--display); font-weight:900; font-size:17px; letter-spacing:.06em; margin-right:30px}
.mq-big span::after{content:"●"; font-size:8px; vertical-align:.3em; margin-left:30px}

/* ヒーロー */
.fv{padding:26px var(--gut) 40px; overflow:hidden}
.call{font-family:var(--display); font-weight:700; font-size:clamp(13px,3.7vw,15px); text-align:center}
.fv h1{margin-top:12px; font-size:min(7.6vw,36px); line-height:1.42; text-align:center}
.fv h1 .big{display:block; font-size:min(11.8vw,56px); line-height:1.32; white-space:nowrap}
.fv-stage{position:relative; height:312px; margin-top:12px}
.fv-chara{position:absolute; left:22px; bottom:12px; display:grid; justify-items:center}
.fv-chara::before{content:""; position:absolute; bottom:-12px; left:50%; width:180px; height:40px; transform:translateX(-50%); background:var(--green); border-radius:50%}
.fv-chara img{position:relative; height:290px; width:auto; filter:drop-shadow(0 14px 14px rgba(0,0,0,.12))}
.tag{position:absolute; top:42px; right:0; width:min(232px,58%); transform:rotate(3deg); transform-origin:20px 0; animation:sway 6s ease-in-out infinite}
.tag::before{content:""; position:absolute; top:-30px; left:24px; width:1.5px; height:34px; background:var(--blond)}
.tag-b{position:relative; background:var(--paper); border:1.5px solid var(--ink); border-radius:14px; padding:20px 14px 12px}
.tag-b::before{content:""; position:absolute; top:9px; left:17px; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--ink); background:var(--bg)}
.tag .l{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.18em; color:var(--muted); text-align:right; line-height:1}
.tag .p{font-family:var(--display); font-weight:900; font-size:clamp(23px,6.4vw,27px); line-height:1.2; margin-top:8px; font-variant-numeric:tabular-nums}
.tag .p small{display:block; font-size:11px; font-weight:700; color:var(--muted)}
.tag ul{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:12px; color:#444; line-height:1.8}
@keyframes sway{0%,100%{transform:rotate(3deg)}50%{transform:rotate(.5deg)}}
.band{display:grid; justify-items:center; gap:6px; margin-block:12px 18px; text-align:center}
.band span{background:var(--ink); color:#fff; font-family:var(--display); font-weight:700; font-size:clamp(14px,3.9vw,16px); line-height:1.4; padding:5px 12px}
.band b{color:var(--green)}
.under{margin-top:10px; font-size:13px; color:var(--muted); text-align:center}

/* WHO */
.prof{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.prof img{width:72px; height:72px; border-radius:50%}
.prof b{display:block; font-family:var(--display); font-weight:900; font-size:21px; line-height:1.3}
.prof span{font-size:13px; color:var(--muted)}
.roles{display:grid; gap:12px}
.role{display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:10px; align-items:end; border:1.5px solid var(--line); border-radius:var(--r); padding:18px 16px 16px 20px; background:var(--paper)}
.role .y{font-family:var(--display); font-weight:700; font-size:12px; color:var(--green-deep)}
.role h3{font-size:18px}
.role p{font-size:14px; color:#555; margin-top:4px; line-height:1.75}
.role img{height:104px; width:auto; justify-self:end}

/* WHY・約束 */
.why{background:var(--ink); color:#fff; padding:56px var(--gut); text-align:center}
.why .kicker{color:var(--green)}
.why h2{font-size:clamp(1.5rem,6.6vw,1.9rem); margin-top:12px}
.why h2 em{font-style:normal; color:var(--green)}
.why p{color:#c9c9c4; margin-top:12px; font-size:15px}
.pm{padding:52px var(--gut) 44px; border-bottom:1.5px dashed var(--line)}
.pm-no{display:inline-flex; align-items:baseline; gap:6px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; color:var(--green-ink); background:var(--green); border-radius:999px; padding:3px 13px}
.pm-no b{font-size:16px; font-weight:900; letter-spacing:.02em}
.pm h3{font-size:clamp(1.3rem,5.6vw,1.5rem); margin-top:12px; text-wrap:balance}
.pm .so{display:block; font-size:.78em; color:var(--muted); font-weight:700; margin-top:2px}
.pm p.t{margin-top:16px; font-size:15px; color:#444}

/* 小さな画面の見本（※イメージ） */
.ui{margin-top:18px; border:1.5px solid var(--ink); border-radius:16px; background:var(--paper); overflow:hidden; font-size:13.5px; line-height:1.65}
.ui-h{display:flex; justify-content:space-between; gap:8px; align-items:center; padding:7px 14px; background:var(--green-wash); border-bottom:1.5px solid var(--ink); font-family:var(--display); font-weight:700; font-size:12.5px}
.ui-h small{font-size:10.5px; font-weight:500; color:var(--muted); white-space:nowrap}
.ui-b{padding:12px 14px; display:grid; gap:8px}
.ui-note{display:block; font-size:11px; color:var(--muted); margin-top:6px; text-align:right}
.bar{display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:10px; align-items:center}
.bar i{display:block; height:9px; border-radius:99px; background:var(--line); position:relative; overflow:hidden}
.bar i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--green); border-radius:99px}
.minutes dt{font-family:var(--display); font-weight:700; font-size:11.5px; color:var(--green-deep)}
.minutes dd + dt{margin-top:8px}
.todo li{display:flex; gap:8px; align-items:baseline}
.todo li::before{content:""; flex:none; width:12px; height:12px; border:1.5px solid var(--ink); border-radius:3px; transform:translateY(1.5px)}
.chat{display:grid; gap:8px}
.bub{max-width:84%; padding:8px 12px; border-radius:14px; background:var(--bg); border:1px solid var(--line)}
.bub.me{justify-self:end; background:var(--green); border-color:var(--green); color:var(--green-ink)}
.bub small{display:block; font-size:10px; opacity:.7}
.cmp{width:100%; border-collapse:collapse; font-size:13px}
.cmp th,.cmp td{padding:6px 4px; border-bottom:1px solid var(--line); text-align:center; font-weight:500}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{font-family:var(--display); font-weight:700; font-size:12px}
.cmp tr:last-child td{border-bottom:0}
.cmp .pick{background:var(--green-wash); font-weight:700}
.sk li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:6px; align-items:baseline; padding-block:4px; border-bottom:1px solid var(--line)}
.sk li:last-child{border-bottom:0}
.sk b{font-family:var(--display); color:var(--green-deep)}
.sk em{font-style:normal; font-size:11px; color:var(--muted); white-space:nowrap}

/* 中間CTA */
.must{background:var(--green); color:var(--green-ink); padding:56px var(--gut)}
.must .kicker{color:var(--green-ink)}
.must .kicker i{background:var(--green-ink)}
.must h2{font-size:clamp(1.5rem,6.4vw,1.8rem); margin-top:10px}
.checks{margin-top:18px; display:grid; gap:8px}
.checks li{text-wrap:pretty; display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.5); border-radius:14px; padding:11px 14px; font-weight:500; font-size:15px; line-height:1.6}
.checks li::before{content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; background:var(--green-ink); color:var(--green); display:grid; place-items:center; font-size:12px; margin-top:1px}
.must-3{display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:12px; align-items:end; margin-block:30px 20px}
.must-3 h3{font-size:clamp(1.3rem,5.6vw,1.5rem)}
.must-3 p{font-size:14.5px; margin-top:6px; line-height:1.75}
.must-3 img{height:150px; width:auto; justify-self:end}

/* 実績 */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px}
.stat{border:1.5px solid var(--line); border-radius:16px; padding:12px 6px; text-align:center; background:var(--paper)}
.stat b{display:block; font-family:var(--display); font-weight:900; font-size:clamp(20px,5.8vw,24px); line-height:1.25; white-space:nowrap}
.stat b small{font-size:.55em}
.stat span{font-size:11.5px; color:var(--muted); line-height:1.4; display:block; margin-top:2px}
.works li{display:grid; gap:0; padding-block:12px; border-top:1px solid var(--line)}
.works b{font-family:var(--display); font-weight:700; font-size:15px; line-height:1.5}
.works span{font-size:13px; color:var(--muted)}
.more{display:inline-block; margin-top:14px; font-size:14px; font-weight:500}

/* 比較 */
.opts{display:grid; gap:10px}
.opt{border:1.5px solid var(--line); border-radius:16px; padding:14px 16px; background:var(--paper)}
.opt h3{font-size:16px}
.opt .c{font-family:var(--display); font-weight:700; font-size:13px; color:var(--green-deep)}
.opt p{font-size:14px; color:#555; line-height:1.7}
.opt.ours{background:var(--green-wash); border-color:var(--green)}
.opt.ours p{color:var(--green-ink)}

/* 提供内容 */
.svc{display:grid; gap:12px}
.svc-c{border:1.5px solid var(--line); border-radius:var(--r); padding:20px; background:var(--paper)}
.svc-c .b{display:inline-block; font-family:var(--display); font-weight:700; font-size:12px; background:var(--green-wash); color:var(--green-ink); border-radius:999px; padding:2px 12px}
.svc-c h3{font-size:18px; margin-top:6px}
.svc-c p{font-size:14.5px; color:#555; margin-top:4px; line-height:1.75}
.svc-c ul{margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.8}
.svc-c ul li::before{content:"・"}
.svc-h{font-family:var(--display); font-weight:900; font-size:17px; margin-block:30px 12px}
.skills li{padding-block:12px; border-top:1px solid var(--line)}
.skills b{font-family:var(--display); font-weight:700; font-size:15.5px; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.skills b em{font-style:normal; font-size:11px; font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:0 8px; white-space:nowrap}
.skills span{font-size:14px; color:#555; display:block; line-height:1.7}
.keep{margin-top:12px; padding:12px 16px; border-radius:14px; background:var(--beige); font-size:14px}

/* 流れ */
.steps{position:relative; display:grid; gap:0}
.steps li{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding-bottom:24px}
.steps li:not(:last-child)::before{content:""; position:absolute; left:21px; top:8px; bottom:-8px; width:2px; background:var(--green)}
.steps .n{position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--paper); border:2px solid var(--green); font-family:var(--display); font-weight:900; font-size:14px}
.steps li.pre .n{background:var(--green); color:var(--green-ink)}
.steps h3{font-size:16.5px; line-height:1.5}
.steps .w{font-family:var(--display); font-weight:700; font-size:12px; color:var(--green-deep); line-height:1.4}
.steps p{font-size:14px; color:#555; line-height:1.7; margin-top:2px}
.steps li > div{padding-top:2px}

/* 料金 */
.price{background:var(--ink); color:#fff}
.price .kicker{color:var(--green)}
.price .amount{font-family:var(--display); font-weight:900; font-size:clamp(2.3rem,10.5vw,3rem); line-height:1.1; font-variant-numeric:tabular-nums}
.price .amount small{font-size:1rem; font-weight:700; color:#b9b9b4; margin-left:6px}
.price dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 18px; margin-block:22px; font-size:14.5px; line-height:1.7}
.price dt{color:#b9b9b4; white-space:nowrap}
.price h3{font-size:16px; margin-top:30px}
.pop{display:flex; justify-content:space-between; gap:12px; padding-block:10px; border-top:1px solid #2c2c2c; font-size:14px; line-height:1.6}
.pop .n{white-space:nowrap; color:#b9b9b4}

/* FAQ */
.faq{display:grid; gap:10px}
.faq details{background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:0 18px}
.faq summary{cursor:pointer; list-style:none; padding-block:15px; font-family:var(--display); font-weight:700; font-size:15px; line-height:1.55; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--green-deep); font-size:1.3rem; line-height:1.15}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:16px; color:#555; font-size:14.5px}

/* フォーム */
.close{background:var(--green); color:var(--green-ink); padding:56px var(--gut)}
.close .kicker{color:var(--green-ink)}
.close .kicker i{background:var(--green-ink)}
.close h2{font-size:clamp(1.65rem,7.2vw,2rem); margin-top:10px}
.close > p{margin-top:10px; font-size:15px}
.panel{position:relative; background:var(--paper); color:var(--ink); border-radius:var(--r); padding:22px 18px; display:grid; gap:15px; margin-top:22px; scroll-margin-top:76px; box-shadow:0 24px 48px -32px rgba(6,43,20,.6)}
.panel h3{font-size:1.15rem}
.panel > p{color:#555; font-size:14.5px}
.field{display:grid; gap:5px; min-width:0; border:0; margin:0; padding:0}
.field > span, .field legend{font-size:14px; font-weight:700; padding:0}
.field legend{margin-bottom:8px}
.req{font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--ink); border-radius:999px; padding:1px 8px; margin-left:8px; vertical-align:.1em}
.panel input:not([type=checkbox]), .panel select, .panel textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; width:100%}
.panel textarea{resize:vertical; line-height:1.7}
.panel input:focus, .panel select:focus, .panel textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-wash)}
.panel [aria-invalid=true]{border-color:var(--danger)}
.picks{display:flex; flex-wrap:wrap; gap:8px}
.picks label{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13.5px; cursor:pointer; background:var(--paper); line-height:1.5}
.picks label:has(input:checked){border-color:var(--green); background:var(--green-wash)}
.panel input[type=checkbox]{accent-color:var(--green-deep); width:16px; height:16px; margin:0}
.agree{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.65}
.agree input{margin-top:.25em !important; flex:none}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-error{color:var(--danger); font-weight:700; font-size:14px}
.panel .btn:disabled{opacity:.55; cursor:wait; transform:none}
.addr{font-weight:700; user-select:all; word-break:break-all}
.alt{margin-top:18px; text-align:center; font-size:13.5px; text-wrap:balance}

/* サンクス */
.tx-hero{padding:34px var(--gut) 8px; text-align:center}
.tx-hero h1{font-size:min(7.8vw,36px); line-height:1.45}
.tx-hero p{margin-top:10px; font-size:15px; color:#444}
.tx-chara{position:relative; display:grid; justify-items:center; margin-top:20px}
.tx-chara::before{content:""; position:absolute; bottom:-8px; left:50%; width:230px; height:36px; transform:translateX(-50%); background:var(--green); border-radius:50%}
.tx-chara img{position:relative; height:200px; width:auto}
.tx-cta{background:var(--ink); color:#fff; padding:28px var(--gut); text-align:center; margin-top:26px}
.tx-cta h2{font-size:clamp(1.15rem,5.2vw,1.35rem); margin-bottom:14px}
.tx-cta p{margin-top:10px; font-size:12.5px; color:#b9b9b4}
.got{display:grid; gap:10px; counter-reset:g}
.got li{display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; font-size:14.5px; line-height:1.65}
.got li:last-child{border-bottom:0; padding-bottom:0}
.got li::before{counter-increment:g; content:counter(g); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--green); color:var(--green-ink); font-family:var(--display); font-weight:900}
.got b{display:block; font-family:var(--display); font-size:15.5px}
.msg{padding:44px var(--gut); background:var(--bg)}
.msg p{font-size:15px; margin-top:10px}
.msg b{font-family:var(--display); font-weight:900; font-size:clamp(1.3rem,5.6vw,1.5rem); line-height:1.5; display:block}
.nx{display:grid; gap:4px}
.nx li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; align-items:center; font-size:13.5px; font-weight:500; color:var(--muted); line-height:1.45; padding:7px 10px; border-radius:12px}
.nx i{font-style:normal; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); font-family:var(--display); font-weight:700; font-size:11px}
.nx small{display:block; font-family:var(--display); font-size:11px; font-weight:700}
.nx .done{color:var(--ink)}
.nx .done i{background:var(--ink); color:#fff; border-color:var(--ink)}
.nx .now{background:var(--green); color:var(--green-ink); font-weight:700}
.nx .now i{background:var(--green-ink); color:var(--green); border-color:var(--green-ink)}

footer{padding:30px var(--gut) 40px; font-size:12.5px; color:var(--muted); background:var(--paper); display:grid; gap:6px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:360px){:root{--gut:16px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tag,.mq > div{animation:none}
  .btn{transition:none}
}