:root{
  --ink:#14261F; --muted:#56675E; --turf:#1B5E43; --turf-d:#0E3A2A; --turf-m:#134A35;
  --mist:#EAF3EC; --paper:#FBFDFA; --line:#CFDFD3; --pin:#F5B700; --pin-s:#FFF6D6;
  --tap:#E5322D; --tap-s:#FDECEA; --ok-s:#E3F4E8;
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic","Meiryo",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--maru);font-size:16px;line-height:1.85;font-weight:500}
img{max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance}
.step__text,.sec__lead,.hero__lead{word-break:auto-phrase;line-break:strict}
a{color:var(--turf)}
p{margin:0 0 .8em}
:focus-visible{outline:3px solid var(--pin);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px;top:8px}
.muted{color:var(--muted);font-size:.875em}

/* ---------- hero: mowed-fairway stripes ---------- */
.hero{color:#fff;background:
  repeating-linear-gradient(100deg,var(--turf-d) 0 56px,var(--turf-m) 56px 112px);
  padding:48px 20px 56px}
.hero__in{max-width:980px;margin:0 auto}
.hero__brand{margin:0 0 6px;font-weight:700;font-size:15px;color:#BFE3CE;letter-spacing:.04em}
.hero h1{margin:0 0 14px;font-size:clamp(30px,7.4vw,52px);line-height:1.25;font-weight:900}
.hero__lead{max-width:34em;font-size:clamp(16px,2.6vw,18px);color:#EAF6EE;margin-bottom:22px}
.hero__sub{margin:12px 0 0;font-size:14px;color:#BFE3CE}

.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:999px;
  background:var(--turf);color:#fff;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--turf);cursor:pointer}
.btn:hover{background:var(--turf-d);border-color:var(--turf-d)}
.btn--ghost{background:#fff;color:var(--turf)}
.btn--ghost:hover{background:var(--mist);color:var(--turf-d)}
.btn--pin{background:var(--pin);border-color:var(--pin);color:#2A2000;font-size:18px;min-height:54px;padding:10px 30px}
.btn--pin:hover{background:#FFC928;border-color:#FFC928}

/* ---------- route (three holes) ---------- */
.route{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
.route li{position:relative}
.route a{display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;
  color:#fff;text-decoration:none;padding:6px 0}
.route .hole{grid-row:1 / span 2;position:relative;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--turf-d);
  display:grid;place-items:center;font-size:24px;font-weight:900;margin-left:2px}
.route .hole::before{content:"";position:absolute;right:9px;top:-20px;width:3px;height:24px;background:#fff;border-radius:2px}
.route .hole::after{content:"";position:absolute;right:-5px;top:-20px;border-left:16px solid var(--pin);border-top:8px solid transparent;border-bottom:8px solid transparent;transform:translateX(-3px)}
.route b{font-size:21px;line-height:1.3}
.route small{font-size:14px;color:#BFE3CE;line-height:1.4}
.route li:not(:last-child)::after{content:"";position:absolute;left:29px;top:68px;height:calc(100% - 52px);border-left:3px dotted #9CCBB0}
.route a:hover b{text-decoration:underline;text-underline-offset:4px}
@media (min-width:760px){
  .route{grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px}
  .route a{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:2px;justify-items:start;padding:0 20px 0 0}
  .route .hole{grid-row:auto;margin:0 0 10px 0}
  .route li:not(:last-child)::after{left:72px;right:18px;top:28px;height:0;width:auto;border-left:0;border-top:3px dotted #9CCBB0}
}

/* ---------- tabs ---------- */
.tabs{position:sticky;top:0;z-index:20;display:flex;gap:4px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:8px 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:6px 16px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;line-height:1.7}
.tabs a:hover{background:var(--mist)}
.tabs a[aria-current="true"]{background:var(--turf);color:#fff}
@media (min-width:760px){.tabs{justify-content:center}}

/* ---------- sections ---------- */
.sec{padding:56px 20px 40px}
.sec--mist{background:var(--mist)}
.sec--help{background:var(--turf-d);color:#fff;padding-bottom:56px}
.sec--help .sec__lead{color:#DDEFE3}
.sec--help .btn{background:var(--pin);border-color:var(--pin);color:#2A2000}
.sec--help .btn--ghost{background:transparent;color:#fff;border-color:#9CCBB0}
.sec--help .btn--ghost:hover{background:var(--turf-m)}
.sec__in{max-width:980px;margin:0 auto}
.sec__head{margin-bottom:30px}
.sec h2{display:flex;align-items:center;gap:14px;margin:0 0 10px;font-size:clamp(26px,5.6vw,36px);line-height:1.3;font-weight:900}
.sec__no{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--turf);color:#fff;font-size:.8em}
.sec--help h2{display:block}
.tag{display:inline-block;margin:0 0 10px;padding:0 14px;border-radius:999px;background:var(--pin);color:#2A2000;font-weight:700;font-size:14px;line-height:1.9}
.tag--again{background:var(--turf);color:#fff}
.sec__lead{max-width:38em;margin:0;color:var(--muted)}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:40px}
.step:not(:last-child)::before{content:"";position:absolute;left:21px;top:50px;bottom:6px;border-left:3px dotted #9FBFAB}
.badge{width:44px;height:44px;border-radius:50%;background:var(--turf);color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;line-height:1}
.sec--mist .badge{background:var(--turf-d)}
.step__title{margin:4px 0 10px;font-size:clamp(19px,4.6vw,23px);line-height:1.5;font-weight:900}
.step__text{max-width:36em}
.step__figs{margin-top:16px}
@media (min-width:860px){
  .step{column-gap:24px}
  .step__main{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:44px;align-items:start}
  .step__title{margin-top:6px}
  .step__figs{margin-top:0}
  .step--wide .step__main{grid-template-columns:1fr}
  .step--wide .step__figs{margin-top:18px}
}

.ui{display:inline-block;padding:0 .55em;margin:0 .1em;background:#fff;border:1px solid var(--line);border-bottom-width:3px;border-radius:8px;font-weight:700;line-height:1.55;white-space:nowrap}
.sec--mist .ui{border-color:#B7CFBF}
.req{display:inline-block;padding:0 .5em;margin:0 .2em;background:#C62828;color:#fff;border-radius:4px;font-size:.78em;font-weight:700;line-height:1.7;vertical-align:.08em}
.url{word-break:break-all;font-size:13px;color:var(--muted);margin:2px 0 12px}
.textlink{font-weight:700}

.note{margin:14px 0 0;padding:12px 16px;border-left:5px solid var(--pin);background:var(--pin-s);border-radius:0 10px 10px 0}
.note p{margin:0}
.note--warn{border-left-color:var(--tap);background:var(--tap-s)}
.note--ok{border-left-color:var(--turf);background:var(--ok-s)}
.note strong{font-weight:900}

/* ---------- screenshots + tap marks ---------- */
.shot{margin:0;width:100%;max-width:300px}
.shot__frame{position:relative;border:1px solid #9FB5A8;border-radius:16px;overflow:hidden;background:#fff;line-height:0}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center;line-height:1.6}
.pair{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:520px){.pair{grid-template-columns:repeat(2,minmax(0,280px))}}
.mark{position:absolute;border:3px solid var(--tap);border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.mark--oval{border-radius:50%}
.mark--soft{border-width:2px;background:rgba(229,50,45,.09);border-radius:10px}
.mark--skip{border:2px dashed #3E5B6B;background:rgba(255,255,255,.35);box-shadow:none;border-radius:10px}
.mark--skip::after{content:attr(data-label);position:absolute;right:8px;top:-12px;background:#3E5B6B;color:#fff;font-size:12px;font-weight:700;line-height:1.7;padding:0 10px;border-radius:999px;white-space:nowrap}
.mark--arrow{border:0;box-shadow:none;border-radius:0;opacity:.88}
.mark--arrow svg{display:block;width:100%;height:100%;fill:var(--tap);stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}

/* ---------- facts + done ---------- */
.facts{margin:0 0 40px;padding:20px 22px 8px;background:var(--mist);border-radius:18px}
.facts h3{margin:0 0 6px;font-size:20px;font-weight:900}
.facts dl{margin:0;display:grid;grid-template-columns:1fr}
.facts dl>div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.facts dl>div:first-child{border-top:0}
.facts dt{font-weight:700;color:var(--turf)}
.facts dd{margin:0}
@media (max-width:480px){.facts dl>div{grid-template-columns:1fr;gap:0}}

.done{margin:8px 0 0 60px;padding:22px 24px;border-radius:18px;background:var(--turf);color:#fff}
.done h3{margin:0 0 6px;font-size:22px;font-weight:900}
.done p{margin:0}
@media (max-width:859px){.done{margin-left:0}}

.foot{padding:28px 20px 40px;text-align:center;font-size:14px;background:var(--paper)}
.foot p{margin:0 0 4px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}