/* Marina Greens — page bodies (Phase 3b): the approved preview's section and component styles
   (agency demo rev 2026-10-02), for pages built from core blocks + the MG blocks on the
   "Design page" template (page-marina), the front page and the blog index. Everything is scoped
   to main.design so plugin markup elsewhere is untouched. Tokens and the shared components
   (.band, .plate, .copy/.copy.bd, .eyebrow, .lede, .btn, .is-style-kicker) live in site.css.
   Markup map: docs/THEME-HANDLES.md §1 (marina-pages). */

/* base type inside the page body (site.css zeroes margins globally) */
.design h1,.design h2,.design h3{font-family:var(--f-display);text-wrap:balance;letter-spacing:-.018em}
.design h2{font-size:clamp(23px,4.3vw,32px);font-weight:800;line-height:1.15;margin:0 0 8px}
.design h3{font-size:clamp(17px,2.3vw,20px);font-weight:700;line-height:1.25;margin:0 0 6px}
.design p{margin:0 0 12px}
.design .btn-row,.design .wp-block-buttons.btn-row{display:flex;flex-wrap:wrap;gap:11px}
.design b,.design strong{font-weight:700}
.design .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* bands without a div.bg draw the leaf tile themselves */
.design .band:not(:has(>.bg))::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-color:var(--paper);background-image:var(--tile);background-size:var(--leaf) auto;background-repeat:repeat;background-position:top center;opacity:var(--bg-brand)}
.design .band.content:not(:has(>.bg))::before{opacity:var(--bg-content)}
.design .band.quiet:not(:has(>.bg))::before{opacity:var(--bg-quiet)}
.design .band.flush-top{padding-top:0}
.design .wrap.narrow{max-width:860px}

/* section heading boxes, hero boxes, the row of buttons under a grid */
.design .band>.wrap>.copy:not(.full),.design .band>.wrap>.wp-block-group.copy:not(.full){margin-bottom:16px}
.design .copy h2:last-child{margin-bottom:0}
.design .copy .lede:last-child{margin-bottom:0}
.design .copy.full{max-width:min(100%,660px)}
.design .band>.wrap>.btn-row:not(:first-child){margin-top:16px}
.design .hero .copy.full .lede{margin-bottom:0}
.design .copy.full>.lede+.livebar{margin-top:12px}

/* breadcrumbs on a band: a frosted pill (marina/breadcrumbs prints nav.crumbs > ol) */
.design .band .crumbs{display:flex;width:fit-content;max-width:100%;margin-bottom:12px;padding:6px 14px;border-radius:999px;background-color:color-mix(in srgb,var(--plate) 84%,transparent);-webkit-backdrop-filter:saturate(155%) blur(9px);backdrop-filter:saturate(155%) blur(9px)}
.design .band .crumbs ol{margin:0;font-size:13px;color:var(--grey)}
.design .band .crumbs li+li::before{content:"\203A";color:var(--grey)}
.design .band .crumbs a{min-height:24px;color:var(--grey);text-decoration:none}
.design .band .crumbs a:hover{color:var(--ink);text-decoration:underline}
.design .band .crumbs [aria-current]{color:var(--ink);font-weight:600}
@media (max-width:860px){.design .band .crumbs a{min-height:32px}}

/* the sign label above a page hero ("About →") */
.design .is-style-kicker{margin-bottom:16px}

/* page heroes */
.design .hero{padding-block:clamp(26px,5vw,48px) clamp(24px,4vw,40px)}
.design .hero h1{font-size:clamp(24px,4.4vw,38px);font-weight:800;line-height:1.12;margin:0 0 10px;letter-spacing:-.025em}
.design .hero .lede{font-size:clamp(16px,2.1vw,18px);max-width:56ch}

/* home hero */
.design .hero2{padding-block:clamp(22px,4vw,44px) clamp(26px,4.5vw,48px);text-align:center}
.design .hero2 .inner{max-width:720px;margin-inline:auto}
.design .hero2 .lg{display:block;margin:0 auto clamp(14px,2.4vw,20px)}
.design .hero2 .lg img{display:block;width:min(100%,355px);height:auto;margin-inline:auto;filter:drop-shadow(0 8px 20px rgba(20,18,26,.16))}
.design .hero2 h1{font-size:clamp(24px,4.6vw,38px);font-weight:800;line-height:1.14;margin:0;letter-spacing:-.025em}
.design .hero2 .copy{padding:16px 22px;margin-inline:auto}
.design .hero2 .sup{margin:12px 0 0;font-size:clamp(14px,1.9vw,16px);color:var(--grey);font-weight:600}
.design .hero2 .sup b{color:var(--ink)}
.design .hero2 .btn-row{justify-content:center;margin-top:clamp(14px,2.4vw,20px)}
.design .hero2 .wp-block-button__link{min-height:56px;font-size:17px;padding:0 26px}

/* deals hero */
.design .dhero .inner{max-width:760px}
.design .dhero h1{position:absolute;left:-9999px}
.design .dhero .copy.full{margin-bottom:18px}
.design .dhero .dmeta{margin-bottom:0}

/* the menu page: live line, pickup / curbside picker, category rail */
.design .livebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;color:var(--grey);font-weight:500}
.design .livebar p{margin:0}
.design .livebar b{color:var(--ink);font-variant-numeric:tabular-nums}
.design .picker{display:grid;gap:8px;margin-top:20px}
@media (min-width:620px){.design .picker{grid-template-columns:repeat(3,1fr)}}
.design .pick{display:flex;align-items:center;gap:11px;margin:0;padding:13px 15px;border-radius:10px;border:2px solid var(--line);background:var(--plate);text-align:left;font-family:var(--f-body);font-size:15px;color:var(--ink);min-height:58px;width:100%}
.design button.pick{cursor:pointer}
.design .pick:hover{border-color:var(--line-strong)}
.design .pick[aria-pressed="true"]{border-color:var(--line-strong);background:var(--lav-soft)}
.design .pick:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.design .pick::before{content:"";width:34px;height:34px;flex:none;border-radius:8px;border:1px solid var(--line);background:var(--lav-soft) var(--pick-ic) center/18px no-repeat}
.design .pick[aria-pressed="true"]::before{background-color:var(--ink);border-color:var(--ink);filter:invert(1) hue-rotate(180deg)}
.design .pick.is-pickup{--pick-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E")}
.design .pick.is-curbside{--pick-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16V11l2-5h14l2 5v5'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7.5' cy='16.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='16.5' r='1.8'/%3E%3C/svg%3E")}
.design .pick strong{display:block;font-family:var(--f-display);font-size:15px;line-height:1.2}
.design .pick small{display:block;color:var(--grey);font-size:12.5px;margin-top:2px}
.design .pickmsg{margin:11px 0 0;padding:12px 14px;border-radius:9px;background:var(--lav-soft);border:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.design .pickmsg b,.design .pickmsg strong{font-family:var(--f-display)}
.design .pickmsg[hidden]{display:none}
.design .railwrap{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:30;padding:0;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:saturate(140%) blur(9px);backdrop-filter:saturate(140%) blur(9px);border-block:1px solid var(--line)}
.design .railwrap .rail{display:flex;gap:8px;overflow-x:auto;padding-block:11px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.design .railwrap .rail::-webkit-scrollbar{height:5px}
.design .railwrap .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.design .railwrap .rail a{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--plate);text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;white-space:nowrap}
.design .railwrap .rail a:hover{border-color:var(--line-strong)}
.design .railwrap .rail a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.design .railwrap .rail a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.design .menuzone{padding-block:22px 40px}
.design .menuzone .menu,.design .menuzone .order-embed{position:relative}

/* how it works (three numbered plates) */
.design .steps3{display:grid;gap:12px}
@media (min-width:760px){.design .steps3{grid-template-columns:repeat(3,1fr)}}
.design .step{padding:19px 17px;display:flex;flex-direction:column;gap:7px}
.design .step .n{margin:0;font-family:var(--f-display);font-weight:800;font-size:12px;color:var(--paper);background:var(--ink);border-radius:6px;width:26px;height:26px;display:grid;place-items:center}
.design .step h3{margin:4px 0 0}
.design .step p{margin:0;font-size:14.5px;color:var(--grey)}

/* "before you order" boxes, bordered as asked */
.design .know{display:grid;gap:11px}
@media (min-width:700px){.design .know{grid-template-columns:repeat(2,1fr)}}
.design .know>div{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:15px 16px;border:2px solid var(--line-strong);border-radius:10px;background:var(--plate);box-shadow:var(--plate-shadow)}
.design .know .k{margin:0;font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-deep);padding-top:3px;white-space:nowrap}
.design .know p{margin:0;font-size:14.5px;line-height:1.5}
.design .know strong{font-family:var(--f-display)}

/* open-and-close questions (core/details and the FAQ block's plain rows) */
.design details.wp-block-details,.design .qlist details{border:1px solid var(--line);border-radius:10px;background:var(--plate);margin:0 0 9px;overflow:hidden}
.design details.wp-block-details[open],.design .qlist details[open]{border-color:var(--line-strong)}
.design details.wp-block-details summary,.design .qlist summary{cursor:pointer;padding:15px 17px;font-family:var(--f-display);font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px}
.design details.wp-block-details summary::-webkit-details-marker,.design .qlist summary::-webkit-details-marker{display:none}
.design details.wp-block-details summary::after,.design .qlist summary::after{content:"+";font-size:21px;color:var(--blue-deep);font-weight:700;flex:none}
.design details.wp-block-details[open] summary::after,.design .qlist details[open] summary::after{content:"\2212"}
.design details.wp-block-details summary:focus-visible,.design .qlist summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.design details.wp-block-details>:not(summary),.design .qlist .a{padding:0 17px 16px;font-size:15px;color:var(--grey);line-height:1.55}
.design details.wp-block-details>:not(summary)+:not(summary){padding-top:0;margin-top:-6px}
.design details.wp-block-details strong,.design .qlist .a strong{color:var(--ink)}

/* the closing CTA plate on most pages */
.design .ctaplate{padding:22px 20px;display:grid;gap:14px;max-width:760px}
.design .ctaplate.wide{max-width:none}
.design .ctaplate h3{margin:0 0 4px}
.design .ctaplate p{margin:0;font-size:15px;color:var(--grey)}

/* store hours table (marina/hours) in a plate */
.design .hourplate{padding:0;overflow:hidden;max-width:560px}
.design .hourplate .hd{padding:13px 17px;border-bottom:2px solid var(--line-strong);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.design .hourplate .hd h3{margin:0;font-size:15.5px}
.design .hourplate .hd .status,.design .hourplate .hd p{margin:0;font-family:var(--f-display);font-weight:800;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--cyan);color:#06222E}
.design .hourplate .hd .is-closed{background:var(--plate-2);color:var(--grey)}
.design .hourplate table{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.design .hourplate thead{display:none}
.design .hourplate th,.design .hourplate td{padding:9px 17px;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.design .hourplate td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.design .hourplate tr:last-child th,.design .hourplate tr:last-child td{border-bottom:0}
.design .hourplate tr.is-today th,.design .hourplate tr.is-today td{background:var(--lav-soft);font-weight:700}
.design .hourplate .svc{border-top:2px solid var(--line-strong);padding:0}
.design .hourplate .svc p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:9px 17px;border-bottom:1px solid var(--line);font-size:15px}
.design .hourplate .svc p:last-child{border-bottom:0}
.design .hourplate .svc b{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}

/* the contact form (marina/contact-form) in a plate */
.design .formplate{padding:20px 19px}
.design .formplate .form{margin:0}
.design .formplate .btn[type=submit]{width:100%}

/* the neighbourhood list: a core/list whose items are "Name — 4 mins" (theme filter) */
.design ul.hoods{list-style:none;margin:0;padding:0}
.design .hood{margin:0}

/* the blog page's real posts (core/query, when there are any) */
.design .realposts:empty{display:none}
.design .realposts .wp-block-post-template{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
@media (min-width:620px){.design .realposts .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.design .realposts .wp-block-post-template{grid-template-columns:repeat(3,1fr)}}
.design .realposts .wp-block-post{padding:16px;border:2px solid var(--line-strong);border-radius:var(--r);background:var(--plate);box-shadow:var(--plate-shadow)}
.design .realposts .wp-block-post-title{font-size:17px;margin:0 0 6px}
.design .realposts .wp-block-post-title a{color:var(--ink);text-decoration:none}

/* the deal flyer above a day's cards (MG → Deal flyers) */
.design .dflyer{margin:16px 0 0}
.design .dflyer img{display:block;width:100%;height:auto;border:2px solid var(--line-strong);border-radius:var(--r)}
.design .dpane>.offers{margin-top:16px}
.design .dpane[hidden]{display:none}
.design .dday[hidden]{display:none}
.design .dday>.dflyer{margin:0 0 12px}
.design .dealcards--today>.copy{margin-bottom:16px}

/* app badges ("coming soon": not links) */
.design .store{cursor:default}
.design .store::before{content:"";width:24px;height:24px;flex:none;background:currentColor;-webkit-mask:var(--store-ic) center/contain no-repeat;mask:var(--store-ic) center/contain no-repeat}
.design .store.apple{--store-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.4 2-3.6 2.1-3.7-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.5-1-2.5-3.9ZM14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4Z'/%3E%3C/svg%3E")}
.design .store.play{--store-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.8v18.4c0 .5.5.8.9.6L20.6 13c.4-.2.4-.8 0-1L4.9 2.2c-.4-.2-.9.1-.9.6Z'/%3E%3C/svg%3E")}

/* icons drawn by CSS (staff never handle SVG): contact action cards (.act + .phone/.pin/.cart),
   the medical notice (.notice), the growing-method plates (.grow) */
.design .act,.design .notice,.design .grow{position:relative}
.design .act::before{content:"";display:block;width:40px;height:40px;border-radius:10px;background:var(--ink)}
.design .notice::before,.design .grow::before{content:"";display:block;width:34px;height:34px;border-radius:9px;background:var(--lav-soft);border:1px solid var(--line)}
.design .grow::before{width:42px;height:42px;border-radius:10px}
.design .act::after,.design .notice::after,.design .grow::after{content:"";position:absolute;width:19px;height:19px;background:var(--paper);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.design .act::after{left:calc(17px + 10.5px);top:calc(18px + 10.5px)}
.design .notice::after{left:calc(18px + 8px);top:calc(17px + 8px);width:18px;height:18px;background:var(--ink)}
.design .grow::after{left:calc(17px + 10px);top:calc(19px + 10px);width:22px;height:22px;background:var(--ink)}
.design .act.phone{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1.1 1A17 17 0 0 1 4 5.1 1 1 0 0 1 5 4Z'/%3E%3C/svg%3E")}
.design .act.pin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.design .act.cart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h2l2.2 10.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L20 9H6.3'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E")}
.design .notice{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E")}
.design .grow{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.design .grow.dep{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20V10l7-5 7 5v10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E")}
.design .grow.indoor{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M12 11v6M9 14h6'/%3E%3C/svg%3E")}
/* a whole card is one link: its last link (p.go > a) stretches over the card */
.design .act .go a::after,.design .oth strong a::after,.design .guide strong a::after,.design .post h3 a::after,.design .feat h2 a::after,.design .c2-link a::after{content:"";position:absolute;inset:0;z-index:1}
.design .act .go a,.design .oth strong a,.design .guide strong a{color:inherit;text-decoration:none}
.design .act .go,.design .act .k,.design .act .v{margin:0}
.design .act .go a{color:var(--blue-deep)}

/* app store badges */
.design p.store{display:inline-grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;align-content:center;margin:0}
.design p.store::before{grid-row:span 2}
.design p.store small{display:block;line-height:1.1}

/* the FAQ page: search row hidden until pages.js can run it; "nothing matched" box */
.design .searchrow[hidden]{display:none}
.design .searchrow .wrapin>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--grey);fill:none;stroke-width:2;pointer-events:none}
.design .searchrow .skip{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.design .noresults .btn-row{justify-content:center}

/* small screens: nothing may widen the page */
.design .cmpwrap,.design .rail{max-width:100%}

/* ---- the approved preview's component rules (scoped) ---------------------------------------- */

/* ---- Phase 3b fit-ups: block markup ↔ the preview's elements ------------------------------- */
.design .band .crumbs ol{flex-wrap:nowrap}
.design .band .crumbs li:last-child{flex:0 1 auto;min-width:0}
.design :is(.gl,.stat,.diff,.grow,.fmt,.act,.oth,.guide,.hstep,.loc,.plan,.doc,.bcard,.inside,.gettinghere,.sidecard,.vcard,.ways,.trow,.ir,.gh,.know,.post .bd,.feat .bd,.pull,.appcta,.stores,.ctacopy,.sr,.picker,.livebar,.notice,.d2,.perk2,.rule,.noresults,.mapplate,.mapplate2,.searchplate) p{margin:0}
.design .addr2 .sub{color:var(--grey)}
.design .menuzone .deal-strip{display:none}
/* how it works */
.design .howto{display:grid;gap:12px}
@media (min-width:760px){.design .howto{grid-template-columns:repeat(3,1fr)}}
.design .hstep{padding:19px 17px;display:flex;flex-direction:column;gap:7px}
.design .hstep .n{font-family:var(--f-display);font-weight:800;font-size:12px;color:var(--paper);background:var(--ink);border-radius:6px;width:26px;height:26px;display:grid;place-items:center}
.design .hstep h3{margin:4px 0 0}
.design .hstep p:not(.n){font-size:14.5px;color:var(--grey)}
/* the small print */
.design .rules .rule{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15px;line-height:1.5;padding:13px 15px;border-radius:10px;background:var(--plate);border:1px solid var(--line)}
.design .rules .x{font-family:var(--f-display);font-weight:800;color:var(--blue-deep);font-size:15px}
/* About: pull quote, record rows */
.design .pull .q{font-family:var(--f-display);font-weight:700;font-size:clamp(18px,3vw,24px);line-height:1.3;letter-spacing:-.02em}
.design .pull .cite{font-size:13px;color:var(--grey);font-weight:600}
.design .spec .sr{display:grid;border-bottom:1px solid var(--line)}
.design .spec .sr:last-child{border-bottom:0}
@media (min-width:620px){.design .spec .sr{grid-template-columns:150px 1fr}}
.design .spec .dt{font-family:var(--f-display);font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);padding:13px 18px 3px}
.design .spec .dd{padding:0 18px 13px;font-size:15px;line-height:1.45}
@media (min-width:620px){.design .spec .dt{padding:13px 8px 13px 18px}.design .spec .dd{padding:13px 18px 13px 0}}
.design .spec .dd b{font-family:var(--f-display);letter-spacing:.03em}
/* Medical comparison table (core/table) */
.design figure.cmptable{margin:0}
.design .cmptable table{width:100%;border-collapse:collapse;min-width:620px;background:var(--plate);border:2px solid var(--line-strong)}
.design .cmptable tbody td:first-child{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);white-space:nowrap;background:var(--plate-2)}
.design .cmptable td b{color:var(--blue-deep)}
.design .tablenote,.design .lede.after{margin-top:12px}
/* lists inside cards */
.design .doc ul,.design .bcard ul{margin:0}
.design .bcard ul li{display:block}
.design .bcard ul li::before{content:"\2192\00a0";color:var(--lav);font-weight:800}
/* contact: map caption, side card */
.design .mapplate .cap,.design .mapplate2 .cap{margin:0}
.design .mapplate .cap a,.design .mapplate2 .cap a{margin-left:auto}
.design .sidecard .warn{margin:0}
.design .stuck{max-width:760px}
.design .plan p strong,.design .plan p span{display:block}
.design .post .art,.design .feat .art{min-height:120px}
.design .post .cat{border:0;background:none;padding:0;border-radius:0;min-height:0}
.design .post h3 a,.design .feat h2 a{color:inherit;text-decoration:none}
.design .cats2{display:grid;gap:11px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.design .cats2{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.design .cats2{grid-template-columns:repeat(5,1fr)}}
.design .c2 .t{font-size:16.5px}
.design .c2{padding:16px 13px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column; align-items:flex-start;gap:3px;transition:transform .15s ease,box-shadow .15s ease}
.design .c2:hover{transform:translateY(-3px);box-shadow:0 10px 0 -5px var(--lav),var(--plate-shadow)}
.design .c2:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.design .c2 .t{font-family:var(--f-display);font-weight:700;font-size:15.5px;line-height:1.2}
.design .c2 .ar{margin-top:6px;font-size:17px;opacity:.38}
.design .c2:hover .ar{opacity:1}
.design .dstrip{display:grid;gap:11px}
@media(min-width:760px){.design .dstrip{grid-template-columns:repeat(3,1fr)}}
.design .d2{padding:17px 16px;display:flex;flex-direction:column;gap:8px}
.design .d2 .tag{font-family:var(--f-display);font-weight:800;font-size:17px;background:var(--amber); color:#1A1205;padding:6px 10px;border-radius:6px;border:2px solid var(--line-strong); transform:rotate(-1.5deg);align-self:flex-start;font-variant-numeric:tabular-nums}
.design .d2 strong{font-family:var(--f-display);font-size:16px;line-height:1.25}
.design .d2 p{margin:0;font-size:14px;color:var(--grey);line-height:1.45}
.design .visit2{display:grid;gap:14px}
@media(min-width:900px){.design .visit2{grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}}
.design .vcard{padding:20px 19px;display:flex;flex-direction:column;gap:12px}
.design .vcard h3{margin:0}
.design .ways{display:grid;gap:10px}
.design .ways div{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline}
.design .ways .w{font-family:var(--f-display);font-weight:800;font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--blue-deep);white-space:nowrap}
.design .ways p{margin:0;font-size:14.5px;line-height:1.45}
.design .ways b{font-variant-numeric:tabular-nums}
.design .addr2{font-size:15.5px;line-height:1.55;margin:0}
.design .addr2 b{font-variant-numeric:tabular-nums}
.design .mini{aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--plate-2)}
.design .mini svg{width:100%;height:100%;display:block}
.design .appcta{padding:clamp(20px,3.4vw,30px);display:grid;gap:18px;align-items:center}
@media(min-width:820px){.design .appcta{grid-template-columns:1.4fr 1fr}}
.design .appcta h2{margin:0 0 8px}
.design .stores{display:flex;flex-wrap:wrap;gap:11px}
.design .store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 18px;border-radius:12px; background:var(--ink);color:var(--paper);font-family:var(--f-display);font-weight:800;font-size:17px;opacity:.9}
.design .store svg{width:24px;height:24px;fill:currentColor;flex:none}
.design .store small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;opacity:.8}
.design .crumb{font-size:13px;color:var(--grey);padding-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.design .crumb a{color:var(--grey);text-decoration:none}
.design .crumb a:hover{color:var(--ink);text-decoration:underline}
.design .crumb span[aria-current]{color:var(--ink);font-weight:600}
.design .livebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px; font-size:14px;color:var(--grey);font-weight:500}
.design .livebar b{color:var(--ink);font-variant-numeric:tabular-nums}
.design .menuzone{padding-block:22px 40px}
.design .know{display:grid;gap:11px}
@media(min-width:700px){.design .know{grid-template-columns:repeat(2,1fr)}}
.design .know div{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:15px 16px; border:1px solid var(--line);border-radius:10px;background:var(--plate)}
.design .know .k{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--blue-deep);padding-top:3px;white-space:nowrap}
.design .know p{margin:0;font-size:14.5px;line-height:1.5}
.design .know strong{font-family:var(--f-display)}
.design .guides{display:grid;gap:11px}
@media(min-width:620px){.design .guides{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.design .guides{grid-template-columns:repeat(3,1fr)}}
.design .guide{padding:17px;text-decoration:none;color:var(--ink);display:block}
.design .guide strong{font-family:var(--f-display);font-size:16.5px;display:flex;justify-content:space-between; align-items:center;gap:10px}
.design .guide p{margin:6px 0 0;font-size:14px;color:var(--grey)}
.design .guide:hover{box-shadow:0 10px 0 -5px var(--lav),var(--plate-shadow);transform:translateY(-2px)}
.design .guide{transition:transform .15s ease,box-shadow .15s ease}
.design .guide:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.design .know div{border:2px solid var(--line-strong)!important;box-shadow:var(--plate-shadow)}
.design .dhero{padding-block:clamp(26px,5vw,52px) clamp(28px,5vw,48px)}
.design .dhero .inner{max-width:760px}
.design .dplate{display:inline-flex;align-items:center;gap:14px;padding:11px 20px 12px;margin-bottom:18px}
.design .dsub{font-size:clamp(17px,2.4vw,21px);font-weight:600;color:var(--ink);max-width:30ch;margin:0 0 6px; font-family:var(--f-display);line-height:1.3}
.design .dmeta{font-size:15px;color:var(--grey);margin:0 0 20px;font-weight:500}
.design .dmeta b{color:var(--ink)}
.design .dayrail{display:flex;gap:7px;overflow-x:auto;padding-block:12px;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
.design .dayrail::-webkit-scrollbar{height:5px}
.design .dayrail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.design .dayrail button{flex:none;scroll-snap-align:start;min-width:62px;min-height:60px;border-radius:10px; border:2px solid var(--line);background:var(--plate);cursor:pointer;font-family:var(--f-display); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; color:var(--ink);padding:0 10px}
.design .dayrail button:hover{border-color:var(--line-strong)}
.design .dayrail button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.design .dayrail button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.design .dayrail .d{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.design .dayrail .t{font-size:11px;font-weight:700;color:var(--amber)}
.design .dayrail button[aria-pressed="true"] .t{color:var(--amber)}
.design .offers{display:grid;gap:12px}
@media(min-width:680px){.design .offers{grid-template-columns:repeat(2,1fr)}}
.design .offer{padding:0;overflow:hidden;display:flex;flex-direction:column}
.design .offer .top{display:flex;align-items:center;gap:12px;padding:15px 17px 13px; border-bottom:2px solid var(--line-strong)}
.design .offer .tag{font-family:var(--f-display);font-weight:800;font-size:clamp(17px,2.6vw,21px); line-height:1;letter-spacing:-.02em;background:var(--amber);color:#1A1205;padding:7px 11px; border-radius:7px;border:2px solid var(--line-strong);transform:rotate(-1.5deg);flex:none; font-variant-numeric:tabular-nums;white-space:nowrap}
.design .offer .what{font-family:var(--f-display);font-weight:700;font-size:15.5px;line-height:1.25}
.design .offer .body{padding:14px 17px 17px;flex:1;display:flex;flex-direction:column;gap:11px}
.design .offer p{margin:0;font-size:14.5px;color:var(--grey);line-height:1.5}
.design .offer .brands{display:flex;flex-wrap:wrap;gap:6px}
.design .bchip{font-family:var(--f-display);font-weight:700;font-size:13px;padding:6px 11px; border-radius:999px;border:1.5px solid var(--line);background:var(--plate-2);color:var(--ink); text-decoration:none;min-height:34px;display:inline-flex;align-items:center}
.design .bchip:hover{border-color:var(--line-strong)}
.design .offer .go{margin-top:auto;font-family:var(--f-display);font-weight:700;font-size:15px; color:var(--blue-deep);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.design .offer .go:hover{text-decoration:underline}
.design .offer.wide{grid-column:1/-1}
.design .offer.wide .tag{background:var(--ink);color:var(--paper)}
.design .perks{display:grid;gap:12px}
@media(min-width:760px){.design .perks{grid-template-columns:repeat(3,1fr)}}
.design .perk2{padding:20px 18px;display:flex;flex-direction:column;gap:6px;text-align:left}
.design .perk2 .v{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,6vw,42px);line-height:1; color:var(--blue-deep);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.design .perk2 strong{font-family:var(--f-display);font-size:16.5px;margin-top:4px}
.design .perk2 p{margin:0;font-size:14.5px;color:var(--grey)}
.design .rules{display:grid;gap:10px;max-width:760px}
.design .rules li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15px; line-height:1.5;padding:13px 15px;border-radius:10px;background:var(--plate);border:1px solid var(--line)}
.design .rules .x{font-family:var(--f-display);font-weight:800;color:var(--blue-deep);font-size:15px}
.design .rules b{font-family:var(--f-display)}
.design .rules ul{margin:0;padding:0}
.design .dplate{margin-bottom:16px}
.design .dayrail button{min-height:54px}
.design .band .crumb{display:flex;width:fit-content;max-width:100%;background-color:color-mix(in srgb,var(--plate) 84%,transparent); backdrop-filter:saturate(155%) blur(9px);border-radius:999px;padding:6px 14px;align-items:center}
@supports not (backdrop-filter:blur(2px)){.design .band .crumb{background-color:color-mix(in srgb,var(--plate) 94%,transparent)}}
.design .lhero{padding-block:clamp(26px,5vw,46px) clamp(22px,3.6vw,34px)}
.design .lplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .lhero h1{font-size:clamp(24px,4.4vw,36px);font-weight:800;line-height:1.12;margin:0 0 10px; letter-spacing:-.025em}
.design .lhero .lede{margin-bottom:0;max-width:56ch}
.design .atglance{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:20px}
@media(min-width:860px){.design .atglance{grid-template-columns:repeat(4,1fr)}}
.design .gl{padding:15px 14px;display:flex;flex-direction:column;gap:3px}
.design .gl .v{font-family:var(--f-display);font-weight:800;font-size:clamp(16px,2.4vw,20px);line-height:1.12; color:var(--blue-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.design .gl .k{font-size:12.5px;color:var(--grey);font-weight:600;line-height:1.35}
.design .hoods{display:flex;flex-wrap:wrap;gap:8px}
.design .hood{padding:11px 15px;border-radius:10px;border:1.5px solid var(--line);background:var(--plate); display:flex;flex-direction:column;gap:1px;min-width:132px}
.design .hood b{font-family:var(--f-display);font-size:14.5px;line-height:1.2}
.design .hood span{font-size:12px;color:var(--grey);font-variant-numeric:tabular-nums;font-weight:600}
.design .transit{display:grid;gap:9px;max-width:760px}
.design .trow{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding:14px 16px; border-radius:11px;background:var(--plate);border:1px solid var(--line)}
.design .lines{display:flex;gap:5px;flex-wrap:wrap;flex:none}
.design .line{font-family:var(--f-display);font-weight:800;font-size:12.5px;min-width:30px;height:30px; padding:0 8px;border-radius:7px;display:grid;place-items:center;letter-spacing:.02em}
.design .line.bus{background:var(--ink);color:var(--paper)}
.design .line.rail{background:var(--blue-deep);color:#fff}
.design .line.rail2{background:var(--amber);color:#1A1205}
.design .trow .tx{font-size:14.5px;line-height:1.5}
.design .trow .tx b{font-family:var(--f-display)}
.design .trow .tx small{display:block;color:var(--grey);font-size:13px;margin-top:3px;line-height:1.45}
.design .insidegrid{display:grid;gap:14px}
@media(min-width:900px){.design .insidegrid{grid-template-columns:1fr 1fr;gap:20px;align-items:start}}
.design .inside{padding:20px 18px;display:grid;gap:13px}
.design .inside h3{margin:0}
.design .ir{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.design .ir .k{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--blue-deep);padding-top:3px;white-space:nowrap}
.design .ir p{margin:0;font-size:14.5px;line-height:1.5}
.design .ir b{font-variant-numeric:tabular-nums}
.design .mapplate2{padding:0;overflow:hidden}
.design .mapplate2 .map{aspect-ratio:4/3;background:var(--plate-2)}
.design .mapplate2 .map svg{width:100%;height:100%;display:block}
.design .mapplate2 .cap{padding:13px 16px;border-top:2px solid var(--line-strong);display:flex; flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:var(--grey);font-weight:600}
.design .mapplate2 .cap b{color:var(--ink);font-family:var(--f-display)}
.design .mapplate2 .cap a{color:var(--blue-deep);font-weight:700;text-decoration:none;margin-left:auto}
.design .mapplate2 .cap a:hover{text-decoration:underline}
@media(min-width:760px){.design .atglance.three{grid-template-columns:repeat(3,1fr)}}
.design .ahero{padding-block:clamp(26px,5vw,52px) clamp(28px,5vw,48px)}
.design .aplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .ahero h1{font-size:clamp(25px,4.8vw,40px);font-weight:800;line-height:1.1;margin:0 0 12px; letter-spacing:-.025em}
.design .ahero .lede{font-size:clamp(16px,2.1vw,18.5px);margin-bottom:0;max-width:52ch}
.design .statrow{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:20px}
@media(min-width:760px){.design .statrow{grid-template-columns:repeat(4,1fr)}}
.design .stat{padding:15px 14px;display:flex;flex-direction:column;gap:3px}
.design .stat .v{font-family:var(--f-display);font-weight:800;font-size:clamp(21px,3.4vw,27px);line-height:1; color:var(--blue-deep);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.design .stat .k{font-size:12.5px;color:var(--grey);font-weight:600;line-height:1.35}
.design .story{max-width:66ch}
.design .story p{font-size:clamp(16px,2vw,17.5px);line-height:1.62;margin-bottom:15px}
.design .story p:last-child{margin-bottom:0}
.design .pull{margin:22px 0 0;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.design .pull q{font-family:var(--f-display);font-weight:700;font-size:clamp(18px,3vw,24px);line-height:1.3; letter-spacing:-.02em;quotes:'\201C' '\201D';display:block}
.design .pull cite{font-style:normal;font-size:13px;color:var(--grey);font-weight:600}
.design .diffs{display:grid;gap:11px}
@media(min-width:620px){.design .diffs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.design .diffs{grid-template-columns:repeat(4,1fr)}}
.design .diff{padding:18px 17px;display:flex;flex-direction:column;gap:7px}
.design .diff .mk{font-family:var(--f-display);font-weight:800;font-size:11px;color:var(--paper); background:var(--ink);border-radius:6px;width:26px;height:26px;display:grid;place-items:center}
.design .diff h3{margin:4px 0 0;font-size:16.5px}
.design .diff p{margin:0;font-size:14.5px;color:var(--grey);line-height:1.5}
.design .grows{display:grid;gap:11px}
@media(min-width:760px){.design .grows{grid-template-columns:repeat(3,1fr)}}
.design .grow{padding:19px 17px;display:flex;flex-direction:column;gap:9px}
.design .grow .ic{width:42px;height:42px;border-radius:10px;background:var(--lav-soft);border:1px solid var(--line); display:grid;place-items:center}
.design .grow .ic svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round}
.design .grow h3{margin:2px 0 0;font-size:16.5px}
.design .grow .tagline{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--blue-deep);font-family:var(--f-display)}
.design .grow p{margin:0;font-size:14.5px;color:var(--grey);line-height:1.5}
.design .spec{padding:0;overflow:hidden;max-width:760px}
.design .spec .hd{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:14px 18px;border-bottom:2px solid var(--line-strong);background:var(--ink);color:var(--paper)}
.design .spec .hd h3{margin:0;font-size:15px;color:var(--paper);letter-spacing:.02em}
.design .spec .hd .st{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.1em; text-transform:uppercase;background:var(--cyan);color:#06222E;padding:4px 9px;border-radius:5px}
.design .spec dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:620px){.design .spec dl{grid-template-columns:auto 1fr}}
.design .spec dt{font-family:var(--f-display);font-weight:700;font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--grey);padding:13px 18px 3px}
@media(min-width:620px){.design .spec dt{padding:13px 8px 13px 18px;border-bottom:1px solid var(--line);white-space:nowrap}}
.design .spec dd{margin:0;padding:0 18px 13px;font-size:15px;line-height:1.45}
@media(min-width:620px){.design .spec dd{padding:13px 18px 13px 0;border-bottom:1px solid var(--line)}}
.design .spec dl>:nth-last-child(-n+2){border-bottom:0}
.design .spec dd b{font-variant-numeric:tabular-nums;font-family:var(--f-display);letter-spacing:.03em}
.design .spec .note{padding:12px 18px;font-size:13px;color:var(--grey);background:var(--plate-2); border-top:1px solid var(--line);line-height:1.45}
.design .ctaplate{padding:22px 20px;display:grid;gap:14px;max-width:760px}
.design .ctaplate h3{margin:0}
.design .ctaplate p{margin:0;font-size:15px;color:var(--grey)}
.design .locs{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.design .locs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.design .locs{grid-template-columns:repeat(3,1fr)}}
.design .loc{padding:20px 18px 18px;scroll-margin-top:96px;display:grid;gap:8px;align-content:start}
.design .loc h2{font-size:21px;margin:0}
.design .loc p{margin:0;font-size:14.5px;color:var(--grey);line-height:1.5}
.design .loc .btn-row{margin-top:6px}
.design .loc:target{outline:3px solid var(--blue);outline-offset:3px}
.design .fhero{padding-block:clamp(26px,5vw,44px) clamp(22px,3.6vw,34px)}
.design .fplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .fhero h1{font-size:clamp(24px,4.4vw,36px);font-weight:800;line-height:1.12;margin:0 0 10px; letter-spacing:-.025em}
.design .fhero .lede{margin-bottom:0;max-width:52ch}
.design .searchplate{padding:20px 19px;display:grid;gap:13px;max-width:760px;margin-top:20px}
.design .searchrow{position:relative;display:flex;gap:9px;flex-wrap:wrap}
.design .searchrow .wrapin{position:relative;flex:1;min-width:200px}
.design .searchrow input{width:100%;min-height:54px;padding:12px 44px 12px 46px;border-radius:10px; border:2px solid var(--line);background:var(--plate);color:var(--ink); font-family:var(--f-body);font-size:16px}
.design .searchrow input:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--line-strong)}
.design .searchrow .clr{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:32px;height:32px; border-radius:50%;border:0;background:var(--plate-2);color:var(--grey);cursor:pointer; font-size:17px;line-height:1;display:none;place-items:center}
.design .searchrow .clr[data-on="1"]{display:grid}
.design .searchrow .clr:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.design .jump{display:flex;flex-wrap:wrap;gap:6px}
.design .jump a{min-height:38px;padding:0 13px;border-radius:999px;border:1.5px solid var(--line); background:var(--plate);color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none; display:inline-flex;align-items:center;gap:6px}
.design .jump a:hover{border-color:var(--line-strong)}
.design .jump a b{color:var(--grey);font-variant-numeric:tabular-nums;font-weight:700;font-size:12px}
.design .jump a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.design .hits{font-size:13.5px;color:var(--grey);font-weight:600;min-height:20px}
.design .hits b{color:var(--ink);font-variant-numeric:tabular-nums}
.design .qgroup{margin-bottom:26px}
.design .qgroup:last-child{margin-bottom:0}
.design .qgroup>h3{font-size:clamp(17px,2.4vw,21px);margin:0 0 11px;display:flex;align-items:center;gap:10px; scroll-margin-top:calc(80px + env(safe-area-inset-top,0px))}
.design .qgroup>h3 .n{font-family:var(--f-display);font-weight:800;font-size:11px;color:var(--paper); background:var(--ink);border-radius:6px;min-width:26px;height:26px;display:grid;place-items:center; padding:0 7px;font-variant-numeric:tabular-nums;flex:none}
.design .qgroup[hidden]{display:none}
.design .q{border:1px solid var(--line);border-radius:11px;background:var(--plate);margin-bottom:8px; overflow:hidden}
.design .q[open]{border-color:var(--line-strong)}
.design .q[hidden]{display:none}
.design .q summary{cursor:pointer;padding:15px 17px;font-family:var(--f-display);font-weight:700; font-size:clamp(15.5px,2vw,16.5px);line-height:1.35;list-style:none;display:flex; justify-content:space-between;align-items:flex-start;gap:14px;min-height:54px}
.design .q summary::-webkit-details-marker{display:none}
.design .q summary::after{content:"+";font-size:21px;color:var(--blue-deep);font-weight:700;flex:none; line-height:1.1}
.design .q[open] summary::after{content:"\2212"}
.design .q summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.design .q .a{padding:0 17px 17px;font-size:15px;color:var(--grey);line-height:1.6}
.design .q .a p{margin:0 0 10px}
.design .q .a p:last-child{margin-bottom:0}
.design .q .a strong{color:var(--ink)}
.design .q .a ul{margin:0 0 10px;padding-left:19px;display:grid;gap:5px}
.design .q .a a{color:var(--blue-deep);font-weight:600}
.design .q mark{background:color-mix(in srgb,var(--amber) 42%,transparent);color:inherit; padding:0 2px;border-radius:3px}
.design .noresults{padding:34px 22px;text-align:center;border:1px dashed var(--lav);border-radius:12px; background:var(--lav-soft);display:none}
.design .noresults[data-on="1"]{display:block}
.design .noresults b{display:block;font-family:var(--f-display);font-size:18px;color:var(--ink);margin-bottom:6px}
.design .noresults p{margin:0 0 14px;font-size:15px;color:var(--grey)}
.design .stuck{padding:22px 20px;display:grid;gap:14px;max-width:760px}
.design .stuck h3{margin:0}
.design .stuck p{margin:0;font-size:15px;color:var(--grey)}
.design .chero{padding-block:clamp(26px,5vw,48px) clamp(24px,4vw,40px)}
.design .cplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .chero h1{font-size:clamp(24px,4.4vw,36px);font-weight:800;line-height:1.12;margin:0 0 10px; letter-spacing:-.025em}
.design .chero .lede{margin-bottom:0;max-width:52ch}
.design .actions{display:grid;gap:11px;margin-top:20px}
@media(min-width:700px){.design .actions{grid-template-columns:repeat(3,1fr)}}
.design .act{padding:18px 17px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink); transition:transform .15s ease,box-shadow .15s ease}
.design .act:hover{transform:translateY(-3px);box-shadow:0 10px 0 -5px var(--lav),var(--plate-shadow)}
.design .act:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.design .act .ic{width:40px;height:40px;border-radius:10px;background:var(--ink);display:grid;place-items:center}
.design .act .ic svg{width:19px;height:19px;stroke:var(--paper);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round}
.design .act .k{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--grey)}
.design .act .v{font-family:var(--f-display);font-weight:800;font-size:clamp(19px,2.6vw,23px);line-height:1.1; letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.design .act p{margin:0;font-size:14px;color:var(--grey);line-height:1.45}
.design .act .go{margin-top:auto;padding-top:8px;font-family:var(--f-display);font-weight:700;font-size:14.5px; color:var(--blue-deep);display:inline-flex;gap:7px;align-items:center}
.design .act:hover .go{text-decoration:underline}
.design .findgrid{display:grid;gap:14px}
@media(min-width:900px){.design .findgrid{grid-template-columns:1.05fr .95fr;gap:20px;align-items:start}}
.design .mapplate{padding:0;overflow:hidden}
.design .mapplate .map{aspect-ratio:4/3;background:var(--plate-2)}
.design .mapplate .map svg{width:100%;height:100%;display:block}
.design .mapplate .cap{padding:13px 16px;border-top:2px solid var(--line-strong);display:flex; flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:var(--grey);font-weight:600}
.design .gettinghere{padding:20px 18px;display:grid;gap:14px}
.design .gettinghere h3{margin:0}
.design .gh{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.design .gh .k{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--blue-deep);padding-top:3px;white-space:nowrap}
.design .gh p{margin:0;font-size:14.5px;line-height:1.5}
.design .gh b{font-variant-numeric:tabular-nums}
.design .formwrap{display:grid;gap:14px}
@media(min-width:900px){.design .formwrap{grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}}
.design .formplate{padding:20px 19px}
.design .sidecard{padding:19px 18px;display:grid;gap:13px}
.design .sidecard h3{margin:0;font-size:16.5px}
.design .sidecard p{margin:0;font-size:14.5px;color:var(--grey);line-height:1.5}
.design .sidecard .warn{padding:13px 14px;border-radius:9px;background:var(--lav-soft); border:1px solid var(--lav);font-size:14px;color:var(--ink);line-height:1.5}
.design .sidecard .warn b{font-family:var(--f-display)}
.design .other{display:grid;gap:11px}
@media(min-width:620px){.design .other{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.design .other{grid-template-columns:repeat(4,1fr)}}
.design .oth{padding:17px 16px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.design .oth strong{font-family:var(--f-display);font-size:15.5px;display:flex;justify-content:space-between; gap:10px;align-items:center}
.design .oth p{margin:0;font-size:14px;color:var(--grey);line-height:1.45}
.design .oth:hover{box-shadow:0 10px 0 -5px var(--lav),var(--plate-shadow);transform:translateY(-2px)}
.design .oth{transition:transform .15s ease,box-shadow .15s ease}
.design .oth:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.design .mhero{padding-block:clamp(26px,5vw,46px) clamp(22px,3.6vw,34px)}
.design .mplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .mhero h1{font-size:clamp(24px,4.4vw,36px);font-weight:800;line-height:1.12;margin:0 0 10px; letter-spacing:-.025em}
.design .mhero .lede{margin-bottom:0;max-width:56ch}
.design .notice{padding:17px 18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start; margin-top:20px;max-width:760px;border-style:dashed}
.design .notice .ic{width:34px;height:34px;border-radius:9px;background:var(--lav-soft);border:1px solid var(--line); display:grid;place-items:center;flex:none}
.design .notice .ic svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round}
.design .notice p{margin:0;font-size:14.5px;line-height:1.55}
.design .notice strong{font-family:var(--f-display)}
.design .cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.design .cmptable{width:100%;border-collapse:collapse;min-width:620px;background:var(--plate); border:2px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.design .cmptable th,.design .cmptable td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line); font-size:14.5px;line-height:1.45;vertical-align:top}
.design .cmptable thead th{background:var(--ink);color:var(--paper);font-family:var(--f-display); font-weight:800;font-size:13.5px;letter-spacing:.01em;border-bottom:0;vertical-align:bottom}
.design .cmptable thead th small{display:block;font-family:var(--f-body);font-weight:500;font-size:11.5px; opacity:.75;margin-top:3px;letter-spacing:0}
.design .cmptable tbody th{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.07em; text-transform:uppercase;color:var(--grey);white-space:nowrap;background:var(--plate-2)}
.design .cmptable tr:last-child th,.design .cmptable tr:last-child td{border-bottom:0}
.design .cmptable td b{font-variant-numeric:tabular-nums;font-family:var(--f-display)}
.design .cmptable .good{color:var(--blue-deep);font-weight:700}
.design .cmptable .na{color:var(--grey)}
.design .tablenote{font-size:12.5px;color:var(--grey);margin:10px 0 0;line-height:1.5}
.design .tablenote code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--plate); border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.design .docs{display:grid;gap:12px}
@media(min-width:800px){.design .docs{grid-template-columns:repeat(2,1fr)}}
.design .doc{padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.design .doc .tag3{font-family:var(--f-display);font-weight:800;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;padding:4px 9px;border-radius:5px;align-self:flex-start}
.design .doc .tag3.a{background:var(--lav-soft);color:var(--ink);border:1px solid var(--line)}
.design .doc .tag3.b{background:var(--cyan);color:#06222E}
.design .doc h3{margin:0;font-size:17.5px}
.design .doc p{margin:0;font-size:14.5px;line-height:1.5;color:var(--grey)}
.design .doc ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px;line-height:1.45;color:var(--grey)}
.design .doc ul b{color:var(--ink);font-family:var(--f-display)}
.design .boundary{display:grid;gap:12px}
@media(min-width:800px){.design .boundary{grid-template-columns:repeat(2,1fr)}}
.design .bcard{padding:20px 18px;display:grid;gap:11px}
.design .bcard h3{margin:0;font-size:17px;display:flex;align-items:center;gap:10px}
.design .bcard h3 .mk2{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none; font-size:15px;font-weight:800;font-family:var(--f-display)}
.design .bcard.can h3 .mk2{background:var(--cyan);color:#06222E}
.design .bcard.cant h3 .mk2{background:var(--ink);color:var(--paper)}
.design .bcard ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.design .bcard li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14.5px;line-height:1.5}
.design .bcard li .d{color:var(--lav);font-weight:800}
.design .formats{display:grid;gap:11px}
@media(min-width:620px){.design .formats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.design .formats{grid-template-columns:repeat(4,1fr)}}
.design .fmt{padding:17px 16px;display:flex;flex-direction:column;gap:7px}
.design .fmt .cnt{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1; color:var(--blue-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.design .fmt h3{margin:2px 0 0;font-size:16px}
.design .fmt p{margin:0;font-size:14px;color:var(--grey);line-height:1.5;flex:1}
.design .fmt .how{font-size:12.5px;font-weight:700;font-family:var(--f-display);color:var(--grey); letter-spacing:.04em;text-transform:uppercase;padding-top:6px;border-top:1px solid var(--line)}
.design .rhero{padding-block:clamp(26px,5vw,48px) clamp(24px,4vw,40px)}
.design .rplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .rhero h1{font-size:clamp(24px,4.4vw,36px);font-weight:800;line-height:1.12;margin:0 0 10px; letter-spacing:-.025em}
.design .rhero .lede{margin-bottom:0;max-width:54ch}
.design .bhero{padding-block:clamp(26px,5vw,46px) clamp(20px,3.4vw,32px)}
.design .bplate{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 11px;margin-bottom:16px}
.design .bhero h1{font-size:clamp(24px,4.4vw,36px);font-weight:800;line-height:1.12;margin:0 0 10px; letter-spacing:-.025em}
.design .bhero .lede{margin-bottom:0;max-width:54ch}
.design .filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.design .filters button{min-height:42px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line); background:var(--plate);color:var(--ink);font-family:var(--f-display);font-weight:700; font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.design .filters button b{font-variant-numeric:tabular-nums;color:var(--grey);font-weight:700;font-size:12px}
.design .filters button:hover{border-color:var(--line-strong)}
.design .filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.design .filters button[aria-pressed="true"] b{color:var(--lav)}
.design .filters button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.design .feat{padding:0;overflow:hidden;display:grid;margin-bottom:14px; text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.design .feat:hover{transform:translateY(-3px);box-shadow:0 10px 0 -5px var(--lav),var(--plate-shadow)}
.design .feat:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.design .feat[hidden]{display:none}
@media(min-width:840px){.design .feat{grid-template-columns:1.05fr .95fr}}
.design .feat .art{aspect-ratio:16/10;background:var(--lav-soft);position:relative;overflow:hidden; border-bottom:2px solid var(--line-strong)}
@media(min-width:840px){.design .feat .art{aspect-ratio:auto;border-bottom:0;border-right:2px solid var(--line-strong)}}
.design .feat .art svg{width:100%;height:100%;display:block}
.design .feat .bd{padding:22px 21px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.design .feat .tagline2{font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--blue-deep);display:flex;align-items:center;gap:9px}
.design .feat .tagline2::before{content:"";width:20px;height:2px;background:var(--lav)}
.design .feat h2{margin:0;font-size:clamp(21px,3.4vw,30px);line-height:1.15;letter-spacing:-.025em}
.design .feat p{margin:0;font-size:15.5px;line-height:1.55;color:var(--grey)}
.design .feat .go2{margin-top:4px;font-family:var(--f-display);font-weight:700;font-size:15.5px; color:var(--blue-deep);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.design .feat:hover .go2{text-decoration:underline}
.design .posts{display:grid;gap:12px}
@media(min-width:620px){.design .posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.design .posts{grid-template-columns:repeat(3,1fr)}}
.design .post{padding:0;overflow:hidden;display:flex;flex-direction:column;text-decoration:none; color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.design .post:hover{transform:translateY(-3px);box-shadow:0 10px 0 -5px var(--lav),var(--plate-shadow)}
.design .post:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.design .post[hidden]{display:none}
.design .post .art{aspect-ratio:16/9;background:var(--lav-soft);border-bottom:2px solid var(--line-strong)}
.design .post .art svg{width:100%;height:100%;display:block}
.design .post .bd{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.design .post .cat{font-family:var(--f-display);font-weight:800;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--blue-deep)}
.design .post h3{margin:0;font-size:17px;line-height:1.28;letter-spacing:-.015em}
.design .post p{margin:0;font-size:14px;line-height:1.5;color:var(--grey);flex:1}
.design .post .rd{font-family:var(--f-display);font-weight:700;font-size:13.5px;color:var(--blue-deep); display:inline-flex;gap:7px;align-items:center;margin-top:2px}
.design .planned{display:grid;gap:9px}
@media(min-width:760px){.design .planned{grid-template-columns:repeat(2,1fr)}}
.design .plan{padding:15px 16px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; border-style:dashed}
.design .plan .n2{font-family:var(--f-display);font-weight:800;font-size:11px;color:var(--grey); border:1.5px dashed var(--line);border-radius:6px;min-width:26px;height:26px;display:grid; place-items:center;font-variant-numeric:tabular-nums;flex:none}
.design .plan strong{display:block;font-family:var(--f-display);font-size:15.5px;line-height:1.3}
.design .plan span{display:block;font-size:13.5px;color:var(--grey);margin-top:3px;line-height:1.45}