@font-face{font-family:"Heebo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/roc/fonts/heebo-normal-400-800-latin-ext.dd3af41d4e.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Heebo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/roc/fonts/heebo-normal-400-800-latin.50dae2e12d.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(/roc/fonts/kanit-normal-400-latin-ext.0bf36bd27a.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(/roc/fonts/kanit-normal-400-latin.1e856b3a04.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url(/roc/fonts/kanit-normal-600-latin-ext.b069fcda82.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url(/roc/fonts/kanit-normal-600-latin.c3c4f89f25.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(/roc/fonts/kanit-normal-700-latin-ext.4a84b9c832.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(/roc/fonts/kanit-normal-700-latin.a44817a3dc.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root {
  --bg: #E7EAEC; --slab: #F8F9FA; --slab2: #EEF0F2; --stone: #D3D8DD; --ink: #1C242B; --mute: #56616B;
  --dark: #2F3942; --dark-ink: #F2F4F6; --dark-mute: #C3CBD2; --forest: #2C5A42; --forest-2: #3E7A5B; --forest-l: #E1EBE4;
  --cta: #2B4A69; --cta-h: #1F3A55; --cta-ink: #FFFFFF; --line: #CBD1D7; --closed: #8C969F;
  --sh: 0 24px 48px -30px rgba(18, 28, 38, .55), 0 3px 8px -3px rgba(18, 28, 38, .14);
  --sh-s: 0 10px 22px -16px rgba(18, 28, 38, .5), 0 1px 3px rgba(18, 28, 38, .1);
  --emb: 0 1px 0 rgba(255, 255, 255, .7);
  --r: 6px; --head: 'Kanit', 'Arial Narrow', sans-serif; --body: 'Heebo', 'Helvetica Neue', Arial, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .33 0 0 0 0 .36 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13171A; --slab: #1D2327; --slab2: #232A2F; --stone: #333C43; --ink: #E6EAED; --mute: #A9B3BB;
    --dark: #0E1215; --dark-ink: #EEF1F3; --dark-mute: #B4BEC6; --forest: #7DBB98; --forest-2: #8FCBA8; --forest-l: #1F2D26;
    --cta: #3A6690; --cta-h: #4776A2; --line: #343D44; --closed: #6E7881; --emb: 0 -1px 0 rgba(0, 0, 0, .6);
    --sh: 0 24px 48px -30px rgba(0, 0, 0, .8), 0 3px 8px -3px rgba(0, 0, 0, .4); --sh-s: 0 10px 22px -16px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13171A; --slab: #1D2327; --slab2: #232A2F; --stone: #333C43; --ink: #E6EAED; --mute: #A9B3BB;
  --dark: #0E1215; --dark-ink: #EEF1F3; --dark-mute: #B4BEC6; --forest: #7DBB98; --forest-2: #8FCBA8; --forest-l: #1F2D26;
  --cta: #3A6690; --cta-h: #4776A2; --line: #343D44; --closed: #6E7881; --emb: 0 -1px 0 rgba(0, 0, 0, .6);
  --sh: 0 24px 48px -30px rgba(0, 0, 0, .8), 0 3px 8px -3px rgba(0, 0, 0, .4); --sh-s: 0 10px 22px -16px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.62 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.12; letter-spacing: -.005em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem); }
p { margin: 0 0 .9em; }
:focus-visible { outline: 3px solid var(--forest-2); outline-offset: 2px; }
.grn-ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; }
.grn-mark { width: 34px; height: 34px; flex: none; fill: var(--stone); stroke: var(--ink); stroke-width: 1.6; }
.grn-mark path { fill: var(--forest); stroke: none; }
.grn-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grn-skip { position: absolute; left: -999px; top: 8px; background: var(--slab); color: var(--ink); padding: 8px 12px; z-index: 10; }
.grn-skip:focus { left: 8px; }
.grn-wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
.grn-head { position: sticky; top: 0; z-index: 5; background: var(--slab); box-shadow: var(--sh-s); }
.grn-head__in { width: min(1180px, 100% - 40px); margin: 0 auto; display: flex; align-items: center; gap: 22px; min-height: 68px; }
.grn-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.grn-logo__t { font: 700 1.28rem/1 var(--head); letter-spacing: .01em; display: flex; flex-direction: column; }
.grn-logo__t small { font: 500 .72rem/1.3 var(--body); color: var(--mute); letter-spacing: .04em; margin-top: 3px; }
.grn-nav { margin-left: auto; }
.grn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.grn-nav a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; font: 500 .92rem/1.2 var(--body); }
.grn-nav a:hover { background: var(--slab2); }
.grn-nav a[aria-current="page"] { background: var(--forest-l); color: var(--forest); box-shadow: inset 0 -2px 0 var(--forest); }
.grn-burger, .grn-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--slab2); color: var(--ink); border-radius: 6px; cursor: pointer; font-size: 1.15rem; }
.grn-burger { display: none; }
.grn-cta { display: inline-flex; align-items: center; gap: 8px; }
.grn-paid { display: inline-flex; align-items: center; gap: 8px; background: var(--cta); color: var(--cta-ink); text-decoration: none; font: 600 .98rem/1 var(--head); letter-spacing: .02em; padding: 12px 18px; border-radius: 6px; box-shadow: 0 10px 20px -14px rgba(20, 40, 60, .9), inset 0 1px 0 rgba(255, 255, 255, .16); white-space: nowrap; }
.grn-paid:hover { background: var(--cta-h); text-decoration: none; }
.grn-paid--lg { font-size: 1.1rem; padding: 16px 24px; }
.grn-ad { font: 600 .68rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; background: var(--slab); }
.grn-disc { margin: 0; text-align: center; font-size: .82rem; color: var(--mute); padding: 8px 20px; }
.grn-hero { padding: 26px 0 0; }
.grn-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.grn-stone { background: var(--slab) var(--grain); border-radius: var(--r); box-shadow: var(--sh); position: relative; min-width: 0; }
.grn-stone--band { grid-column: 1 / -1; overflow: hidden; background: var(--dark); height: clamp(260px, 30vw, 380px); }
.grn-stone--band .grn-pic figcaption { left: auto; right: 10px; bottom: auto; top: 10px; }
.grn-stone--title { grid-column: 1 / span 8; margin: -150px 0 0 28px; z-index: 1; padding: clamp(24px, 3.2vw, 42px); }
.grn-stone--pic { grid-column: 8 / span 5; overflow: hidden; background: var(--dark); }
.grn-wall--solo .grn-stone--title { grid-column: 1 / -1; margin: 0; }
.grn-hero--in .grn-stone--title { grid-column: 1 / span 7; margin: 0; }
.grn-hero--in .grn-wall--solo .grn-stone--title { grid-column: 1 / -1; }
.grn-stone--toc { grid-column: 8 / span 5; padding: 26px 28px; }
.grn-stone--toc ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 8px; }
.grn-stone--toc li { counter-increment: s; }
.grn-stone--toc a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 5px; background: var(--slab2); color: var(--ink); text-decoration: none; font: 500 1rem/1.25 var(--head); }
.grn-stone--toc a::before { content: counter(s); width: 30px; height: 30px; border-radius: 4px; background: var(--dark); color: var(--dark-ink); display: inline-flex; align-items: center; justify-content: center; font: 600 .9rem/1 var(--head); }
.grn-stone--toc a:hover { color: var(--forest); }
.grn-stone--tool { grid-column: 1 / -1; padding: 0; background: transparent; box-shadow: none; }
.grn-three { grid-column: 9 / span 4; list-style: none; padding: 0; margin: -150px 28px 0 0; display: grid; grid-template-rows: repeat(3, auto); gap: 12px; z-index: 1; align-self: start; }
.grn-three li { border-radius: var(--r); }
.grn-three a { display: block; padding: 16px 18px 16px 22px; color: var(--ink); text-decoration: none; position: relative; border-radius: var(--r); }
.grn-three a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--stone); }
.grn-three a:hover::before { background: var(--forest); }
.grn-three b { display: block; font: 600 1.2rem/1.1 var(--head); margin-bottom: 4px; }
.grn-three span { font-size: .88rem; color: var(--mute); line-height: 1.35; display: block; }
.grn-kick { margin: 0 0 14px; font: 600 .8rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); display: flex; align-items: center; gap: 10px; }
.grn-kick::before { content: ""; width: 28px; height: 3px; background: var(--forest); border-radius: 2px; }
.grn-stone--title h1 { font: 700 clamp(2.15rem, 1.3rem + 3vw, 3.7rem)/1.02 var(--head); letter-spacing: -.012em; margin: 0 0 18px; color: var(--ink); text-shadow: var(--emb); }
.grn-lede { font-size: 1.08rem; color: var(--ink); max-width: 60ch; }
.grn-by { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; color: var(--mute); margin: 14px 0 0; }
.grn-by a { color: var(--mute); }
.grn-pic { margin: 0; height: 100%; position: relative; }
.grn-pic img { width: 100%; height: 100%; object-fit: cover; }
.grn-pic figcaption { position: absolute; left: 10px; bottom: 10px; font-size: .74rem; line-height: 1.3; color: #F2F4F6; background: rgba(20, 26, 31, .72); padding: 4px 8px; border-radius: 3px; }
.grn-hero--in { padding-bottom: 8px; }
.grn-hero--in .grn-stone--title h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.grn-tool { background: var(--dark) var(--grain); color: var(--dark-ink); border-radius: var(--r); box-shadow: var(--sh); padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
.grn-tool a { color: #CFE6D8; }
.grn-tool__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); padding-bottom: 12px; margin-bottom: 16px; }
.grn-tool__h h2 { font-size: 1.45rem; margin: 0; color: #FFFFFF; }
.grn-tool__h p { margin: 0; color: var(--dark-mute); font-size: .9rem; }
.grn-tool__f { margin: 14px 0 0; font-size: .82rem; color: var(--dark-mute); }
.grn-tool select, .grn-now { font: 500 1rem/1.2 var(--body); color: var(--ink); background: var(--slab); border: 0; border-radius: 5px; padding: 9px 34px 9px 12px; box-shadow: inset 0 -2px 0 var(--stone); -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; max-width: 100%; }
.grn-now { padding: 9px 14px; background-image: none; cursor: pointer; background: var(--forest-l); color: var(--forest); font-weight: 600; }
.grn-js .grn-nojs { display: none; }
html:not(.grn-js) .grn-jsonly { display: none; }
.grn-phrase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 500 1.14rem/1.4 var(--head); margin: 0 0 14px; }
.grn-clock__sum { margin: 0 0 14px; color: var(--dark-mute); font-size: .95rem; }
.grn-clock__sum b { color: #FFFFFF; font-weight: 600; }
.grn-zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.grn-zone { background: rgba(255, 255, 255, .06); border-radius: 5px; padding: 12px 14px 12px 18px; position: relative; overflow: hidden; }
.grn-zone::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--closed); }
.grn-zone--ok::before { background: #6FB98F; }
.grn-zone__n { display: block; font: 600 1.02rem/1.2 var(--head); color: #FFFFFF; }
.grn-zone__s { display: block; font-size: .8rem; color: var(--dark-mute); }
.grn-zone__v { display: inline-block; margin: 8px 0 2px; font: 600 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); color: #E4E8EB; }
.grn-zone--ok .grn-zone__v { background: #6FB98F; color: #0F2318; }
.grn-zone__l { display: block; font-size: .9rem; color: #E4E8EB; }
.grn-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.grn-table caption { caption-side: bottom; text-align: left; font-size: .82rem; color: var(--mute); padding-top: 8px; }
.grn-table th, .grn-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grn-table thead th { font: 600 .8rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.grn-tool .grn-table th, .grn-tool .grn-table td { border-color: rgba(255, 255, 255, .14); color: var(--dark-ink); }
.grn-scroll { overflow-x: auto; margin-top: 18px; background: var(--slab); border-radius: var(--r); box-shadow: var(--sh-s); padding: 6px 14px 12px; }
.grn-table--week { min-width: 760px; }
.grn-route__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 1.1rem/1.3 var(--head); margin: 0 0 12px; }
.grn-route__out { margin: 0 0 16px; }
.grn-route__big { font: 700 clamp(2rem, 1.4rem + 2vw, 2.8rem)/1 var(--head); color: #FFFFFF; margin: 0 0 6px; }
.grn-route__big small { font: 500 1rem/1 var(--body); color: var(--dark-mute); margin-left: 6px; }
.grn-route__out p { margin: 0 0 6px; color: #E4E8EB; }
.grn-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.grn-bars li { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr) 4.6em 24px; align-items: center; gap: 10px; font-size: .9rem; padding: 3px 4px; border-radius: 4px; }
.grn-bars li.grn-on { background: rgba(255, 255, 255, .1); }
.grn-bars__n { line-height: 1.15; }
.grn-bars__n small { display: block; font-size: .72rem; color: var(--dark-mute); }
.grn-bars__b { height: 12px; border-radius: 3px; background: linear-gradient(90deg, #8E9AA4, #B5BFC7); width: var(--w); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.grn-bars li.grn-on .grn-bars__b { background: linear-gradient(90deg, #5FA67F, #8BCAA6); }
.grn-bars__k { text-align: right; font-variant-numeric: tabular-nums; }
.grn-bars__g { color: var(--dark-mute); display: inline-flex; }
.grn-id__f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.grn-id__f fieldset { border: 0; margin: 0; padding: 12px; border-radius: 5px; background: rgba(255, 255, 255, .06); min-width: 0; }
.grn-id__f legend { font: 600 .98rem/1.2 var(--head); color: #FFFFFF; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.grn-id__f label { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; margin: 6px 0; clear: both; cursor: pointer; }
.grn-id__f input { margin-top: .3em; accent-color: #6FB98F; width: 16px; height: 16px; flex: none; }
.grn-id__out { background: var(--slab); color: var(--ink); border-radius: 5px; padding: 16px 18px; box-shadow: inset 6px 0 0 var(--forest); }
.grn-id__out.grn-no { box-shadow: inset 6px 0 0 #A8433A; }
.grn-verdict { font: 600 1.18rem/1.3 var(--head); margin: 0 0 8px; }
.grn-id__out ul { margin: 0; padding-left: 1.1em; font-size: .94rem; }
.grn-id__out li { margin: 4px 0; }
.grn-id__out a { color: var(--forest); }
.grn-adtop { padding: 14px 0 0; }
.grn-adbox { display: flex; align-items: center; gap: 22px; justify-content: space-between; background: var(--slab); border: 1px dashed var(--line); border-radius: var(--r); padding: 18px 22px; }
.grn-adbox p { margin: 0 0 6px; font-size: .94rem; }
.grn-adbox__h { font: 600 1.08rem/1.2 var(--head); display: flex; align-items: center; gap: 10px; }
.grn-rg { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem !important; color: var(--mute); margin-top: 8px !important; }
.grn-age { flex: none; font: 700 .78rem/1 var(--head); border: 2px solid var(--ink); color: var(--ink); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.grn-endad { padding: 26px 0 0; }
.grn-sec { padding: 26px 0 0; }
.grn-sec--first { padding-top: 34px; }
.grn-slab { background: var(--slab) var(--grain); border-radius: var(--r); box-shadow: var(--sh); padding: clamp(20px, 2.8vw, 36px); min-width: 0; }
.grn-slab > p { max-width: 72ch; }
.grn-cols { columns: 2; column-gap: 44px; }
.grn-cols p { break-inside: avoid; }
.grn-cols p:only-child { break-inside: auto; }
.grn-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grn-stack { display: grid; gap: 12px; }
.grn-slab h2 { position: relative; padding-left: 16px; }
.grn-slab h2::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px; border-radius: 2px; background: var(--forest); }
.grn-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; align-items: stretch; }
.grn-split--rev > :first-child { order: 2; }
.grn-split--tool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grn-split--tool.grn-split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grn-split .grn-pic { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); background: var(--dark); min-height: 280px; }
.grn-more { margin: 14px 0 0; }
.grn-more a { display: inline-flex; align-items: center; gap: 8px; font: 600 .98rem/1.2 var(--head); text-decoration: none; color: var(--forest); border-bottom: 2px solid var(--forest-l); padding-bottom: 2px; }
.grn-more a:hover { border-bottom-color: var(--forest); }
.grn-fiche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.grn-fiche div { background: var(--slab2); border-radius: 5px; padding: 10px 12px; border-left: 3px solid var(--stone); }
.grn-fiche dt { font: 600 .74rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.grn-fiche dd { margin: 3px 0 0; font-size: .96rem; }
.grn-list { padding: 0; list-style: none; margin: 0; display: grid; gap: 8px; }
.grn-list li { background: var(--slab2); border-radius: 5px; padding: 12px 14px 12px 18px; border-left: 4px solid var(--forest); }
.grn-faq { display: grid; gap: 8px; }
.grn-faq__i { background: var(--slab2); border-radius: 5px; padding: 0 16px; }
.grn-faq__i summary { cursor: pointer; font: 600 1.04rem/1.35 var(--head); padding: 13px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.grn-faq__i summary::-webkit-details-marker { display: none; }
.grn-faq__i summary::after { content: "+"; font: 400 1.4rem/1 var(--head); color: var(--forest); }
.grn-faq__i[open] summary::after { content: "–"; }
.grn-faq__i p { margin: 0 0 14px; }
.grn-see { padding-bottom: 8px; }
.grn-see h2 { font-size: 1.2rem; }
.grn-rel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.grn-rel a { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--slab); border-radius: 5px; padding: 14px 16px; box-shadow: var(--sh-s); text-decoration: none; color: var(--ink); font: 500 1rem/1.25 var(--head); }
.grn-rel a:hover { color: var(--forest); }
.grn-hold { padding: 60px 0; }
.grn-foot { margin-top: 40px; background: var(--dark) var(--grain); color: var(--dark-ink); padding: 36px 0 22px; }
.grn-foot a { color: #CFE6D8; }
.grn-foot__g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.grn-foot h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dark-mute); }
.grn-foot ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.grn-foot li { margin: 0 0 6px; }
.grn-foot p { font-size: .92rem; }
.grn-foot__t { display: flex; align-items: center; gap: 10px; font: 700 1.3rem/1 var(--head); }
.grn-foot .grn-mark { fill: #4A5560; stroke: #DDE3E7; }
.grn-foot__fine { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 22px; padding-top: 16px; font-size: .8rem; color: var(--dark-mute); }
.grn-foot__fine p { font-size: .8rem; margin: 0 0 6px; }
@media (max-width: 1080px) {
  .grn-burger { display: inline-flex; }
  .grn-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--slab); box-shadow: var(--sh); display: none; padding: 10px 20px 16px; margin: 0; }
  .grn-open .grn-nav { display: block; }
  .grn-nav ul { flex-direction: column; }
  .grn-nav a { padding: 11px 8px; font-size: 1rem; }
  .grn-head__in { gap: 12px; }
  .grn-logo { margin-right: auto; }
}
@media (max-width: 900px) {
  .grn-stone--title, .grn-stone--pic, .grn-stone--toc, .grn-hero--in .grn-stone--title { grid-column: 1 / -1; }
  .grn-stone--pic { aspect-ratio: 16 / 10; }
  .grn-stone--band { height: auto; aspect-ratio: 16 / 9; }
  .grn-stone--title { margin: -60px 12px 0; }
  .grn-three { grid-column: 1 / -1; margin: 0; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grn-split, .grn-split--tool, .grn-split--tool.grn-split--rev { grid-template-columns: minmax(0, 1fr); }
  .grn-split--rev > :first-child { order: 0; }
  .grn-id__f { grid-template-columns: minmax(0, 1fr); }
  .grn-fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grn-cols { columns: 1; }
  .grn-foot__g { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .grn-adbox { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grn-wrap, .grn-head__in { width: calc(100% - 32px); }
  .grn-head__in { min-height: 60px; }
  .grn-logo__t { font-size: 1.08rem; }
  .grn-logo__t small { display: none; }
  .grn-mark { width: 28px; height: 28px; }
  .grn-theme { display: none; }
  .grn-open .grn-theme { display: inline-flex; position: absolute; right: 16px; top: calc(100% + 14px); z-index: 2; }
  .grn-paid { padding: 10px 12px; font-size: .9rem; }
  .grn-cta .grn-ad { display: none; }
  .grn-three { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .grn-stone--title { margin: -36px 8px 0; }
  .grn-phrase { font-size: 1.02rem; }
  .grn-phrase select { flex: 1 1 100%; }
  .grn-bars li { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 4.2em 20px; gap: 6px; font-size: .84rem; }
  .grn-paid--lg { width: 100%; justify-content: center; }
}