/* 功能說明 (/moto/guide), under the gd- prefix so it can't meet site.css. Colours and fonts are the site's variables. */
.gd{--deep:#13291f;font-family:var(--body);color:var(--text);font-size:15px;line-height:1.75;background:var(--cream)}
.gd *{box-sizing:border-box}
.gd a{color:inherit}
.gd-wrap{max-width:1080px;margin-inline:auto;padding-inline:16px}
.gd-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gold-text);display:block;margin-bottom:10px}
.gd h1,.gd h2,.gd h3{font-family:var(--serif);color:var(--ink);font-weight:600;text-wrap:balance;margin:0}
.gd p{margin:0}
/* hero */
.gd-hero{background:radial-gradient(ellipse 80% 70% at 50% 100%,#244c39 0%,var(--forest) 60%);color:var(--on-forest);padding-block:64px 56px}
.gd-hero .gd-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:860px){.gd-hero .gd-wrap{grid-template-columns:1fr}}
.gd-hero h1{color:#fff;font-size:clamp(30px,4.6vw,46px);line-height:1.3}
.gd-hero h1 em{font-style:normal;color:var(--gold-bright)}
.gd-hero p{margin-top:16px;color:var(--on-forest-2);max-width:34em}
.gd-hero .gd-map{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gd-hero .gd-map a{text-decoration:none;color:var(--on-forest);border:1px solid var(--panel-dark-line);background:var(--panel-dark);border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.gd-hero .gd-map a:hover{border-color:var(--gold)}
.gd-hero .gd-map b{font-family:var(--serif);font-size:18px;color:#fff}
.gd-hero .gd-map small{font-size:12px;color:var(--on-forest-3)}
.gd-hero .gd-map span{font-family:var(--mono);font-size:10.5px;color:var(--gold-bright);letter-spacing:.1em}
/* how to open */
.gd-open{padding-block:40px;border-bottom:1px solid var(--border)}
.gd-open .gd-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:760px){.gd-open .gd-wrap{grid-template-columns:1fr}}
.gd-open div{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.gd-open b{font-family:var(--serif);font-size:16px;color:var(--ink)}
/* groups */
.gd-group{padding-block:72px 24px}
.gd-group.gd-dark{background:var(--forest);color:var(--on-forest)}
.gd-group.gd-dark h2,.gd-group.gd-dark h3{color:#fff}
.gd-group.gd-dark .gd-eyebrow{color:var(--gold-bright)}
.gd-group-h{display:grid;gap:8px;margin-bottom:40px;max-width:720px}
.gd-group-h h2{font-size:clamp(26px,3.6vw,36px);line-height:1.3}
.gd-group-h p{color:var(--muted)}
.gd-group.gd-dark .gd-group-h p{color:var(--on-forest-3)}
.gd-feat{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start;padding-block:36px;border-top:1px solid var(--border)}
.gd-group.gd-dark .gd-feat{border-color:var(--panel-dark-line)}
@media (max-width:760px){.gd-feat{grid-template-columns:1fr}.gd-feat .gd-demo{order:-1}}
.gd-feat .gd-txt{display:grid;gap:12px;align-content:start}
.gd-feat .gd-where{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold-text)}
.gd-group.gd-dark .gd-feat .gd-where{color:var(--gold-bright)}
.gd-feat h3{font-size:24px;line-height:1.3}
.gd-feat h3 small{display:block;font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}
.gd-group.gd-dark .gd-feat h3 small{color:var(--on-forest-3)}
.gd-feat .gd-desc{font-size:14.5px;max-width:60ch}
.gd-group.gd-dark .gd-feat .gd-desc{color:var(--on-forest-2)}
.gd-steps{display:grid;gap:0;margin-top:6px;border-top:1px solid var(--border)}
.gd-group.gd-dark .gd-steps{border-color:var(--panel-dark-line)}
.gd-steps button{all:unset;cursor:pointer;display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline;padding:9px 6px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text)}
.gd-group.gd-dark .gd-steps button{border-color:var(--panel-dark-line);color:var(--on-forest-2)}
.gd-steps button b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--muted)}
.gd-steps button.gd-on{color:var(--ink);background:rgba(199,154,60,.10)}
.gd-group.gd-dark .gd-steps button.gd-on{color:#fff;background:rgba(250,244,232,.08)}
.gd-steps button.gd-on b{color:var(--gold-text)}
.gd-group.gd-dark .gd-steps button.gd-on b{color:var(--gold-bright)}
.gd-steps button:hover{background:rgba(199,154,60,.07)}
.gd-feat .gd-demo{display:grid;gap:10px;justify-items:center}
.gd-feat .gd-demo .mxd{max-width:320px}
.gd-pc{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
.gd-group.gd-dark .gd-pc{color:var(--on-forest-3)}
.gd-pc button{all:unset;cursor:pointer;border:1px solid var(--border-strong);border-radius:4px;padding:4px 10px;color:var(--ink);font-family:var(--mono);font-size:11px}
.gd-group.gd-dark .gd-pc button{border-color:var(--panel-dark-line);color:#fff}
.gd-pc .gd-bar{width:110px;height:3px;background:var(--surface-deep);border-radius:2px;overflow:hidden}
.gd-group.gd-dark .gd-pc .gd-bar{background:rgba(0,0,0,.25)}
.gd-pc .gd-bar i{display:block;height:100%;width:0;background:var(--gold)}
.gd-demo-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
/* listing demo embed: reuse existing block */
.gd-listing-embed .mxl{max-width:320px}
.gd-listing-embed .mxl-cap{display:none}
/* faq-ish footer cta */
.gd-cta-sec{background:var(--deep,#13291f);color:var(--on-forest);padding-block:56px;text-align:center}
.gd-cta-sec h2{color:#fff;font-size:clamp(24px,3.4vw,32px)}
.gd-cta-sec p{margin:12px auto 22px;color:var(--on-forest-2);max-width:40em}
.gd-cta-sec .gd-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* call to action: the site's buttons */
.gd-cta-sec .gd-row .btn{min-width:180px}
.gd-feat{scroll-margin-top:96px}
.gd-group{scroll-margin-top:72px}
/* 標示: which features come with a level, which with a paid plan. 依等級 sage · 進階 gold outline · 專業 forest.
   Small gold text on cream uses --gold-deep (AA). */
.gd{--gold-deep:#7e5e1c}
.gd-marks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;line-height:1.7;max-width:60ch}
.gd-marks li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:baseline}
.gd-mark{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:20px;padding:0 8px;border-radius:999px;white-space:nowrap;text-align:center;border:1px solid transparent}
.gd-m-all{color:var(--muted);border-color:var(--border-strong)}
.gd-m-lvl{color:var(--pine);border-color:var(--sage)}
.gd-m-adv{color:var(--gold-deep);border-color:var(--gold)}
.gd-m-pro{color:var(--cream);background:var(--forest);border-color:var(--forest)}
.gd-group.gd-dark .gd-marks{color:var(--on-forest-2)}
.gd-group.gd-dark .gd-m-all{color:var(--on-forest-2);border-color:var(--panel-dark-line)}
.gd-group.gd-dark .gd-m-lvl{color:var(--mint);border-color:var(--sage)}
.gd-group.gd-dark .gd-m-adv{color:var(--gold-bright);border-color:var(--gold)}
.gd-group.gd-dark .gd-m-pro{color:var(--forest);background:var(--cream);border-color:var(--cream)}
.gd-legend{padding-block:40px;border-bottom:1px solid var(--border);scroll-margin-top:72px}
.gd-legend h2{font-size:20px;line-height:1.4}
.gd-legend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
@media (max-width:760px){.gd-legend-grid{grid-template-columns:1fr}}
.gd-legend-grid p{margin-top:8px;font-size:14px;color:var(--muted)}
.gd-legend-grid b{color:var(--ink);font-weight:600}
.gd-legend-more{margin-top:20px;font-size:13.5px;color:var(--gold-deep)}
/* 交車證明怎麼算分 */
.gd-rule{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--border-strong);border-radius:12px;font-size:13.5px;line-height:1.7;max-width:64.4ch;scroll-margin-top:88px}
.gd-rule h4{font-family:var(--body);font-weight:600;font-size:15px;line-height:1.4;margin:0}
.gd-rule p{margin:0}
.gd-rule ul{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--border)}
.gd-rule li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border)}
.gd-rule li b{font-weight:500}
.gd-rule li span{font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--gold-deep)}
.gd-group.gd-dark .gd-rule{border-color:var(--panel-dark-line);color:var(--on-forest-2)}
.gd-group.gd-dark .gd-rule h4{color:var(--on-forest)}
.gd-group.gd-dark .gd-rule ul,.gd-group.gd-dark .gd-rule li{border-color:var(--panel-dark-line)}
.gd-group.gd-dark .gd-rule li span{color:var(--gold-bright)}
.gd-desc a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.gd-group.gd-dark .gd-desc a{color:var(--gold-bright)}

/* 即將推出: named here, not a feature yet — no animation, no steps */
.gd-soon{margin-top:8px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px 48px;border:1px dashed var(--gold);border-radius:16px;padding:28px 32px;background:#fff}
.gd-soon-k{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold-text)}
.gd-soon h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--forest);display:grid;gap:2px;margin-bottom:10px}
.gd-soon h3 small{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted)}
.gd-soon p{margin-top:10px;font-size:14px;line-height:1.85;color:var(--text)}
.gd-soon p.gd-soon-n{font-size:12px;color:var(--muted)}
@media (max-width:600px){.gd-soon{padding:24px 20px}}
@media (min-width:720px){.gd-soon{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.gd-soon{grid-template-columns:repeat(3,minmax(0,1fr))}}