body.pints { display: block; height: auto; overflow: auto; background: var(--ivory); }
.pt-main { max-width: 1140px; margin: 0 auto; padding: 0 16px 60px; }
.pt-hero { background: radial-gradient(120% 140% at 0% 0%, #17345A, #081729 70%); color: #DCE3EE; border-radius: 0 0 22px 22px; padding: 34px 26px 26px; margin: 0 -16px; }
.pt-hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.2rem); margin: 4px 0 8px; }
.pt-hero p { max-width: 640px; }
.pt-eyebrow { font: 700 12px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0; }
.pt-result .pt-eyebrow { color: var(--gold-ink); }
.pt-tabs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pt-tabs button { font: 700 15px var(--body); min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(201,169,97,.6); background: transparent; color: #fff; cursor: pointer; }
.pt-tabs button[aria-selected="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; align-items: start; }
.pt-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 10px; }
.pt-card h2 { font-size: 22px; }
.pt-card select { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; min-height: 44px; }
.pt-drop { position: relative; display: grid; place-items: center; min-height: 180px; border: 2px dashed var(--line); border-radius: 14px; background: #FBF7EE; cursor: pointer; overflow: hidden; text-align: center; padding: 12px; }
.pt-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pt-drop img { max-height: 320px; max-width: 100%; border-radius: 10px; }
.pt-drop span { display: grid; gap: 4px; }
.pt-drop small { color: var(--muted); }
.pt-small { font-size: 13px; color: var(--muted); margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.check input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.err { color: var(--danger); font-weight: 600; min-height: 1em; margin: 0; }
.btn.big { width: 100%; min-height: 52px; font-size: 16px; }
.btn.gold { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 700; }
.pt-result { text-align: center; justify-items: center; }
.pt-score { display: flex; align-items: baseline; gap: 4px; }
.pt-score b { font: 700 80px/1 var(--display); color: var(--navy); }
.pt-score span { font: 700 24px var(--display); color: var(--muted); }
.pt-meter { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; font-size: 13px; font-weight: 700; }
.pt-meter div { position: relative; flex: 1; height: 12px; border-radius: 999px; background: #1a1410; overflow: hidden; }
.pt-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: #F1E3C6; }
.pt-meter em { position: absolute; left: 30%; width: 20%; top: 0; bottom: 0; border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pt-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.pt-rank { min-width: 24px; width: auto; white-space: nowrap; font: 700 18px var(--display); color: var(--gold-ink); text-align: center; flex: none; }
.pt-pub { flex: 1; display: grid; min-width: 0; }
.pt-pub small { color: var(--muted); }
.pt-badge { font: 700 12px var(--body); background: #FBF4E2; color: #7E6428; border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.pt-avg { font: 700 20px var(--display); color: var(--navy); min-width: 40px; text-align: right; }
.pt-maplink { font-weight: 700; }
.pt-gallery-wrap { margin-top: 28px; }
.pt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.pt-gallery figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pt-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pt-gallery figcaption { padding: 6px 8px; font-size: 13px; }
.pt-biz { margin-top: 28px; background: var(--navy); color: #DCE3EE; border-radius: 18px; padding: 20px 22px; border-left: 4px solid var(--gold); }
.pt-biz h2 { color: var(--gold); font-size: 22px; }
.pt-biz a { color: var(--gold); }
@media (max-width: 820px) { .pt-grid { grid-template-columns: 1fr; } }

.pt-photo { display: grid; gap: 10px; justify-items: center; border: 2px dashed var(--line); border-radius: 14px; background: #FBF7EE; padding: 14px; text-align: center; }
.pt-photo img { max-height: 300px; max-width: 100%; border-radius: 10px; }
.pt-photo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.pt-pick { position: relative; overflow: hidden; min-height: 48px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pt-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.pt-taste { border: 0; padding: 0; margin: 0; }
.pt-taste legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }
.pt-taste legend span { font: 700 16px var(--display); color: var(--gold-ink); }
.pt-pints { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.pt-pints button { border: 0; background: none; padding: 4px 0; min-height: 48px; cursor: pointer; border-radius: 8px; }
.pt-pints button:focus-visible { outline: 3px solid var(--gold); }
.pt-pints svg { width: 100%; max-width: 28px; height: auto; display: block; margin: 0 auto; }
.pt-pints .g { fill: #fff; stroke: #B9AE98; stroke-width: 1.2; }
.pt-pints .b, .pt-pints .h { fill: transparent; }
.pt-pints .on .g { stroke: #1a1410; }
.pt-pints .on .b { fill: #1a1410; }
.pt-pints .on .h { fill: #F1E3C6; }
.pt-avg { display: grid; justify-items: end; min-width: 44px; }
.pt-avg b { font: 700 18px var(--display); color: var(--navy); }
.pt-avg small { font-size: 11px; color: var(--muted); }
.pt-taste-res { margin: 0; }

.pt-hero a { color: var(--gold); }
.pt-award { margin-top: 28px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: center; background: var(--navy); color: #DCE3EE; border-radius: 18px; padding: 24px; border-left: 4px solid var(--gold); }
.pt-plaque { width: 240px; max-width: 100%; }
.pt-plaque svg { width: 100% !important; height: auto !important; max-width: 240px; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.pt-award h2 { color: #fff; font-size: 24px; margin: 4px 0 10px; }
.pt-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.pt-steps b { color: var(--gold); }
.pt-award .pt-small { color: #AFC0D6; }
.pt-award a { color: var(--gold); }
@media (max-width: 760px) { .pt-award { grid-template-columns: 1fr; justify-items: center; } .pt-award-copy { justify-self: stretch; } .pt-plaque { width: 200px; } }
.pt-plaque svg, .pt-pints svg { stroke: none; fill: none; }
.pt-pints svg { width: 100% !important; height: auto !important; }
.pt-plaque { width: 240px; }

/* Rate My Irish Pint page */
.rt-pub { margin-top: 14px; max-width: 420px; color: #fff; }
.rt-pub select { margin-top: 4px; }
.rt-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.rt-modes button { min-height: 52px; border-radius: 14px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font: 700 16px var(--body); cursor: pointer; }
.rt-modes button[aria-selected="true"] { background: var(--navy); color: var(--gold); }
.rt-panel .pt-grid { margin-top: 14px; }
.sg-stage { position: relative; width: 100%; cursor: crosshair; touch-action: manipulation; }
.sg-stage img { display: block; width: 100%; max-height: none; border-radius: 10px; }
.sg-marks { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; fill: none; stroke: none; }
.sg-step { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700; }
.sg-tips { margin-top: 28px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.sg-tips h2 { font-size: 26px; margin: 4px 0 10px; }
.sg-tips .pt-eyebrow { color: var(--gold-ink); }
.sg-illus { width: 100% !important; height: auto !important; max-width: 200px; fill: none; stroke: none; }
.sg-list { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 10px; }
.sg-list b { color: var(--navy); }
.rt-guide { display: block; margin-top: 18px; text-align: center; font-weight: 700; padding: 14px; border-radius: 14px; background: var(--navy); color: var(--gold); text-decoration: none; }
.pt-ctas { display: grid; gap: 12px; align-content: start; }
.pt-cta { display: grid; gap: 4px; padding: 20px; border-radius: 18px; background: var(--navy); color: #DCE3EE; text-decoration: none; border-left: 4px solid var(--gold); }
.pt-cta b { font: 700 22px var(--display); color: #fff; }
.pt-cta.split { background: #1F5A4A; border-left-color: #F1E3C6; }
.pt-split-row { border: 0 !important; padding: 0 12px 6px !important; font-size: 13px; color: var(--gold-ink); margin-top: -4px; }
@media (max-width: 760px) { .sg-tips { grid-template-columns: 1fr; justify-items: center; } .sg-tips > div:last-child { justify-self: stretch; } }

/* Pint reel */
.pt-reel-wrap { margin-top: 28px; }
.pt-reel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pt-reel-ctl { display: flex; gap: 6px; }
.pt-rbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 700 20px var(--body); color: var(--navy); cursor: pointer; }
.pt-reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.pt-reel:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.rl-slide { scroll-snap-align: start; border-radius: 18px; overflow: hidden; margin: 0; min-height: 380px; position: relative; }
.rl-card { background: linear-gradient(180deg, #F1E3C6 0 16%, #1F5A4A 16% 100%); color: #E3EFE9; padding: 72px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.rl-glass { position: absolute; top: 14px; right: 16px; width: 26px; height: 36px; background: linear-gradient(#F6E7B4 0 25%, #0b0806 25%); clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); border-radius: 2px; }
.rl-area { margin: 0; font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rl-card h3 { color: #fff; font-size: 24px; margin: 0; }
.rl-fact { margin: 0; font: 600 italic 16px var(--display); color: #F1E3C6; }
.rl-about { margin: 0; font-size: 14px; line-height: 1.45; color: #CFE3DA; flex: 1; }
.rl-stats { margin: 0; font-size: 13px; color: #CFE3DA; }
.rl-stats b { color: #fff; }
.rl-go { font-weight: 700; color: var(--gold); text-decoration: none; }
.rl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.rl-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; display: grid; gap: 2px; font-size: 13px; }
.rl-photo figcaption b { font-size: 16px; }
.rl-card.has-img { background: #1F5A4A; padding-top: 200px; }
.rl-card .rl-bg { position: absolute; left: 0; right: 0; top: 0; height: 190px; width: 100%; object-fit: cover; }
.rl-card.has-img::before { content: ""; position: absolute; left: 0; right: 0; top: 130px; height: 62px; background: linear-gradient(transparent, #1F5A4A); }
.rl-card > *:not(.rl-bg):not(.rl-glass):not(.rl-credit) { position: relative; }
.rl-credit { position: absolute !important; top: 168px; right: 8px; font-size: 10px; color: rgba(255,255,255,.8); }
.rt-pub { display: grid; width: 100%; min-width: 0; }
.rt-pub select { width: 100%; min-width: 0; max-width: 100%; }
.pt-hero { overflow: hidden; }
.pt-main { overflow-x: hidden; }
.faq-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold); }
.pt-result .faq-link, .pt-card .faq-link { color: #1F5A4A; }

/* Grand pint FAQ */
.gp-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.gp-scale div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; display: grid; gap: 2px; }
.gp-scale b { font: 700 22px var(--display); color: var(--navy); }
.gp-scale span { font-size: 13px; color: var(--muted); }
.gp-scale .on { background: #1F5A4A; border-color: #1F5A4A; }
.gp-scale .on b, .gp-scale .on span { color: #fff; }
.gp-faq { margin-top: 18px; display: grid; gap: 8px; }
.gp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
.gp-faq summary { cursor: pointer; list-style: none; font: 700 18px var(--display); color: var(--navy); padding: 14px 0; min-height: 44px; display: flex; gap: 10px; align-items: center; }
.gp-faq summary::-webkit-details-marker { display: none; }
.gp-faq summary::after { content: "+"; margin-left: auto; font: 700 22px var(--body); color: var(--gold-ink); }
.gp-faq details[open] summary::after { content: "–"; }
.gp-faq p { margin: 0 0 16px; line-height: 1.6; }
.gp-check { margin-top: 22px; background: #1F5A4A; color: #E3EFE9; border-radius: 18px; padding: 22px; }
.gp-check h2 { color: #fff; font-size: 24px; margin-bottom: 10px; }
.gp-check ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.gp-check .pt-small { color: #CFE3DA; margin-top: 12px; }
.gp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-btns .btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.gp-btns .btn.ghost { background: #fff; color: var(--navy); }
@media (max-width: 600px) { .gp-scale { grid-template-columns: repeat(2, 1fr); } .gp-check ul, .gp-btns { grid-template-columns: 1fr; } }
.pints [hidden] { display: none !important; }

/* PourScan result */
.ps-detail { width: 100%; text-align: left; display: grid; gap: 10px; }
.ps-img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; background: #0B1E36; }
.ps-stats { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.ps-h { font-size: 17px; margin: 4px 0 0; }
.ps-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-bars li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 13.5px; }
.ps-bars i { height: 10px; border-radius: 999px; background: #EFE8D8; overflow: hidden; }
.ps-bars i b { display: block; height: 100%; border-radius: 999px; }
.ps-bars .hi { background: #1F5A4A; } .ps-bars .mid { background: #C9A961; } .ps-bars .lo { background: #B4527A; }
.ps-bars em { font-style: normal; font-weight: 700; text-align: right; color: var(--navy); }
.ps-notes { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; }
.ps-notes li.best, .ps-notes li.worst { list-style: none; margin-left: -18px; font-weight: 600; }
.ps-tip { margin: 0; background: #E3F1E8; border: 1px solid #A8D4B6; border-radius: 12px; padding: 10px 12px; font-size: 14px; }

/* T.I.P brand */
.tip .pt-hero { background: radial-gradient(120% 140% at 0% 0%, #2a211c, #0b0806 70%); }
.tip .pt-tabs button[aria-selected="true"] { background: #F1E3C6; border-color: #F1E3C6; color: #100c0a; }
.tip-landing { background: #F6F1E7; }
.tl-hero { background: radial-gradient(110% 120% at 80% 30%, #2a211c 0%, #0b0806 65%); color: #E8DCC4; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: center; padding: 56px max(20px, calc((100vw - 1100px) / 2)); }
.tl-kicker { margin: 0; font: 700 13px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tl-hero h1 { color: #fff; font-size: clamp(3rem, 9vw, 6rem); margin: 8px 0 0; line-height: 1; }
.tl-hero h1 span { color: #F1E3C6; }
.tl-sub { font: italic 400 clamp(1.1rem, 2.4vw, 1.45rem) var(--display); margin: 16px 0 0; max-width: 34ch; }
.tl-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.tl-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 14px; font: 700 17px var(--body); text-decoration: none; }
.tl-btn.cream { background: #F1E3C6; color: #100c0a; }
.tl-btn.line { border: 2px solid #F1E3C6; color: #F1E3C6; }
.tl-small { font-size: 13px; color: #A99C86; margin-top: 14px; }
.tl-art { display: grid; place-items: center; }
.tip-glass { width: min(220px, 60vw) !important; height: auto !important; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.tl-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px 0; }
.tl-h { font-size: 28px; margin-bottom: 14px; }
.tl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tl-card { display: grid; gap: 8px; align-content: start; background: #fff; border: 1px solid var(--line); border-top: 5px solid #100c0a; border-radius: 16px; padding: 18px; text-decoration: none; color: var(--ink); }
.tl-card > b { font: 700 21px var(--display); }
.tl-card span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.tl-card em { font-style: normal; font-weight: 700; color: #1F5A4A; }
.tl-city-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tl-city-row a { display: grid; gap: 4px; background: #100c0a; color: #E8DCC4; border-radius: 14px; padding: 16px; text-decoration: none; border-bottom: 4px solid #F1E3C6; }
.tl-city-row b { font: 700 22px var(--display); color: #fff; }
.tl-city-row span { font-size: 14px; color: #A99C86; }
.tl-tip { font: italic 600 clamp(1.2rem, 3vw, 1.6rem) var(--display); color: var(--ink); background: #fff; border-left: 6px solid var(--gold); border-radius: 12px; padding: 18px 20px; margin: 0 0 10px; }
.tl-more { font-weight: 700; color: #1F5A4A; }
.tl-pubs p { background: #1F5A4A; color: #E3EFE9; border-radius: 16px; padding: 18px 20px; margin: 0; }
.tl-pubs a { color: #F1E3C6; }
.tl-foot { max-width: 1100px; margin: 36px auto 0; padding: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.tl-foot a { color: #1F5A4A; }
@media (max-width: 820px) { .tl-hero { grid-template-columns: 1fr; text-align: center; padding-top: 36px; } .tl-ctas { justify-content: center; } .tl-sub { margin-left: auto; margin-right: auto; } .tl-cards, .tl-city-row { grid-template-columns: 1fr; } .tl-art { order: -1; } .tip-glass { width: 150px !important; } }
.pt-plaque { width: 260px; }
.pt-plaque svg { max-width: 260px !important; }

/* T.I.P palette: deep teal and antique gold */
body.tip { --navy: #0B4A3A; --navy-2: #13664F; --ink: #0B4A3A; --gold: #DDB447; --gold-ink: #7A5C1E; --gold-soft: #F6EEDB; --ivory: #FBF7EC; --line: #E3DCC6; --navy-soft: #EAF2EA; background: #FBF7EC; }
.tip .pt-hero, .tl-hero { background: radial-gradient(120% 140% at 15% 0%, #13664F, #032A21 70%); color: #EEF5EE; }
.tip .pt-tabs button { border-color: rgba(221,180,71,.7); }
.tip .pt-tabs button[aria-selected="true"] { background: #DDB447; border-color: #DDB447; color: #032A21; }
.tl-hero { color: #EEF5EE; }
.tl-hero h1 span { color: #E9C171; }
.tl-btn.cream { background: #DDB447; color: #032A21; }
.tl-btn.line { border-color: #BFD9C9; color: #EEF5EE; }
.tl-small { color: #BFD9C9; }
.tl-card { border-top-color: #DDB447; }
.tl-card em, .tl-more, .tl-foot a { color: #13664F; }
.tl-city-row a { background: #0B4A3A; color: #EEF5EE; border-bottom-color: #DDB447; }
.tl-city-row span { color: #BFD9C9; }
.tl-pubs p { background: #13664F; color: #FBF7EC; }
.tl-pubs a { color: #F3DD94; }
.tip .pt-cta.split { background: #13664F; border-left-color: #BFD9C9; }
.tip .rl-card { background: linear-gradient(180deg, #F0D58C 0 16%, #0B4A3A 16% 100%); color: #EEF5EE; }
.tip .rl-card.has-img { background: #0B4A3A; }
.tip .rl-card.has-img::before { background: linear-gradient(transparent, #0B4A3A); }
.tip .gp-scale .on, .tip .gp-check { background: #0B4A3A; border-color: #0B4A3A; }
.tip .ps-bars .hi { background: #13664F; }
.tip .ps-img { background: #032A21; }
.tip .ps-tip { background: #EAF2EA; border-color: #BFD9C9; }
.pt-plaque { width: 300px; margin: 0; display: grid; gap: 8px; justify-items: center; }
.pt-plaque img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
.pt-plaque figcaption, .pt-door figcaption { font-size: 13px; color: #BFD9C9; text-align: center; }
.pt-door { margin: 14px 0 0; display: grid; gap: 6px; }
.pt-door img { width: 100%; height: auto; border-radius: 12px; display: block; }
.pt-door figcaption { text-align: left; }
.pt-award { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 720px) { .pt-award { grid-template-columns: 1fr; } .pt-plaque { width: min(300px, 80vw); justify-self: center; } }
.pt-door img { border-radius: 0; max-width: 520px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }

/* Grand Pint FAQ: selectable score ranges and checklist */
.gp-scale-wrap { margin-top: 18px; }
.gp-h { font-size: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.gp-h small { font: 500 14px var(--body); color: var(--muted); }
.gp-scale { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-scale button { --c: #13664F; --t: #fff; font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: 14px; padding: 12px 8px; min-height: 76px; display: grid; gap: 2px; text-align: center; color: var(--ink); transition: background .15s, transform .15s; }
.gp-scale button b { font: 700 21px var(--display); color: var(--navy); }
.gp-scale button span { font-size: 13px; color: var(--muted); }
.gp-scale button:hover { transform: translateY(-1px); }
.gp-scale button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gp-scale button[aria-pressed="true"] { background: var(--c); border-color: var(--c); box-shadow: 0 8px 18px rgba(11,74,58,.22); }
.gp-scale button[aria-pressed="true"] b, .gp-scale button[aria-pressed="true"] span { color: var(--t); }
.r-master { --c: #DDB447 !important; --t: #032A21 !important; }
.r-perfect { --c: #F0D58C !important; --t: #032A21 !important; }
.r-grand { --c: #13664F !important; }
.r-decent { --c: #BFD9C9 !important; --t: #032A21 !important; }
.r-settle { --c: #8FB3A0 !important; --t: #032A21 !important; }
.r-bar { --c: #4A5560 !important; }
.gp-band { --c: #13664F; margin-top: 10px; background: #fff; border: 1px solid var(--line); border-left: 8px solid var(--c); border-radius: 14px; padding: 16px 18px; }
.gp-band h3 { font-size: 22px; color: var(--navy); }
.gp-band h3 small { font: 600 14px var(--body); color: var(--muted); margin-left: 6px; }
.gp-band dl { margin: 10px 0 0; display: grid; gap: 2px; }
.gp-band dt { font-weight: 700; color: var(--navy); margin-top: 8px; }
.gp-band dd { margin: 0; line-height: 1.55; }
.gp-read { margin: 12px 0 0; font-size: 14px; }
.gp-read a { color: #13664F; font-weight: 700; }
.gp-check-sub { margin: -4px 0 12px; color: #D7E6DA; }
.gp-check ul label { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(191,217,201,.35); cursor: pointer; }
.gp-check ul li.on label { background: #13664F; border-color: #DDB447; }
.gp-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: #DDB447; flex: 0 0 auto; }
.gp-result { margin: 4px 0 16px; }
.gp-result p { margin: 8px 0 0; color: #FBF7EC; }
.gp-result b { color: #E9C171; }
.gp-meter { height: 10px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.gp-meter i { display: block; height: 100%; background: #DDB447; border-radius: 999px; transition: width .25s; }
.gp-reset { margin-top: 8px; font: 600 14px var(--body); background: none; border: 1px solid #BFD9C9; color: #EEF5EE; border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
@media (max-width: 600px) { .gp-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* T.I.P palette clean-up: every colour from teal, aqua, gold and sand */
body.tip { --text: #0B1A2A; --muted: #4A5560; }
.tip .pt-award, .tip .pt-cta, .tip .pt-biz, .tip .rl-card, .tip .gp-check { color: #EEF5EE; }
.tip .pt-award .pt-small, .tip .gp-check .pt-small, .tip .gp-check-sub { color: #BFD9C9; }
.tip .pt-meter div { background: #032A21; }
.tip .pt-meter i { background: #F0D58C; }
.tip .pt-pints .on .g { stroke: #10181B; }
.tip .pt-pints .on .b { fill: #10181B; }
.tip .rl-fact { color: #E9C171; }
.tip .rl-about, .tip .rl-stats { color: #D7E6DA; }
.tip .ps-bars .hi { background: #13664F; }
.tip .ps-bars .mid { background: #DDB447; }
.tip .ps-bars .lo { background: #8FB3A0; }
.tip .pt-badge { background: #F6EEDB; color: #7A5C1E; }
.tip select, .tip input { color: #0B1A2A; }
.tip .pt-photo, .tip .pt-drop { background: #FBF7EC; border-color: #BFD9C9; }
.tip .btn.ghost { background: #fff; color: #0B4A3A; border-color: #E3DCC6; }

/* Split the T.I.P: draggable lines */
.sg-stage { cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 10px; }
.sg-stage img { pointer-events: none; }
.sg-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #E9C171; pointer-events: none; }
.sg-line span { position: absolute; right: 6px; top: -13px; font: 700 11px var(--body); letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: #032A21; color: #E9C171; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.sg-line.sg-bottom span { top: 4px; }
.sg-line.sg-target { border-top: 3px solid #DDB447; opacity: .9; }
.sg-line.sg-target span { left: 6px; right: auto; background: #DDB447; color: #032A21; }
.sg-line.sg-yours { border-top: 3px solid #fff; }
.sg-line.sg-yours span { background: #fff; color: #032A21; }
.sg-line.sel { filter: drop-shadow(0 0 4px rgba(233,193,113,.9)); }
.sg-line.sel span { outline: 2px solid #E9C171; }
.sg-mark { display: grid; gap: 10px; }
.sg-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sg-pick button, .sg-nudge button { font: 700 14px var(--body); min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; padding: 6px; }
.sg-pick button[aria-pressed="true"] { background: var(--navy); color: #E9C171; border-color: var(--navy); }
.sg-nudge { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sg-mark .field { display: grid; gap: 4px; font-weight: 600; color: var(--navy); }
.sg-mark .field input { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 44px; }
.sg-ai { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #EAF2EA; color: #0B4A3A; font-size: 14px; }
.sg-ai:empty, .sg-status:empty { display: none; }
.sg-status { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #F6EEDB; color: #5A4416; font-size: 14px; }
.sg-btns { display: grid; gap: 8px; margin-top: 12px; }

/* T.I.P regions: one header per group, buttons in a grid */
.pt-regions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex-wrap: nowrap; }
.pt-rg { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pt-rg-uk, .pt-rg-us { grid-column: 1 / -1; }
.pt-grp { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #E9C171; white-space: nowrap; }
.pt-rg-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.pt-rg-uk .pt-rg-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-rg-us .pt-rg-b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-regions button { min-height: 42px; padding: 0 8px; font-size: 14px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; width: 100%; }
@media (max-width: 400px) { .pt-rg-us .pt-rg-b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pt-regions { grid-template-columns: minmax(130px, 1fr) minmax(190px, 1.3fr) minmax(0, 2fr) minmax(0, 4fr); column-gap: 20px; } .pt-rg-uk, .pt-rg-us { grid-column: auto; } }
.tl-regions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-regions small { font: 700 10px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #E9C171; }
@media (max-width: 820px) { .tl-regions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.tl-map { margin: 0 0 14px; border-radius: 18px; overflow: hidden; border: 2px solid #DDB447; box-shadow: 0 14px 30px rgba(3,42,33,.25); }
.tl-map img { display: block; width: 100%; height: auto; }
.tp-doc { max-width: 760px; margin: 22px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; line-height: 1.6; }
.tp-doc h2 { font-size: 21px; margin: 20px 0 6px; }
.tp-doc h2:first-child { margin-top: 0; }
.tp-doc ul { padding-left: 20px; display: grid; gap: 6px; }
.tp-doc a, .tip-foot a { color: #13664F; font-weight: 700; }
.tp-back { margin-top: 22px; }
.tip-foot { max-width: 1100px; margin: 28px auto 0; padding: 18px 20px 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Get the T.I.P Pack */
.pk-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; margin-top: 20px; align-items: start; }
.pk-what { background: #0B4A3A; color: #EEF5EE; border-radius: 18px; padding: 22px; border-top: 5px solid #DDB447; }
.pk-what h2 { color: #fff; font-size: 24px; margin-bottom: 10px; }
.pk-what ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.pk-what b { color: #E9C171; }
.pk-note { margin: 14px 0 0; font-size: 14px; color: #BFD9C9; }
.pk-form, .pk-done { gap: 12px; }
.pk-form .field { display: grid; gap: 4px; font-weight: 600; color: var(--navy); }
.pk-form input:not([type="checkbox"]), .pk-form select, .pk-form textarea { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 44px; background: #fff; color: #0B1A2A; }
.pk-items { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 4px; }
.pk-items legend { font-weight: 700; color: var(--navy); padding: 0 4px; }
.pk-items label { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.pk-items input, .pk-form .check input { width: 20px; height: 20px; accent-color: #13664F; flex: 0 0 auto; }
.pk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pk-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FBE9E7; color: #A63A2E; font-weight: 600; }
.tl-pack-btn { display: inline-flex; align-items: center; margin-top: 12px; min-height: 48px; padding: 0 20px; border-radius: 14px; background: #DDB447; color: #032A21 !important; font-weight: 700; text-decoration: none; }
@media (max-width: 760px) { .pk-grid { grid-template-columns: 1fr; } }

/* Pub QR codes and the printable poster */
.qr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; align-items: start; }
.qr-controls .field { display: grid; gap: 4px; font-weight: 600; color: var(--navy); }
.qr-controls select, .qr-controls input:not([type="radio"]) { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 44px; background: #fff; color: #0B1A2A; }
.qr-base { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 4px; }
.qr-base legend { font-weight: 700; color: var(--navy); padding: 0 4px; }
.qr-base label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.qr-link { margin: 0; font-size: 13px; word-break: break-all; color: var(--muted); }
.qr-link code { color: #0B1A2A; }
.qr-btns { display: grid; gap: 8px; }
.qr-poster { aspect-ratio: 210 / 297; background: radial-gradient(120% 90% at 20% 0%, #13664F, #032A21 70%); color: #EEF5EE; border: 3px solid #DDB447; outline: 1px solid rgba(221,180,71,.45); outline-offset: -12px; border-radius: 6px; padding: 7% 8%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2%; box-shadow: 0 16px 34px rgba(3,42,33,.3); container-type: inline-size; }
.qr-poster p { margin: 0; }
.qp-top { font: 800 3.4cqi var(--body); letter-spacing: .25em; color: #E9C171; }
.qp-h { font: 800 13cqi/1 var(--display); color: #fff; margin: 3% 0 1%; }
.qp-h span { color: #E9C171; }
.qp-sub { font: 600 4.4cqi var(--body); }
.qp-pub { font: 800 8.4cqi/1.05 var(--display); color: #E9C171; margin: 1% 0 3%; overflow-wrap: anywhere; }
.qp-qr { width: 52%; background: #fff; padding: 2.4%; border-radius: 10px; }
.qp-qr svg { display: block; width: 100% !important; height: auto !important; stroke: none; fill: initial; }
.qp-scan { font: 700 4.2cqi var(--body); margin-top: 3% !important; }
.qp-url { font: 800 5.4cqi var(--body); color: #fff; }
.qp-small { margin-top: auto !important; font-size: 2.6cqi; color: #BFD9C9; }
@media (max-width: 760px) { .qr-grid { grid-template-columns: 1fr; } }
@media print {
  @page { size: A4 portrait; margin: 0; }
  body.tip { background: #fff !important; }
  .xnav, .tip-foot, .qr-no-print { display: none !important; }
  .pt-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .qr-grid { display: block; margin: 0; }
  .qr-poster { width: 210mm; height: 297mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Grand pint guide button (below the pub picker) */
.gp-btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; min-height: 60px; border-radius: 16px; border: 2px solid #DDB447; background: rgba(221,180,71,.12); color: #EEF5EE; text-decoration: none; }
.gp-btn:hover { background: rgba(221,180,71,.22); }
.gp-btn-ico { font-size: 24px; }
.gp-btn b { display: block; color: #E9C171; font-size: 16px; }
.gp-btn small { display: block; color: #D7E6DA; font-size: 13px; line-height: 1.35; margin-top: 2px; }
.gp-btn-go { font-size: 26px; color: #E9C171; font-weight: 700; }
/* Never let the page pan sideways on phones */
html, body.pints { overflow-x: clip; max-width: 100%; }
.tip-foot { overflow-wrap: anywhere; }
/* Gold metallic titles and tiles */
.gp-btn b, .pk-tile b { background: linear-gradient(100deg, #F6E3A1 0%, #DDB447 28%, #B8862B 50%, #F3D98A 70%, #C9962F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .01em; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.gp-btn-tile { background: radial-gradient(120% 140% at 10% 0%, #13664F, #032A21 75%); border-color: #DDB447; box-shadow: 0 10px 24px rgba(3,42,33,.25); margin-top: 12px; }
.pk-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; min-height: 76px; border-radius: 18px; text-decoration: none; color: #032A21;
  background: linear-gradient(115deg, #F6E3A1 0%, #DDB447 30%, #B8862B 55%, #F0D27C 78%, #C9962F 100%); border: 1px solid #8C6420; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px rgba(3,42,33,.25); }
.pk-tile b { background: none; -webkit-text-fill-color: #032A21; color: #032A21; filter: none; }
.pk-tile small { display: block; color: #2A2410; font-size: 13.5px; margin-top: 2px; }
.pk-tile-ico { font-size: 28px; }
.pk-tile .gp-btn-go { color: #032A21; font-size: 26px; font-weight: 700; }
.pk-tile:hover { filter: brightness(1.05); }
/* Higher-contrast gold: only light golds on the dark tile, solid dark background */
.gp-btn { background: #032A21; }
.gp-btn-tile { background: radial-gradient(120% 140% at 10% 0%, #0B4A3A, #021E17 75%); }
.gp-btn b { background: linear-gradient(100deg, #FFF4CC 0%, #F7D978 35%, #EEC459 60%, #FFE9A8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.15; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.gp-btn small { color: #F2F6F0; }
.gp-btn-go { color: #F7D978; }
/* PourScan: Scores / Checklist views */
.ps-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ps-view { display: inline-flex; background: #EAF2EA; border-radius: 999px; padding: 3px; }
.ps-view button { font: 700 14px var(--body); border: 0; background: none; color: #0B4A3A; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; }
.ps-view button[aria-selected="true"] { background: #0B4A3A; color: #F7D978; }
.ps-check { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.ps-check details { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0 12px; }
.ps-check summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; }
.ps-check summary::-webkit-details-marker { display: none; }
.ps-check summary::after { content: "+"; margin-left: auto; font: 700 20px var(--body); color: #7A5C1E; }
.ps-check details[open] summary::after { content: "–"; }
.ck-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.ck-ok .ck-mark { background: #13664F; color: #fff; }
.ck-near .ck-mark { background: #F0D58C; color: #3A2C08; }
.ck-no .ck-mark { background: #4A5560; color: #fff; }
.ck-no details { border-color: #C9B27A; }
.ck-txt { display: grid; }
.ck-check details { border-color: #E0A030; box-shadow: inset 4px 0 0 #E0A030; }
.ck-stamp { margin-left: auto; margin-right: 6px; flex: 0 0 auto; display: grid; justify-items: center; line-height: 1.05; padding: 3px 6px; border: 1.5px solid #C98A1A; border-radius: 6px; color: #8A5A08; background: #FFF4DC; font-weight: 800; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-4deg); }
.ck-stamp small { font-size: 10px; letter-spacing: 0; text-transform: none; color: #8A5A08; }
.ck-sum { list-style: none; padding: 10px 14px; border-radius: 12px; background: #FFF4DC; color: #5A3C05; font-size: 15px; }
.ck-sum b { color: #5A3C05; }
.ck-sum-all { background: #E6F2EC; color: #0B4A3A; } .ck-sum-all b { color: #0B4A3A; }
.ck-txt b { color: #0B1A2A; }
.ck-txt small { color: var(--muted); font-size: 13px; }
.ps-check details p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.ck-help b { color: #0B4A3A; }
.ps-check details a { display: inline-block; margin: 0 0 12px; font-weight: 700; color: #13664F; font-size: 14px; }
.pt-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* T.I.P newsletter */
.nw-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; background: radial-gradient(120% 140% at 10% 0%, #13664F, #032A21 75%); color: #EEF5EE; border-radius: 20px; padding: 24px; border: 2px solid #DDB447; }
.nw-kicker { margin: 0; font: 800 12px var(--body); letter-spacing: .2em; text-transform: uppercase; color: #F7D978; }
.nw-card h2 { color: #fff; font-size: 26px; margin: 6px 0 8px; }
.nw-copy p:last-child { margin: 0; color: #D7E6DA; }
.nw-form { display: grid; gap: 10px; }
.nw-form .field { display: grid; gap: 4px; font-weight: 600; color: #F2F6F0; }
.nw-form input:not([type="checkbox"]), .nw-form select { font: inherit; font-weight: 400; border: 1px solid #BFD9C9; border-radius: 10px; padding: 10px; min-height: 44px; background: #fff; color: #0B1A2A; }
.nw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nw-form .check { color: #EEF5EE; } .nw-form .check a { color: #F7D978; }
.nw-form .check input { width: 20px; height: 20px; accent-color: #DDB447; }
.nw-done { margin: 0; font: 700 18px var(--display); color: #F7D978; }
.tl-news { margin-top: 10px; }
@media (max-width: 760px) { .nw-card { grid-template-columns: 1fr; padding: 20px; } .nw-row { grid-template-columns: 1fr; } }
.gp-next { display: block; margin-top: 4px; color: #D7E6DA; font-size: 14px; }
.rl-credit { background: rgba(0,0,0,.6); color: #fff !important; padding: 3px 7px; border-radius: 6px; text-decoration: none; font-size: 10.5px !important; }

/* Line icons for T.I.P (one style everywhere, inherits text colour) */
.ti { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: .35em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }
.ti-star { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.6l2.6%205.3%205.8.8-4.2%204.1%201%205.8L12%2016.9l-5.2%202.7%201-5.8-4.2-4.1%205.8-.8z%22/%3E%3C/svg%3E"); }
.ti-target { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3C/svg%3E"); }
.ti-trophy { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.5%204h9v4.5a4.5%204.5%200%200%201-9%200z%22/%3E%3Cpath%20d%3D%22M7.5%206H4.5v1a3%203%200%200%200%203%203M16.5%206h3v1a3%203%200%200%201-3%203M12%2013v3.5M8.5%2020h7M9.5%2016.5h5V20h-5z%22/%3E%3C/svg%3E"); }
.ti-book { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5c2.7-1%205.4-.8%208%20.7%202.6-1.5%205.3-1.7%208-.7V19c-2.7-1-5.4-.8-8%20.7-2.6-1.5-5.3-1.7-8-.7z%22/%3E%3Cpath%20d%3D%22M12%206.2v13.5%22/%3E%3C/svg%3E"); }
.ti-camera { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208.5h3.2L9%206h6l1.8%202.5H20V18H4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.2%22/%3E%3C/svg%3E"); }
.ti-image { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M5%2017l4.5-4.5%203%203%202.5-2.5L19%2017%22/%3E%3C/svg%3E"); }
.ti-shamrock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.4%22%20r%3D%223.3%22/%3E%3Ccircle%20cx%3D%227.6%22%20cy%3D%2212.2%22%20r%3D%223.3%22/%3E%3Ccircle%20cx%3D%2216.4%22%20cy%3D%2212.2%22%20r%3D%223.3%22/%3E%3Cpath%20d%3D%22M12%2012.5c0%203.4%201%205.6%203.2%207.8%22/%3E%3C/svg%3E"); }
.ti-pint { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203.5h10l-.6%204.6c-.3%202.3.5%204.3.4%206.6l-.6%205.8H7.8l-.6-5.8c-.1-2.3.7-4.3.4-6.6z%22/%3E%3Cpath%20d%3D%22M7.2%207.5h9.6%22/%3E%3C/svg%3E"); }
.ti-clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M12%207.5V12l3%202%22/%3E%3C/svg%3E"); }
.ti-drop { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5c3%204%206%207.2%206%2010.5a6%206%200%200%201-12%200c0-3.3%203-6.5%206-10.5z%22/%3E%3C/svg%3E"); }
.ti-thermo { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%205a2%202%200%200%201%204%200v8.6a4%204%200%201%201-4%200z%22/%3E%3Cpath%20d%3D%22M12%2010v6%22/%3E%3C/svg%3E"); }
.ti-rings { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12M6.5%2011h11M7%2015h10M7.5%2019h9%22/%3E%3C/svg%3E"); }
.ti-wrench { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204.5a4.5%204.5%200%200%200-4.3%205.8l-6%206a1.8%201.8%200%200%200%202.5%202.5l6-6a4.5%204.5%200%200%200%205.8-4.3l-2.6%202.6-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); }
.ti-gauge { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016a8%208%200%201%201%2016%200%22/%3E%3Cpath%20d%3D%22M12%2016l4-5%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%221.2%22/%3E%3C/svg%3E"); }
.ti-cloud { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017.5a4%204%200%200%201-.4-8%205.5%205.5%200%200%201%2010.6%201.3%203.4%203.4%200%200%201-.7%206.7z%22/%3E%3C/svg%3E"); }
.ti-taste { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%209.5c0%205%203%209%207%209s7-4%207-9z%22/%3E%3Cpath%20d%3D%22M5%209.5h14M9%205.5c.5.8.5%201.7%200%202.5M13%204.5c.5.8.5%201.7%200%202.5%22/%3E%3C/svg%3E"); }
.ti-share { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V4M8%207.5%2012%203.5l4%204M5.5%2012v7.5h13V12%22/%3E%3C/svg%3E"); }
.ti-pin { --i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021s-6.5-5.6-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.4-6.5%2011-6.5%2011z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%222.4%22/%3E%3C/svg%3E"); }
.ti-home { --i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.5%2011%2012%204l8.5%207%22/%3E%3Cpath%20d=%22M5.5%209.5V20h13V9.5%22/%3E%3Cpath%20d=%22M10%2020v-5.5h4V20%22/%3E%3C/svg%3E"); }
.ti-search { --i: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%226.5%22/%3E%3Cpath%20d=%22m20%2020-4.2-4.2%22/%3E%3C/svg%3E"); }
.ti-mail { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225.5%22%20width%3D%2217%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M4%207l8%206%208-6%22/%3E%3C/svg%3E"); }
.ti-download { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v11M7.5%2010.5%2012%2015l4.5-4.5M5%2019.5h14%22/%3E%3C/svg%3E"); }
.ti-print { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%209V4h10v5M7%2017H4.5V9.5h15V17H17%22/%3E%3Cpath%20d%3D%22M7%2014h10v6H7z%22/%3E%3C/svg%3E"); }
.ti-check { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22/%3E%3C/svg%3E"); }
.ti-ai { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M12%207V4.5M9.5%2012.5h.01M14.5%2012.5h.01M9.5%2015.5h5%22/%3E%3C/svg%3E"); }
.ti-send { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011.5%2020%204l-6.5%2016-2.5-6.5z%22/%3E%3Cpath%20d%3D%22M11%2013.5%2020%204%22/%3E%3C/svg%3E"); }
.gp-btn-ico .ti, .pk-tile-ico .ti { width: 28px; height: 28px; margin: 0; }
.gp-btn-ico { color: #F7D978; } .pk-tile-ico { color: #032A21; }
.tip-glass { width: min(200px, 56vw) !important; }
/* Feature cards: same heading size, spacing and link at the bottom */
.tl-cards { align-items: stretch; }
.tl-card { display: flex !important; flex-direction: column; gap: 10px; }
.tl-card > b { display: flex; align-items: center; gap: 2px; min-height: 30px; }
.tl-card > span { flex: 1; }
.tl-card > em { margin-top: auto; padding-top: 6px; }
.ps-bars small { color: var(--muted); font-size: 12px; font-weight: 500; } .ps-photo { opacity: .85; }
.tip-glass, .sg-illus { stroke: none !important; }
/* Split the T.I.P: lines appear once the AI has placed them, or when adjusting */
.sg-stage .sg-line { display: none; }
.sg-stage.show-lines .sg-line { display: block; }
.sg-stage:not(.show-lines) { cursor: default; }
.sg-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: #EAF2EA; color: #0B4A3A; font-size: 14px; }
.sg-adjust { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; }
.sg-adjust summary { cursor: pointer; min-height: 46px; display: flex; align-items: center; font-weight: 700; color: #0B4A3A; }
.sg-adjust[open] { padding-bottom: 12px; display: grid; gap: 10px; }
.gp-emo { margin-right: 8px; font-size: 1em; }
.pt-rg-au { grid-column: 1 / -1; }
.pt-rg-au .pt-rg-b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .pt-regions { grid-template-columns: minmax(130px, 1fr) minmax(190px, 1.3fr) minmax(0, 2fr); } .pt-rg-us, .pt-rg-au { grid-column: auto; } .pt-rg-us { grid-column: span 2; } }
.tl-regions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-map { position: relative; }
.tl-globe { position: absolute; left: 4%; top: 56.25%; width: 22% !important; height: auto !important; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.tl-kicker { text-indent: .2em; } @media (max-width: 820px) { .tl-kicker { text-align: center; } }
/* Split zones strip */
.sg-zones { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.sg-zones li { font: 700 11.5px var(--body); text-align: center; padding: 8px 2px; border-radius: 8px; background: #EAF2EA; color: #4A5560; line-height: 1.2; }
.sg-zones li.zs { background: #F6EEDB; color: #7A5C1E; }
.sg-zones li.on { background: #0B4A3A; color: #F7D978; box-shadow: 0 0 0 2px #DDB447; }
.sg-tilt { margin: 8px 0 0; font-size: 14px; color: #5A4416; background: #F6EEDB; border-radius: 10px; padding: 8px 10px; }
.sg-chart { max-width: 320px !important; }
.sg-tips { grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 760px) { .sg-tips { grid-template-columns: 1fr; } }
/* Tap-to-mark target: before the tap only "Your line" shows */
.sg-stage.tap-mode { cursor: crosshair; }
.sg-stage.tap-mode:not(.tapped) .sg-line:not(.sg-yours) { display: none; }
.sg-stage.tap-mode:not(.line-tapped) .sg-yours { display: none; }
.sg-stage.tap-mode .sg-top span, .sg-stage.tap-mode .sg-bottom span { display: none; }
.sg-stage.tap-mode .sg-top, .sg-stage.tap-mode .sg-bottom { border-top-style: dotted; opacity: .8; }
/* Pub map on the Best Pint Guide */
.pt-mapcard { margin-top: 18px; }
.pt-mapcard h2 .ti { margin-right: 6px; }
.pt-map { height: min(62vh, 460px); border-radius: 14px; overflow: hidden; border: 2px solid #DDB447; margin-top: 10px; background: #e8efe9; z-index: 0; }
.pt-key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-left: 4px; }
.pt-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 1.5px solid #032A21; }
.pt-key .k-gold { background: #DDB447; } .pt-key .k-green { background: #13664F; } .pt-key .k-cream { background: #FBF7EC; }
.pm-pin { background: none; border: 0; }
.pm-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #032A21; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.pm-dot svg { width: 17px; height: 17px; transform: rotate(45deg); }
.pm-gold .pm-dot { background: #DDB447; color: #032A21; }
.pm-green .pm-dot { background: #13664F; color: #F7D978; }
.pm-cream .pm-dot { background: #FBF7EC; color: #0B4A3A; }
.pm-pop { font: 14px/1.4 Figtree, system-ui, sans-serif; color: #032A21; min-width: 180px; }
.pm-pop b { display: block; font-family: Fraunces, Georgia, serif; font-size: 16px; }
.pm-pop small { color: #4b5f57; }
.pm-pop p { margin: 6px 0 0; }
.pm-act { display: flex; gap: 12px; flex-wrap: wrap; }
.pm-act a { color: #0B4A3A; font-weight: 700; }
/* Let the page itself scroll (not body) so the top bar can stick. */
html:has(body.pints) { height: auto; }
body.pints { overflow: visible; height: auto; }
#rAnyway { display: flex; margin-top: 10px; min-height: 44px; width: 100%; font-weight: 700; }
.sg-stage, .sg-stage * { touch-action: manipulation; } /* no double-tap zoom while marking the split */
.sg-stage.tap-mode { touch-action: none; }
/* Magnifier while placing a split mark */
.sg-loupe { position: absolute; z-index: 5; border-radius: 50%; border: 3px solid #DDB447; box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 2px #032A21; background-repeat: no-repeat; pointer-events: none; overflow: hidden; }
.sg-loupe i { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid #DDB447; box-shadow: 0 0 0 1px rgba(3,42,33,.6); }
.sg-loupe i::after { content: ''; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid #DDB447; background: rgba(3,42,33,.25); }
.sg-loupe.is-line i { border-top-color: #fff; } .sg-loupe.is-line i::after { border-color: #fff; }
.sg-loupe b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 700 11px var(--body); color: #FBF7EC; background: rgba(3,42,33,.8); padding: 3px 4px; }
.sg-stage.pressing .sg-line span { opacity: .35; }
.sg-stage.tap-mode, .sg-stage.show-lines { touch-action: none; }
.sg-how { margin: 8px 0 12px; padding: 10px 12px 10px 28px; border-radius: 12px; background: #F6EEDB; font-size: 14px; line-height: 1.45; display: grid; gap: 5px; }
/* Photo hero: the pint on the world map, with live text over it */
.tl-hero-photo { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: min(92vh, 820px); padding: 40px 20px 36px; background: #032A21 url("/img/tip-hero.jpg") center 58% / cover no-repeat; position: relative; }
.tl-hero-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,42,33,.72) 0%, rgba(3,42,33,.15) 32%, rgba(3,42,33,0) 55%, rgba(3,42,33,.55) 100%); pointer-events: none; }
.tl-hero-photo > * { position: relative; }
.tl-hero-photo .tl-kicker { color: #DDB447; letter-spacing: .28em; }
.tl-hero-photo h1 { color: #FBF7EC; font-size: clamp(3.2rem, 10vw, 7rem); line-height: .95; margin-top: 10px; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
.tl-sub2 { font: 700 clamp(1.5rem, 4.6vw, 2.6rem) var(--display); color: #FBF7EC; margin: 6px 0 0; text-shadow: 0 3px 16px rgba(0,0,0,.45); }
.tl-q { font: 600 clamp(1.2rem, 3.4vw, 1.9rem) var(--display); color: #DDB447; margin: 10px 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.tl-spacer { flex: 1 1 auto; min-height: clamp(220px, 36vh, 380px); }
.tl-hero-photo .tl-ctas { justify-content: center; margin-top: 0; }
.tl-btn.gold { background: #DDB447; color: #032A21; }
.tl-hero-photo .tl-btn.line { border-color: #F1E3C6; color: #FBF7EC; background: rgba(3,42,33,.35); backdrop-filter: blur(4px); }
.tl-hero-photo .tl-small { color: #D9CFB8; max-width: 46ch; margin: 14px auto 0; }
@media (max-width: 700px) {
  /* Phones: the whole pint, zoomed out, on a blurred copy of the picture */
  .tl-hero-photo { background: #032A21; min-height: 92vh; padding-top: 26px; overflow: hidden; }
  .tl-hero-photo::after { content: ''; position: absolute; inset: -40px; background: url("/img/tip-hero.jpg") center / cover no-repeat; filter: blur(24px) brightness(.55); z-index: 0; }
  .tl-hero-photo .tl-pic { position: absolute; left: 0; right: 0; top: 29%; bottom: 24%; background: url("/img/tip-pint.webp") center / contain no-repeat; z-index: 1; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
  .tl-hero-photo::before { z-index: 2; background: linear-gradient(180deg, rgba(3,42,33,.85) 0%, rgba(3,42,33,.35) 26%, rgba(3,42,33,0) 40%, rgba(3,42,33,0) 70%, rgba(3,42,33,.8) 100%); }
  .tl-hero-photo > .tl-copy, .tl-hero-photo > .tl-spacer, .tl-hero-photo > .tl-bottom { z-index: 3; }
  .tl-spacer { min-height: 44vh; }
}
@media (min-width: 701px) {
  /* Wide screens: show the whole pint, with a blurred copy of the picture filling the sides */
  .tl-hero-photo { background: #032A21; min-height: min(92vh, 860px); overflow: hidden; }
  .tl-hero-photo::after { content: ''; position: absolute; inset: -40px; background: url("/img/tip-hero.jpg") center / cover no-repeat; filter: blur(28px) brightness(.6); z-index: 0; }
  .tl-hero-photo .tl-pic { position: absolute; left: 0; right: 0; top: 47%; bottom: 3%; background: url("/img/tip-pint.webp") center / contain no-repeat; z-index: 1; filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }
  .tl-hero-photo::before { z-index: 2; }
  .tl-hero-photo > .tl-copy, .tl-hero-photo > .tl-spacer, .tl-hero-photo > .tl-bottom { z-index: 3; }
  .tl-hero-photo h1 { font-size: clamp(3.2rem, 7vw, 5.6rem); }
  .tl-spacer { min-height: clamp(260px, 40vh, 420px); }
}
/* Region picker: country chips, then city chips only where a country has several cities */
.rp-label { margin: 14px 0 6px; font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #E9C171; }
.rp-countries { display: flex; flex-wrap: wrap; gap: 5px; }
@media (min-width: 480px) { .rp-countries { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; padding-right: 2px; } }
.rp-countries::-webkit-scrollbar { display: none; }
.rp-c { flex: none; font: 700 13.5px var(--body); min-height: 36px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(221,180,71,.55); background: rgba(255,255,255,.04); color: #FBF7EC; cursor: pointer; }
.rp-c[aria-pressed="true"] { background: #DDB447; border-color: #DDB447; color: #032A21; }
.rp-c:focus-visible, .pt-regions.rp-on button:focus-visible { outline: 3px solid #F1E3C6; outline-offset: 2px; }
.pt-regions.rp-on { display: block !important; margin-top: 6px; }
.pt-regions.rp-on .pt-grp, .pt-regions.rp-on .pt-rg { display: none; }
.pt-regions.rp-on .pt-rg.rp-show:not(.rp-single) { display: block; }
.pt-regions.rp-on .pt-rg-b { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-regions.rp-on .pt-rg-b button { width: auto; flex: none; min-height: 34px; padding: 0 11px; font-size: 13.5px; border-color: rgba(241,227,198,.45); }
.tip .pt-regions.rp-on .pt-rg-b button[aria-selected="true"] { background: #F1E3C6; border-color: #F1E3C6; color: #032A21; }
/* How we judge */
.hj { display: grid; gap: 16px; margin-top: 20px; max-width: 820px; }
.hj h2 { font-size: 22px; color: #0B4A3A; }
.hj-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.55; }
.hj-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hj-ctas .btn { flex: 1 1 220px; }
/* Age check */
.age-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(3, 26, 20, .92); display: grid; place-items: center; padding: 20px; }
.age-box { background: #FBF7EC; color: #032A21; border-radius: 20px; border-top: 6px solid #DDB447; max-width: 420px; width: 100%; padding: 26px 22px; text-align: center; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.age-box h2 { font: 800 30px var(--display); margin: 0; color: #0B4A3A; }
.age-box p { margin: 0; line-height: 1.5; }
.age-brand { font: 800 22px var(--display); letter-spacing: .06em; color: #B8862B; }
.age-btns { display: grid; gap: 10px; margin-top: 6px; }
.age-btns button { font: 700 17px var(--body); min-height: 50px; border-radius: 999px; cursor: pointer; }
.age-yes { background: #DDB447; color: #032A21; border: 0; }
.age-no { background: transparent; color: #0B4A3A; border: 2px solid #0B4A3A; }
.age-btns button:focus-visible { outline: 3px solid #13664F; outline-offset: 3px; }
.age-small { font-size: 13px; color: #4A5A52; }
body.age-lock { overflow: hidden; }
.pt-nominate { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #0B4A3A; margin-top: 4px; }
.hj-ctas .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.tl-lead { margin: -6px 0 14px; color: #3b4a44; font-size: 15px; max-width: 60ch; }
@media (max-width: 700px) {
  /* Phones: the two buttons side by side, under the pint */
  .tl-hero-photo .tl-ctas { flex-wrap: nowrap; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
  .tl-hero-photo .tl-ctas .tl-btn { flex: 1 1 0; justify-content: center; gap: 6px; padding: 0 10px; font-size: 15.5px; min-height: 52px; white-space: nowrap; }
}
/* Ireland and Northern Ireland: filter the guide by county or city */
.rp-places { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rp-places button { font: 700 13.5px var(--body); min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(241,227,198,.45); background: transparent; color: #FBF7EC; cursor: pointer; }
.rp-places button[aria-pressed="true"] { background: #F1E3C6; border-color: #F1E3C6; color: #032A21; }
.rp-places button:focus-visible { outline: 3px solid #F1E3C6; outline-offset: 2px; }

/* ===== PourScan moments ===== */
/* The scan sweep */
.pt-photo { position: relative; }
.pt-photo.scanning img { filter: saturate(1.15) contrast(1.05); }
.ps-scan { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at center, rgba(3,42,33,.12), rgba(2,20,16,.62)); color: #F7D978; font-family: var(--body); }
.ps-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(221,180,71,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(221,180,71,.14) 1px, transparent 1px); background-size: 22px 22px; animation: ps-grid 6s linear infinite; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); }
@keyframes ps-grid { to { background-position: 0 22px, 22px 0; } }
.ps-lines { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.ps-beam { position: absolute; left: 0; right: 0; height: 3px; background: #FFF1B8; box-shadow: 0 0 12px 3px rgba(247,217,120,.9), 0 0 50px 14px rgba(247,217,120,.35); animation: ps-sweep 1.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
.ps-beam::before, .ps-beam::after { content: ''; position: absolute; left: 0; right: 0; height: 80px; }
.ps-beam::after { top: 3px; background: linear-gradient(180deg, rgba(247,217,120,.30), transparent); }
.ps-beam::before { bottom: 3px; background: linear-gradient(0deg, rgba(247,217,120,.12), transparent); }
@keyframes ps-sweep { from { top: 6%; } to { top: 92%; } }
.ps-c { position: absolute; width: 26px; height: 26px; border: 3px solid #DDB447; filter: drop-shadow(0 0 6px rgba(247,217,120,.7)); animation: ps-lock 1.6s ease-in-out infinite alternate; }
.ps-c.tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.ps-c.tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.ps-c.bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.ps-c.br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
@keyframes ps-lock { from { transform: translate(0,0); } to { transform: translate(var(--lx,6px), var(--ly,6px)); } }
.ps-c.tr { --lx: -6px; } .ps-c.bl { --ly: -6px; } .ps-c.br { --lx: -6px; --ly: -6px; }
.ps-ret { position: absolute; left: 50%; top: 50%; width: 38%; max-width: 160px; transform: translate(-50%,-50%); fill: none; stroke: rgba(247,217,120,.75); stroke-width: 1.4; animation: ps-spin 6s linear infinite; filter: drop-shadow(0 0 4px rgba(247,217,120,.6)); }
.ps-ret .d { stroke-dasharray: 4 7; stroke: rgba(95,227,154,.7); }
@keyframes ps-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.ps-tag { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(3,26,20,.9); border: 1px solid #DDB447; font: 800 11px/1 var(--body); letter-spacing: .14em; color: #F7D978; }
.ps-tag i { width: 8px; height: 8px; border-radius: 50%; background: #5FE39A; box-shadow: 0 0 8px #5FE39A; animation: ps-blink .6s infinite alternate; }
.ps-hud { position: absolute; right: 16px; top: 16px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(3,26,20,.88); border: 1px solid rgba(221,180,71,.6); font: 700 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace; min-width: 104px; }
.ps-hud div { display: flex; justify-content: space-between; gap: 10px; }
.ps-hud dt { color: rgba(247,217,120,.7); letter-spacing: .08em; } .ps-hud dd { margin: 0; color: #FBF7EC; font-variant-numeric: tabular-nums; }
.ps-prog { position: absolute; left: 16px; right: 16px; bottom: 58px; height: 4px; border-radius: 4px; background: rgba(247,217,120,.18); overflow: hidden; }
.ps-prog b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #DDB447, #F7D978, #5FE39A); box-shadow: 0 0 10px rgba(247,217,120,.8); animation: ps-prog 3s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes ps-prog { to { width: 96%; } }
.ps-step { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; background: #032A21; border: 1px solid rgba(221,180,71,.7); color: #F7D978; font: 700 14px var(--body); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ps-step::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F7D978; margin-right: 8px; vertical-align: 1px; animation: ps-blink .7s infinite alternate; }
@keyframes ps-blink { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 380px) { .ps-hud { display: none; } }
@media (prefers-reduced-motion: reduce) { .ps-beam { animation: none; top: 50%; } .ps-step::before, .ps-tag i, .ps-ret, .ps-c, .ps-grid { animation: none; } .ps-prog b { animation: none; width: 60%; } }

/* The reveal: ring gauge around the score */
.pt-result { position: relative; overflow: hidden; }
.pt-score { position: relative; display: grid; place-items: center; width: 168px; height: 168px; margin: 6px auto 4px; }
.pt-score b { font-size: 60px; grid-area: 1 / 1; margin-top: 4px; }
.pt-score span { grid-area: 1 / 1; align-self: end; margin-bottom: 26px; font-size: 16px; }
.ps-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-ring circle { fill: none; stroke-width: 9; }
.ps-ring-bg { stroke: #E9E2D1; }
.ps-ring-fg { stroke: #13664F; stroke-linecap: round; transition: stroke .3s; }
.pt-score[data-tier="gold"] .ps-ring-fg { stroke: #DDB447; } .pt-score[data-tier="gold"] b { color: #7A5C1E; }
.pt-score[data-tier="green"] .ps-ring-fg { stroke: #3FAE6A; }
.pt-score[data-tier="amber"] .ps-ring-fg { stroke: #DDB447; }
.pt-score[data-tier="red"] .ps-ring-fg { stroke: #C9654A; }
.pt-result h2 { text-align: center; }
.pt-result > .pt-small { text-align: center; }
.ps-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Head gauge */
.hg { margin: 12px 0 6px; padding: 12px 14px; border-radius: 12px; background: #F6EEDB; }
.hg-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 8px; }
.hg-head b { color: var(--navy); } .hg-head span { color: #4b5f57; font-weight: 600; }
.hg-bar { position: relative; height: 14px; border-radius: 999px; background: #E3DCC6; }
.hg-sweet { position: absolute; top: 0; bottom: 0; background: #3FAE6A; border-radius: 999px; opacity: .85; }
.hg-pin { position: absolute; top: -5px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #C9654A; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: left 1.2s cubic-bezier(.2,.8,.2,1); }
.hg-pin.ok { background: #13664F; }
.hg-scale { position: relative; height: 16px; margin-top: 4px; font: 600 11px var(--body); color: #6b7a73; display: flex; justify-content: space-between; }
.hg-scale .hg-s { position: absolute; transform: translateX(-50%); color: #13664F; }

/* How it compares */
.ps-compare { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); }
.ps-compare h3 { font: 700 15px var(--display); color: var(--navy); margin-bottom: 8px; }
.ps-cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-cmp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; font-size: 13.5px; }
.ps-cmp li i { grid-column: 1 / -1; }
.ps-cmp li i { display: block; height: 10px; border-radius: 999px; background: #E9E2D1; overflow: hidden; }
.ps-cmp li i b { display: block; height: 100%; background: #9aa89f; border-radius: 999px; }
.ps-cmp li.you i b { background: #DDB447; } .ps-cmp li.you span { font-weight: 700; color: var(--navy); }
.ps-cmp li em { font-style: normal; font-weight: 700; text-align: right; }
.ps-compare .pt-small { margin-top: 8px; }

/* Share + my pints */
.ps-share { margin-top: 14px; display: grid; gap: 6px; }
.ps-share .pt-small { text-align: center; min-height: 1em; }
.my-pints { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #0B4A3A; color: #FBF7EC; font-size: 14px; }
.my-pints b { color: #F7D978; } .my-pints a { color: #F7D978; font-weight: 700; white-space: nowrap; }
/* My pints */
.mp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-top: 14px; }
.mp-stats div { background: rgba(255,255,255,.07); border: 1px solid rgba(221,180,71,.4); border-radius: 12px; padding: 10px 12px; display: grid; }
.mp-stats b { font: 700 26px var(--display); color: #F7D978; } .mp-stats span { font-size: 12.5px; color: #D9CFB8; }
.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.mp-list img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #032A21; }
.mp-list li div { display: grid; min-width: 0; } .mp-list li b { color: var(--navy); } .mp-list small { color: var(--muted); } .mp-list em { font: italic 600 13px var(--display); color: #13664F; }
.mp-score { font: 700 24px var(--display); padding: 6px 12px; border-radius: 999px; background: #E9E2D1; color: var(--navy); }
.mp-score.t-gold { background: #DDB447; } .mp-score.t-green { background: #3FAE6A; color: #fff; } .mp-score.t-amber { background: #F6EEDB; } .mp-score.t-red { background: #F2D6CD; }
.mp-empty { text-align: center; } .mp-empty p { margin-top: 8px; }
.pm-score { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font: 700 11px var(--body); background: #032A21; color: #F7D978; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
/* Settle timer */
.settle { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 12px; padding: 14px; border-radius: 14px; background: #032A21; color: #FBF7EC; }
.st-ring { position: relative; width: 124px; height: 124px; display: grid; place-content: center; justify-items: center; }
.st-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring circle { fill: none; stroke-width: 7; } .st-bg { stroke: rgba(255,255,255,.12); } .st-fg { stroke: #DDB447; stroke-linecap: round; }
.st-ring b { font: 700 30px var(--display); color: #F7D978; line-height: 1; font-variant-numeric: tabular-nums; } .st-ring small { font: 700 9px var(--body); color: #C9D3C9; text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; max-width: 80px; text-align: center; line-height: 1.2; }
.st-txt { display: grid; gap: 4px; } .st-txt > b { color: #F7D978; } .st-txt p { font-size: 13.5px; color: #D9CFB8; margin: 0; }
.st-txt .btn { justify-self: start; margin-top: 4px; min-height: 40px; }
.settle.running .st-fg { stroke: #3FAE6A; } .settle.ready { background: #0B4A3A; box-shadow: 0 0 0 3px #DDB447 inset; } .settle.ready .st-fg { stroke: #DDB447; } .settle.ready .st-ring b { font-size: 40px; }
@media (max-width: 380px) { .settle { grid-template-columns: 1fr; justify-items: center; text-align: center; } .st-txt .btn { justify-self: center; } }
/* Live viewfinder with the pint outline */
.vf { position: fixed; inset: 0; z-index: 4000; background: #000; display: none; overflow: hidden; }
.vf.on { display: block; } body.vf-lock { overflow: hidden; }
.vf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-guide { position: absolute; left: 6%; top: calc(76px + env(safe-area-inset-top)); width: 88%; height: calc(100% - 208px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.vf-dim { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px transparent; background: linear-gradient(180deg, rgba(3,42,33,.45) calc(76px + env(safe-area-inset-top)), transparent calc(76px + env(safe-area-inset-top))), linear-gradient(0deg, rgba(3,42,33,.45) calc(132px + env(safe-area-inset-bottom)), transparent calc(132px + env(safe-area-inset-bottom))); pointer-events: none; }
.vf-glass { fill: none; stroke: #F7D978; stroke-width: 1.8; stroke-dasharray: 5 3; filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); }
.vf-level { stroke: rgba(251,247,236,.8); stroke-width: .8; stroke-dasharray: 2 2; }
.vf-top { position: absolute; top: 0; left: 0; right: 0; padding: calc(12px + env(safe-area-inset-top)) 14px 10px; display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.vf-close { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font: 700 18px var(--body); flex: none; }
.vf-hint { margin: 0; color: #FBF7EC; font: 600 14px var(--body); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.vf-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 24px calc(22px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); }
.vf-lib { justify-self: start; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); color: #fff; border-radius: 999px; padding: 10px 14px; font: 700 14px var(--body); }
.vf-shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; padding: 0; }
.vf-shutter i { width: 62px; height: 62px; border-radius: 50%; background: #DDB447; display: block; transition: transform .1s; }
.vf-shutter:active i { transform: scale(.88); }
.vf::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.vf.flash::after { opacity: .8; transition: none; }
.ps-limits { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ps-limits summary { cursor: pointer; font-weight: 700; color: #0B4A3A; }
.ps-limits p, .ps-limits ul { margin: 8px 0 0; } .ps-limits ul { padding-left: 18px; display: grid; gap: 4px; }
.ps-fine { text-align: center; margin-top: 6px; }
.vf-lbl { font: 600 6px var(--body); fill: #FBF7EC !important; stroke: none !important; letter-spacing: .05em; opacity: .9; }
.na-note { margin: -4px 0 10px; padding: 8px 10px; border-radius: 10px; background: #EAF2EA; color: #0B4A3A; }
.na-chip { display: inline-block; font: 800 11px var(--body); background: #0B4A3A; color: #F7D978; padding: 2px 7px; border-radius: 999px; margin-right: 8px; letter-spacing: .04em; }
/* Dream pints */
.dream-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: 2px; border: 1px solid #DDB447; background: #fff; color: #7A5C1E; border-radius: 999px; padding: 2px 9px; font: 700 11.5px var(--body); cursor: pointer; }
.dream-btn.on { background: #DDB447; color: #032A21; }
.dream-btn.on .dream-lbl::after { content: ' ✓'; }
.pm-dream .pm-dot { background: #FBF7EC; border-style: dashed; color: #7A5C1E; }
.pm-dream .pm-dot b { transform: rotate(45deg); font-size: 16px; }
.pt-key .k-dream { width: auto; height: auto; border: 0; background: none; color: #7A5C1E; font-weight: 800; }
.mp-dream-ic { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: #F6EEDB; color: #7A5C1E; font-size: 26px; }
.mp-list li a.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* World leaderboard */
.pt-world { border: 2px solid #DDB447; }
/* Floating Rate my pint on phones */
.rate-fab { display: none; }
@media (max-width: 700px) {
  .rate-fab { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1500; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: #DDB447; color: #032A21; font: 800 16px var(--body); text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 3px #032A21; }
  .rate-fab .ti { width: 20px; height: 20px; }
  body.pints { padding-bottom: 84px; }
  .tip-foot { padding-bottom: 90px; }
}
/* Live PintScan HUD */
.vf-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.vf-guide { z-index: 1; }
.vf-hud { position: absolute; left: 50%; transform: translateX(-50%); top: calc(84px + env(safe-area-inset-top)); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(3,42,33,.85); color: #FBF7EC; font: 700 14px var(--body); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.vf-hud-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa89f; }
.vf-hud-dot.seek { background: #9aa89f; animation: ps-blink .8s infinite alternate; }
.vf-hud-dot.wait { background: #DDB447; animation: ps-blink .5s infinite alternate; }
.vf-hud-dot.warn { background: #C9654A; }
.vf-hud-dot.ok { background: #3FAE6A; box-shadow: 0 0 10px #3FAE6A; }
.vf-count { position: absolute; inset: 0; display: none; place-items: center; z-index: 4; font: 800 140px var(--display); color: #F7D978; text-shadow: 0 6px 30px rgba(0,0,0,.6); pointer-events: none; }
.vf-count.on { display: grid; animation: vf-pop .45s ease-out infinite; }
@keyframes vf-pop { from { transform: scale(1.25); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.vf-auto { justify-self: end; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); color: #fff; border-radius: 14px; padding: 8px 12px; font: 700 13px/1.1 var(--body); text-align: center; }
.vf-auto small { font-weight: 500; opacity: .8; }
.vf-auto.on { background: #DDB447; color: #032A21; border-color: #DDB447; }
.vf-top { z-index: 3; } .vf-bottom { z-index: 3; }
/* Pint Index */
.price-wrap { display: flex; align-items: center; gap: 6px; } .price-wrap b { font: 700 18px var(--display); color: var(--navy); } .price-wrap input { width: 110px; }
.price-field small { display: block; margin-top: 4px; }
.pt-index { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #F6EEDB; color: #3b4a44; }
.price-chip { background: #DDB447; color: #032A21; }
.ps-price { margin-top: 8px; }
/* Pint Passport */
.pp-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pp-grid li { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1.5px dashed #D9CFB8; background: #FBF7EC; color: #8a8f8b; }
.pp-grid li i { font-style: normal; font-size: 26px; filter: grayscale(1); opacity: .45; }
.pp-grid li b { font-size: 12.5px; color: inherit; } .pp-grid li small { font-size: 10.5px; line-height: 1.25; } .pp-grid li em { font: 700 10px var(--body); color: #7A5C1E; }
.pp-grid li.on { border: 2px solid #DDB447; background: #fff; color: var(--navy); box-shadow: 0 3px 10px rgba(221,180,71,.25); }
.pp-grid li.on i { filter: none; opacity: 1; }
.stamp-toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 3500; background: #032A21; color: #FBF7EC; border: 2px solid #DDB447; border-radius: 16px; padding: 12px 16px; display: grid; gap: 6px; min-width: 260px; max-width: 92vw; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .3s, opacity .3s; }
.stamp-toast.on { transform: translate(-50%, 0); opacity: 1; }
.stamp-toast b { color: #F7D978; font-size: 13px; } .stamp-toast span { display: flex; align-items: center; gap: 8px; font-weight: 700; } .stamp-toast span i { font-style: normal; font-size: 22px; } .stamp-toast a { color: #F7D978; font-size: 13px; }

/* T.I.P ID (My pints) and the pub dashboard */
.tid-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; } .tid-actions .btn { white-space: nowrap; }
.pd-stats b.sm { font-size: 17px; line-height: 1.2; padding-top: 4px; }
.tid-join { margin: 10px 0 4px; } .tid-join label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.tid-join div { display: flex; gap: 8px; } .tid-join input { flex: 1; min-width: 0; font: 700 20px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; border: 1.5px solid #B9B2A0; border-radius: 12px; background: #fff; color: #032A21; }
.tid-id { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; margin: 6px 0 10px; }
.tid-id span { font-size: 12.5px; color: #6b706c; text-transform: uppercase; letter-spacing: .08em; } .tid-id b { font: 700 24px var(--display); color: #0B4A3A; letter-spacing: .06em; } .tid-id small { grid-column: 2; color: #6b706c; }
.tid-linkbox { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: #032A21; color: #FBF7EC; } .tid-linkbox p { margin: 4px 0; } .tid-linkbox .pt-small { color: #D9CFB8; }
.tid-bigcode { font: 700 40px/1.1 var(--display); letter-spacing: .18em; color: #F7D978; text-align: center; margin: 8px 0 !important; }
.tid-msg { min-height: 1.2em; margin: 8px 0 0; } .tid-msg.bad { color: #a4322c; }
.pd-stats { margin: 0 0 16px; } .pd-stats div { background: #032A21; }
.pd-bars { display: grid; gap: 10px; margin-top: 10px; }
.pd-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 14px; }
.pd-bar i { grid-column: 1; display: block; height: 10px; border-radius: 6px; background: #ECE6D6; overflow: hidden; } .pd-bar i b { display: block; height: 100%; background: linear-gradient(90deg, #DDB447, #F7D978); border-radius: 6px; }
.pd-bar em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-weight: 700; color: #0B4A3A; } .pd-bar small { grid-column: 1; color: #6b706c; }
.pd-months { display: flex; gap: 6px; align-items: flex-end; height: 150px; margin-top: 10px; padding-top: 18px; }
.pd-month { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.pd-month b { position: relative; width: 70%; max-width: 38px; min-height: 4px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #F7D978, #DDB447); }
.pd-month b span { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font: 700 12px var(--body); color: #0B4A3A; }
.pd-month small { margin-top: 6px; font-size: 11px; line-height: 1.25; text-align: center; color: #6b706c; }
.pd-recent li { grid-template-columns: auto 1fr; }

.pt-badge.pt-steady { background: #E6F2EA; color: #0B4A3A; } .tip .pt-badge.pt-steady { background: #E3EFE7; color: #0B4A3A; }

/* Round mode: a table's pints together */
.round-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #032A21; color: #FBF7EC; font-size: 14.5px; }
.round-bar b { color: #F7D978; } .round-bar .btn.sm { margin-left: auto; padding: 4px 10px; font-size: 13px; color: #FBF7EC; border-color: rgba(251,247,236,.5); }
.ps-round { margin: 18px 0 10px; padding: 14px 16px; border-radius: 16px; background: #F6F1E4; border: 1px solid #E6DEC8; }
.ps-round h3 { font: 700 20px var(--display); color: #0B4A3A; margin: 0 0 8px; }
.ps-round .pt-small { margin: 8px 0 0; }
.round-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.round-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; background: #fff; border: 1px solid #E6DEC8; }
.round-list img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; } .round-list li div { display: grid; min-width: 0; } .round-list b { font-size: 14px; color: #032A21; } .round-list small { color: #6b706c; font-size: 12.5px; }
.round-stats { margin: 10px 0 0; font-size: 14.5px; color: #032A21; }

/* Best Pint Guide: calmer layout. One job per block, one primary action, nothing nested. */
.pt-hero-slim { padding: 26px 22px 18px; }
.pt-hero-slim h1 { margin: 2px 0 6px; font-size: clamp(1.9rem, 6vw, 2.8rem); }
.pt-hero-slim > p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; }
.pt-hero-slim .rp-label { margin-top: 12px; }
/* Pickers scroll sideways on one line instead of wrapping into a wall of chips */
/* Pickers wrap (no sideways scrolling); chips are compact so a long list of areas stays short */
.pt-hero-slim .rp-countries, .pt-hero-slim .rp-places, .pt-hero-slim .pt-regions.rp-on .pt-rg-b { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 0; margin: 0; max-width: 100%; -webkit-mask-image: none; mask-image: none; }
.pt-hero-slim .rp-places button, .pt-hero-slim .pt-regions.rp-on .pt-rg-b button { min-height: 31px; padding: 0 10px; font-size: 13px; }
.pt-hero-slim .rp-countries::-webkit-scrollbar, .pt-hero-slim .rp-places::-webkit-scrollbar, .pt-hero-slim .pt-rg-b::-webkit-scrollbar { display: none; }
.pt-hero-slim .rp-places button, .pt-hero-slim .pt-regions.rp-on .pt-rg-b button { flex: none; white-space: nowrap; }
.pt-hero-slim .rp-places { margin-top: 6px; }
.pt-guide .pt-grid { margin-top: 14px; }
.pt-guide .pt-card { padding: 18px 16px 14px; }
.pt-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pt-sec h2 { margin: 0; font-size: 21px; }
.pt-sec-link { font: 700 14px var(--body); color: #0B4A3A; white-space: nowrap; }
.pt-guide .pt-sub { margin: 4px 0 8px; color: #6b706c; }
.pt-guide .pt-sub a { color: #0B4A3A; }
.pt-guide .pt-maplink { display: inline; margin: 0; }
.pt-guide .pt-list { margin-top: 8px; }
.pt-guide .pt-reel-wrap { margin-top: 18px; }
.pt-guide .pt-reel { align-items: start; grid-auto-columns: min(74%, 280px); }
.pt-guide .rl-card { padding: 60px 16px 14px; gap: 4px; min-height: 0; }
.pt-guide .rl-card.has-img { padding-top: 150px; } .pt-guide .rl-card .rl-bg { height: 140px; } .pt-guide .rl-card.has-img::before { top: 90px; height: 52px; }
.pt-guide .rl-card h3 { font-size: 21px; }
.pt-guide .rl-fact { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-guide .rl-about { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.pt-guide .rl-stats { margin-top: 6px; }
.pt-guide .pt-award { margin-top: 24px; }
.pt-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
/* The floating Rate button: compact, bottom-right, and only once the bar's own button has scrolled away */
@media (max-width: 1100px) {
  .rate-fab { left: auto; right: 14px; transform: translateY(16px); opacity: 0; pointer-events: none; min-height: 48px; padding: 0 18px 0 14px; font-size: 15px; transition: opacity .2s, transform .2s; }
  body.scrolled .rate-fab { opacity: 1; transform: none; pointer-events: auto; }
}
/* Board rows: the Dream Pint star is icon-only at the row's end; unrated pubs don't show empty score columns */
.pt-guide .pt-list li { padding: 10px 10px 10px 8px; gap: 8px; }
.pt-guide .pt-rank { min-width: 20px; width: auto; font-size: 16px; }
.pt-guide .pt-unrated .pt-rank { width: 20px; }
.pt-guide .pt-pub b { font-size: 16px; line-height: 1.25; } .pt-guide .pt-pub small { font-size: 12.5px; line-height: 1.3; }
.pt-guide .pt-avg { min-width: 38px; } .pt-guide .pt-avg b { font-size: 17px; } .pt-guide .pt-avg small { font-size: 10.5px; }
.pt-guide .pt-list .dream-btn { margin: 5px 0 0; padding: 3px 9px 3px 7px; border-radius: 999px; border-color: #DDB447; color: #7A5C1E; background: #fff; font-size: 11.5px; display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; justify-self: start; }
.pt-guide .pt-list .dream-btn.on { background: #DDB447; border-color: #DDB447; color: #032A21; }
.pt-guide .pt-list .pt-badges { margin-top: 3px; }
/* Settle timer folds away until it's wanted */
.st-wrap { margin: 12px 0; } .st-wrap > summary { list-style: none; cursor: pointer; font: 600 14.5px var(--body); color: #0B4A3A; padding: 10px 12px; border: 1px dashed #BFD9C9; border-radius: 12px; background: #F3F7F3; }
.st-wrap > summary::-webkit-details-marker { display: none; } .st-wrap > summary::after { content: ' ›'; color: #6b706c; }
.st-wrap[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 0; }
.st-wrap[open] .settle { margin-top: 0; border-radius: 0 0 16px 16px; }

/* Pint gallery: visitors' pints grouped by pub, best pour first */
.pt-sec-note { font: 600 12.5px var(--body); color: #6b706c; white-space: nowrap; }
.pg-grid { display: grid; gap: 14px; margin-top: 10px; }
@media (min-width: 720px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-pub { display: grid; gap: 8px; padding: 10px; border-radius: 16px; border: 1px solid #E6DEC8; background: #FBF7EC; }
.pg-best { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: #032A21; aspect-ratio: 4 / 3; }
.pg-best img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-best figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(transparent, rgba(3,42,33,.92)); color: #FBF7EC; }
.pg-best figcaption span { display: grid; min-width: 0; } .pg-best strong { font: 700 17px var(--display); } .pg-best small { font-size: 12px; color: #D9CFB8; }
.pg-score { font: 800 22px var(--display); padding: 4px 10px; border-radius: 999px; background: #FBF7EC; color: #032A21; flex: none; }
.pg-score.t-gold { background: #F7D978; } .pg-score.t-green { background: #8FE0B0; }
.pg-more { display: flex; gap: 6px; align-items: center; }
.pg-more figure { margin: 0; position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: none; }
.pg-more img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-more figcaption { position: absolute; right: 3px; bottom: 3px; font: 800 11px var(--body); background: rgba(3,42,33,.85); color: #F7D978; padding: 1px 5px; border-radius: 999px; }
.pg-plus { font: 700 13px var(--body); color: #6b706c; }
.pg-go { font: 700 14px var(--body); color: #0B4A3A; text-decoration: none; }
.pg-empty { margin: 8px 0 0; padding: 18px 14px; border-radius: 14px; border: 1px dashed #BFD9C9; background: #F3F7F3; color: #032A21; font-size: 14.5px; text-align: center; }
.pg-empty a { color: #0B4A3A; font-weight: 700; }
/* For pubs */
.fp-tiles { display: grid; gap: 12px; margin-top: 18px; }
.fp-tiles .pk-tile { margin-top: 0; }
.fp-how { margin-top: 18px; }
.fp-how h2 { font-size: 22px; color: #0B4A3A; }
/* Home: three steps and the live places */
.tl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: st; }
.tl-steps li { background: #fff; border: 1px solid var(--line); border-top: 4px solid #DDB447; border-radius: 14px; padding: 14px 12px; display: grid; gap: 4px; counter-increment: st; }
.tl-steps b { font: 800 20px var(--display); color: #0B4A3A; }
.tl-steps b::before { content: counter(st) ". "; color: #B8862B; }
.tl-steps span { font-size: 14px; line-height: 1.45; color: #2F3B36; }
.tl-more { margin: 10px 0 0; font-weight: 700; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chips a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #0B4A3A; color: #FBF7EC; font-weight: 700; text-decoration: none; }
.tl-chips a:hover { background: #13664F; }
.tl-soon { margin: 10px 0 0; color: #5B6B63; font-size: 14px; }
@media (max-width: 640px) { .tl-steps { grid-template-columns: 1fr; } }
/* Simplify: parked features hidden; Australia coming soon */
body.tip-lean [data-park], body.tip-lean .dream-btn, body.tip-lean .pt-price-row, body.tip-lean #tipId, body.tip-lean #passport, body.tip-lean #mpDreamCard, body.tip-lean .ps-round, body.tip-lean .round-bar, body.tip-lean .price-field { display: none !important; }
.rp-soon { margin: 8px 0 0; font-size: 13px; color: #BFD3C9; }
.pt-wait summary { cursor: pointer; font-weight: 700; color: #0B4A3A; padding: 6px 0; }
.pt-wait p { margin: 6px 0 0; line-height: 1.9; font-size: 14px; }
.pt-wait a { color: #0B4A3A; }
.pt-award-lean .pt-plaque img { max-width: 200px; height: auto; }
.rt-more { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; }
.rt-more summary { cursor: pointer; font-weight: 700; color: #0B4A3A; min-height: 40px; display: flex; align-items: center; }
.rt-more[open] { padding-bottom: 12px; display: grid; gap: 10px; }
.pt-list li.pt-empty { display: block; line-height: 1.5; }
body.tip-lean .pt-guide .pt-grid { grid-template-columns: 1fr; }
.fp-photo { margin: -4px -4px 8px; }
.fp-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }
.pt-award-lean .pt-door img { width: 100%; height: auto; border-radius: 12px; }
/* Rate: taste comes after the photo (rated before the score is shown, so the score can't sway it) */
#rateForm:not(.has-photo) .pt-taste { display: none; }
#rateForm.has-photo .pt-taste { animation: tasteIn .35s ease-out; }
@keyframes tasteIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Rate: optional details, a quiet row */
.rt-more { border: 0; border-radius: 12px; background: #F4EFE2; padding: 0 14px; }
.rt-more summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; min-height: 52px; padding: 8px 0; }
.rt-more summary::-webkit-details-marker { display: none; }
.rt-more summary::after { content: '+'; grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0B4A3A; color: #FBF7EC; font: 700 18px/1 var(--body); }
.rt-more[open] summary::after { content: '−'; }
.rm-t { font: 700 15px var(--body); color: #0B4A3A; }
.rm-s { grid-column: 1; font-size: 13px; color: #5B6B63; }
.rt-more[open] { padding-bottom: 14px; display: grid; gap: 12px; }
.hg-pin.near { background: #D9A13B; }
.hg-pin::after { content: attr(data-you); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 10.5px var(--body); color: #0B4A3A; }
.hg-bar { margin-top: 18px; }
.hg-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; color: #4b5f57; }
.hg-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.hg-k-sweet { background: #3FAE6A; border-radius: 6px !important; width: 18px !important; margin-left: 0; }
.hg-k-you { background: #fff; border-color: #0B4A3A !important; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9c0a8; margin-left: 8px; }
/* T.I.P Score Index */
.tsi { margin: 14px 0; }
.tsi h3 { font-size: 18px; color: #0B4A3A; margin: 0 0 8px; }
.tsi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tsi-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: #F6F1E4; border-left: 5px solid #C9BFA6; position: relative; }
.tsi-list li b { font: 700 15px var(--display); color: #0B4A3A; }
.tsi-r { font: 700 13px var(--body); color: #4b5f57; }
.tsi-list li small { grid-column: 1 / -1; color: #4b5f57; font-size: 12.5px; }
.tsi-master { border-left-color: #B8862B !important; } .tsi-perfect { border-left-color: #DDB447 !important; } .tsi-grand { border-left-color: #13664F !important; }
.tsi-decent { border-left-color: #6FA58A !important; } .tsi-work { border-left-color: #D9A13B !important; } .tsi-bar { border-left-color: #C9654A !important; }
.tsi-list li.on { background: #0B4A3A; } .tsi-list li.on b, .tsi-list li.on .tsi-r { color: #F1D27A; } .tsi-list li.on small { color: #DCE8E1; }
.tsi-list li em { position: absolute; top: -8px; right: 10px; font: 700 10.5px var(--body); font-style: normal; background: #DDB447; color: #032A21; padding: 2px 8px; border-radius: 999px; }
.hg-sl { position: relative; height: 14px; }
.hg-sl span { position: absolute; transform: translateX(-50%); white-space: nowrap; font: 700 9.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #13664F; }
.tsi-list li { text-align: left; }
/* Result: "Rate another pint" is a clear, full-width action under Share; less empty space at the foot of T.I.P pages */
.rt-again { display: flex; width: 100%; justify-content: center; gap: 10px; margin: 12px 0 4px; min-height: 56px; background: #0B4A3A; color: #FBF7EC; border: 0; font-size: 18px; }
.rt-again:hover { background: #13664F; }
.rt-again .ti { width: 22px; height: 22px; }
.tip .pt-main { padding-bottom: 8px; }
.tip-foot { margin-top: 20px; }
@media (max-width: 700px) { body.pints { padding-bottom: 0; } .tip-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } body:has(.rate-fab) .tip-foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
.ps-share { width: 100%; align-self: stretch; justify-self: stretch; }
.ps-share .btn { width: 100%; justify-content: center; }
.ps-share .pt-small:empty { display: none; }
.rt-again { margin-top: 10px; }
.tl-step-a { margin-top: 4px; justify-self: start; font-weight: 700; color: #13664F; text-decoration: underline; text-underline-offset: 3px; }
.tl-step-a:hover { color: #0B4A3A; }
/* Settle timer prompt: compact card with a clear Start button */
.st-wrap > summary { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid #CFE3D6; border-radius: 16px; background: linear-gradient(135deg, #F3F8F4, #E7F1EA); }
.st-wrap > summary::after { content: none; }
.st-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #0B4A3A; font-size: 20px; box-shadow: 0 0 0 3px #DDB447 inset; }
.st-t { display: grid; gap: 1px; flex: 1; min-width: 0; line-height: 1.25; } .st-t b { font: 800 16px var(--body); color: #0B4A3A; } .st-t small { font-size: 13.5px; color: #4A5A52; }
.st-go { flex: none; padding: 9px 14px; border-radius: 999px; background: #0B4A3A; color: #FBF7EC; font: 800 14px var(--body); white-space: nowrap; }
.st-wrap[open] > summary .st-go { background: #fff; color: #0B4A3A; box-shadow: 0 0 0 1.5px #0B4A3A inset; }
.st-go-b { display: none; } .st-wrap[open] .st-go-a { display: none; } .st-wrap[open] .st-go-b { display: inline; }
/* A Pour Relation: the T.I.P booby prize */
.pt-pr { margin: 22px 0 0; padding: 22px 18px; border-radius: 18px; background: #F4EEE2; border: 1px solid #E3DCC6; border-top: 5px solid #8C6E5A; }
.pt-pr h2 { margin: 2px 0 6px; font: 800 28px var(--display); color: #4A3426; }
.pt-pr .pt-eyebrow { color: #6E5442; }
.pr-lead { margin: 0 0 14px; color: #3B3430; line-height: 1.5; }
.pr-month h3 { font: 800 17px var(--body); color: #4A3426; margin: 0 0 8px; } .pr-month h3 span { font-weight: 600; color: #5E4F44; }
.pr-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pr-grid li { position: relative; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #E3DCC6; }
.pr-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.8); }
.pr-grid .pr-s { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: #8C3B2E; color: #fff; font: 800 13px var(--body); }
.pr-grid small { display: block; padding: 5px 8px; font-weight: 700; font-size: 12px; color: #4A3426; }
.pr-grid .pr-empty { grid-column: 1 / -1; padding: 14px; text-align: center; color: #7A6A5E; border-style: dashed; }
.pr-rules li b { color: #4A3426; }
.pr-race { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #E3DCC6; }
.pr-race h3 { font: 800 16px var(--body); color: #4A3426; margin: 0 0 6px; }
.pr-race ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; } .pr-race li b { color: #4A3426; } .pr-race li small { margin-left: 6px; color: #7A6A5E; } .pr-race li span { float: right; font-weight: 800; color: #8C3B2E; }
.st-t small { white-space: nowrap; font-size: 13px; }
.st-go { padding: 12px 18px; font-size: 15.5px; min-height: 46px; display: inline-flex; align-items: center; }
.pr-month h3 { white-space: nowrap; }
#mapTitle { flex: 1 1 100%; } #mapTitle ~ #mapLink { margin-top: -2px; } .pt-sec:has(#mapTitle) { flex-wrap: wrap; }
.pt-world-k { margin: -4px 0 2px; color: #B8862B; }
.fp-who { margin: -4px 0 8px; font-weight: 700; color: #F7D978; }
#world { grid-column: 1 / -1; }
/* How it works: a button in each step */
.tl-step-b { margin-top: 8px; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px 0 16px; border-radius: 999px; font: 800 15.5px var(--body); text-decoration: none; }
.tl-step-b .ti { width: 20px; height: 20px; }
.tsb-gold { background: #DDB447; color: #032A21; box-shadow: 0 0 0 2.5px #032A21; }
.tsb-white { background: #fff; color: #0B4A3A; box-shadow: 0 0 0 2px #0B4A3A inset; }
.tsb-green { background: #0B4A3A; color: #F7D978; }
.tl-step-b:hover { filter: brightness(1.05); }
.tsb-green .ti, .tsb-green:visited .ti { background-color: #F7D978 !important; }
.tsb-gold .ti { background-color: #032A21; } .tsb-white .ti { background-color: #0B4A3A; }
/* Hero: Best Pints is a white button next to the gold Rate my pint */
.tl-hero-photo .tl-btn.line { background: #FBF7EC; color: #0B4A3A; border-color: #FBF7EC; backdrop-filter: none; }
.tl-hero-photo .tl-btn.line .ti { background-color: #0B4A3A; }
/* Worldwide: a gold stamp button in the country row; the world board shows only when it's on */
#world { display: none; } body.world-on #world { display: block; }
body.world-on #boardCard, body.world-on #pubMap, body.world-on .pt-regions, body.world-on .pt-regions.rp-on, body.world-on .rp-countries, body.world-on .rp-label, body.world-on .rp-places, body.world-on #gallery, body.world-on #foodieCard { display: none !important; }
.rp-back { display: none; } body.world-on .rp-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(241,227,198,.6); background: transparent; color: #F1E3C6; font: 700 15px var(--body); cursor: pointer; } body.world-on .rp-back:hover { background: rgba(241,227,198,.12); }
.rp-world { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; cursor: pointer;
  font: 800 13.5px var(--body); letter-spacing: .02em; color: #032A21; background: radial-gradient(circle at 30% 30%, #F7D978, #DDB447 60%, #B8862B); border: 0;
  box-shadow: 0 0 0 2px #032A21 inset, 0 0 0 3.5px #F7D978 inset, 0 2px 8px rgba(0,0,0,.3); }
.rp-world span { font-size: 18px; line-height: 1; }
.rp-world[aria-pressed="true"] { background: #FBF7EC; box-shadow: 0 0 0 2px #DDB447 inset, 0 2px 8px rgba(0,0,0,.3); }
.rp-label-w { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-label-w .rp-world { letter-spacing: .02em; text-transform: none; }
.pt-world-k { margin: 4px 0 2px; }
/* Worldwide button: its own bar just under the green hero */
.pt-worldbar { margin: 14px 0 4px; }
.pt-worldbar .rp-world { width: 100%; justify-content: center; min-height: 56px; gap: 10px; padding: 8px 18px; font-size: 17px; border-radius: 16px; flex-wrap: wrap; row-gap: 0; }
.pt-worldbar .rp-world > span:first-child { font-size: 24px; }
.pt-worldbar .rw-s { font: 600 13px var(--body); opacity: .85; }
.pt-worldbar .rw-s::before { content: '· '; }
.pt-worldbar .rp-world[aria-pressed="true"] .rw-t::after { content: ' ✓'; }
/* Mobile safety: cards never grow wider than the screen; long words and emails wrap */
.pt-card, .pt-hero, .pt-grid > *, .pt-main > section, form { min-width: 0; }
.pt-card, .pt-hero, .tl-wrap, .tip-foot { overflow-wrap: break-word; }
.pt-card a[href^="mailto:"] { overflow-wrap: anywhere; }
.st-t small { white-space: normal; }
.st-go { white-space: normal; text-align: center; line-height: 1.15; max-width: 130px; }
.st-wrap > summary { min-width: 0; }
@media (max-width: 400px) { .tl-hero-photo .tl-ctas .tl-btn { white-space: normal; line-height: 1.1; text-align: center; } }
@media (max-width: 400px) { .st-wrap > summary { gap: 10px; padding: 10px 10px 10px 12px; } .st-ic { width: 36px; height: 36px; font-size: 17px; } .st-go { padding: 10px 13px; font-size: 14.5px; min-height: 44px; } .st-t b { white-space: nowrap; font-size: 15.5px; } }
/* Rate another: floating shortcut on the result */
.again-fab { position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1500; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 16px 0 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: #DDB447; color: #032A21; font: 800 15px var(--body); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 3px #032A21; }
.again-fab[hidden] { display: none; }
.again-fab .ti { width: 20px; height: 20px; margin: 0; }
/* T.I.P pages have no Foodie bottom tab bar, so no space reserved for it */
body.tip main { margin-bottom: 0; }
body.tip .tl-foot { margin-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.nw-card h2.nw-h { white-space: nowrap; font-size: clamp(18px, 5.5vw, 30px); }
/* T.I.P footer: links first, then the small print, sister site and copyright */
.tl-foot p, .tip-foot p { margin: 0 0 10px; line-height: 1.55; }
.tl-foot p:last-child, .tip-foot p:last-child { margin-bottom: 0; }
.tl-foot .tf-links, .tip-foot .tf-links { font-weight: 600; }
.tl-foot .tf-copy, .tip-foot .tf-copy { margin-top: 14px; font-size: 12.5px; }
/* Board sort toggle: pour or taste */
.pt-sort { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 10px; padding: 3px; border-radius: 999px; background: #F1EBDD; border: 1px solid #E3DCC6; }
.pt-sort > span { padding: 0 8px 0 10px; font: 700 12.5px var(--body); color: #6B5E4B; text-transform: uppercase; letter-spacing: .06em; }
.pt-sort button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #0B4A3A; font: 800 14.5px var(--body); cursor: pointer; }
.pt-sort button[aria-pressed="true"] { background: #0B4A3A; color: #FBF7EC; }
/* Demo data label */
.pt-demo { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #8C3B2E; color: #fff; font: 800 10.5px var(--body); font-style: normal; letter-spacing: .08em; }
.pg-demo { position: absolute; top: 8px; right: 8px; margin: 0; }
.pr-demo { position: absolute; top: 6px; right: 6px; margin: 0; }
/* T.I.P contact form */
.tc-form { display: grid; gap: 12px; }
.tc-form label { display: grid; gap: 5px; font-weight: 700; color: #0B4A3A; }
.tc-form label i { font-weight: 500; font-style: normal; color: #6B5E4B; font-size: 13px; }
.tc-form input, .tc-form select, .tc-form textarea { min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid #D9D0B8; font: inherit; background: #fff; }
.tc-hp { position: absolute; left: -9999px; }
.tc-send { min-height: 52px; border: 0; border-radius: 999px; background: #DDB447; color: #032A21; font: 800 17px var(--body); cursor: pointer; }
.tc-err { color: #8C3B2E; margin: 0; }
.tc-done { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: #EEF5F0; }
.tc-done[hidden] { display: none; }
.pt-worldbar .rw-s::before { content: none; } .pt-worldbar .rw-s { flex-basis: 100%; text-align: center; }

.pt-verify{margin:.6rem 0 0;padding:.55rem .75rem;border-radius:10px;font-size:.9rem;background:#eef3ef;color:#1f3b2c}
.pt-v-verified{background:#e2f2e6;color:#14532d;font-weight:600}
.pt-v-held{background:#fdf1e6;color:#7a3a12}
.pt-geo-note{margin-top:.5rem}
.st-pick small{display:block;font-weight:400;margin-top:.15rem}

section.pt-card.pt-gallery { display: block; margin-top: 0; }
.pt-foodie h2 { margin: 2px 0 6px; }
.pt-foodie .btn { margin-top: 8px; }

/* Award name: "The Irish Pint · Best of 2027". On phones it breaks cleanly into two lines. */
.aw-h .aw-yr { white-space: nowrap; }
@media (max-width: 640px) {
  .aw-h .aw-sep { display: none; }
  .aw-h .aw-yr { display: block; color: #D4B25A; }
  .pt-world .aw-h .aw-yr { color: #9A7A2C; padding-left: 0; }
}

/* The gallery has its own page (/gallery); the guide page shows a link card instead. */
body:not(.pg-page) #gallery { display: none !important; }
body.pg-page .pt-worldbar, body.pg-page #world, body.pg-page #boardCard, body.pg-page #pubMap, body.pg-page #award, body.pg-page #pour-relation, body.pg-page #foodieCard, body.pg-page #galTeaser { display: none !important; }
body.pg-page .pt-grid { display: none; }
.pt-galteaser { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 16px 18px; }
.pt-galteaser[hidden] { display: none; }
.pt-galteaser .pgt-ico { font-size: 30px; line-height: 1; }
.pt-galteaser .pgt-t { flex: 1; display: grid; gap: 2px; }
.pt-galteaser .pgt-t b { font: 700 19px/1.2 var(--display, Georgia, serif); color: #0B4A3A; }
.pt-galteaser .pgt-t small { color: #5b6170; font-size: 14px; }
.pt-galteaser .pgt-go { font-weight: 700; color: #0B4A3A; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .pt-galteaser { flex-wrap: wrap; } .pt-galteaser .pgt-go { width: 100%; padding-left: 44px; } }
.pt-foodie .pt-foodie-b { text-decoration: none; }

/* Gallery: photos are buttons that open the viewer */
.pg-open { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; }
.pg-open:focus-visible { outline: 3px solid #D4B25A; outline-offset: -3px; }
.pg-best .pg-name { display: inline; width: auto; height: auto; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: rgba(247,217,120,.6); text-underline-offset: 3px; }
.pg-more .pg-plus { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: #EFE7D3; color: #0B4A3A; font: 800 16px var(--body); }
/* The viewer */
.pgv { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: #06150F; color: #FBF7EC; display: none; }
.pgv[open] { display: flex; flex-direction: column; }
.pgv::backdrop { background: rgba(0,0,0,.85); }
body.pgv-on { overflow: hidden; }
.pgv-top { display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 16px 8px; }
.pgv-n { font: 600 14px var(--body); color: #D9CFB8; }
.pgv-x { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: rgba(255,255,255,.1); }
.pgv-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.pgv-fig { margin: 0; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pgv-fig img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; border-radius: 10px; }
.pgv-fig figcaption { display: flex; gap: 10px; align-items: center; padding: 10px 16px; max-width: 600px; }
.pgv-fig figcaption span { display: grid; gap: 2px; font-size: 15px; } .pgv-fig figcaption .pt-demo { justify-self: start; width: auto; } .pgv-fig figcaption small { color: #BFB59C; font-size: 13px; }
.pgv-prev, .pgv-next { all: unset; cursor: pointer; position: absolute; top: 45%; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; font-size: 34px; line-height: 1; border-radius: 50%; background: rgba(6,21,15,.65); color: #fff; }
.pgv-prev { left: 8px; } .pgv-next { right: 8px; }
.pgv-prev[hidden], .pgv-next[hidden] { display: none; }
.pgv-pub { background: #FBF7EC; color: #13241D; padding: 16px 18px max(18px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
.pgv-pub h3 { margin: 0; font: 700 22px var(--display); color: #0B4A3A; }
.pgv-area { margin: 2px 0 6px; color: #5b6170; font-size: 14px; } .pgv-sc { margin: 0 0 6px; font-size: 15px; }
.pgv-act { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; } .pgv-act .btn { text-decoration: none; }

/* Top 10 + Show more on the boards */
.pt-list .pt-more { list-style: none; display: block; padding: 0; border: 0; background: none; box-shadow: none; }
.pt-more button { display: block; width: 100%; min-height: 48px; border-radius: 999px; border: 2px solid var(--gold, #DDB447); background: #fff; color: #0F3B2E; font: 700 16px var(--body); cursor: pointer; }
.pt-more button:hover { background: #FBF4DF; }

/* POUR Relation: collapsed until tapped */
.pr-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 50px; margin: 14px 0 4px; border-radius: 999px; background: #5A3A2A; color: #fff; font: 700 16px var(--body); }
.pr-fold > summary::-webkit-details-marker { display: none; }
.pr-fold > summary:hover { background: #6E4A37; }
.pr-fold .pr-close, .pr-fold[open] .pr-open { display: none; }
.pr-fold[open] .pr-close { display: inline; }
.pr-fold[open] > summary { background: transparent; color: #5A3A2A; border: 2px solid #5A3A2A; }

/* Season countdown (T.I.P home) */
.tl-season { margin: 18px 16px 0; padding: 18px 16px 16px; border-radius: 18px; background: linear-gradient(160deg, #2B6E55 0%, #1D5541 100%); color: #F9F6EE; text-align: center; border: 1px solid rgba(212,175,55,.3); }
.tl-season-k { margin: 0 0 10px; font: 700 12px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F2CF6A; }
.tl-cd { display: flex; justify-content: center; gap: 10px; }
.tl-cd span { display: grid; min-width: 78px; padding: 8px 6px; border-radius: 12px; background: rgba(249,246,238,.12); border: 1px solid rgba(249,246,238,.18); }
.tl-cd b { font: 700 30px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.tl-cd small { font-size: 12px; color: #D6E6DC; text-transform: uppercase; letter-spacing: .08em; }
.tl-season-s { margin: 10px 0 0; font-size: 15px; color: #E4EFE8; }
.tl-season-s b { color: #F9F6EE; }

/* The one T.I.P plaque (rectangular cast brass) */
.pt-plaque img, .fp-plaque img { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; border-radius: 0; box-shadow: none; background: none; }
.pt-plaque { margin: 0 auto 6px; }
.pl-cap { text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-top: 6px; }
.pt-award .pt-plaque { width: min(380px, 100%); }

/* Floating Rate button never covers content: room at the bottom of every T.I.P page, and it steps aside for the footer */
@media (max-width: 1100px) {
  body.tip main, body.pints main, .pt-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.foot-in .rate-fab, body.scrolled.foot-in .rate-fab { opacity: 0; transform: translateY(16px); pointer-events: none; }
}

/* The award medallion */
.pt-award .pt-plaque { width: min(320px, 82%); }
.fp-plaque img { max-width: 300px; }
.pt-plaque img, .fp-plaque img { filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }

/* The T.I.P Off newsletter card */
.to-card { margin: 18px 0; padding: 20px 18px; border-radius: 20px; background: linear-gradient(160deg, #2B6E55 0%, #1D5541 100%); color: #F9F6EE; border: 1px solid rgba(212,175,55,.35); }
.to-kicker { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F2CF6A; }
.to-kicker .ti { width: 18px; height: 18px; background: currentColor; }
.to-h { margin: 0 0 6px; font: 700 26px/1.15 var(--display); color: #fff; }
.to-p { margin: 0 0 14px; font-size: 16px; color: #E4EFE8; }
.to-form { display: grid; gap: 10px; }
.to-form .field { color: #F9F6EE; font-weight: 600; }
.to-form input, .to-form select { width: 100%; min-height: 48px; font-size: 16px; border-radius: 12px; border: 1px solid rgba(249,246,238,.35); background: #F9F6EE; color: #1A201C; padding: 0 12px; }
.to-err { margin: 0; color: #FFD9D2; font-weight: 600; }
.to-fine { margin: 0; font-size: 13px; color: #CFE2D6; } .to-fine a { color: #F2CF6A; }
.to-done { margin: 6px 0 0; font-size: 16px; color: #fff; }
.to-compact .to-p { display: none; } .to-compact .to-h { font-size: 22px; }

/* ---------- Rate My Pint: three steps ---------- */
.rf-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 16px; padding: 0; counter-reset: none; }
.rf-steps li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 12px; background: #EFE9DA; color: #5b6170; font: 600 14px/1.15 var(--body); cursor: pointer; }
.rf-steps li b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0B4A3A; font: 700 14px var(--display); }
.rf-steps li[aria-current="step"] { background: #0B4A3A; color: #fff; } .rf-steps li[aria-current="step"] b { background: #D4AF37; color: #0B120E; }
.rf-steps li.done { background: #DCEBE2; color: #0B4A3A; } .rf-steps li.done b { background: #0B4A3A; color: #fff; }
.rf-step h2 { margin: 0 0 4px; font-size: 24px; } .rf-step h2:focus { outline: none; }
.rf-hint { margin: 0 0 12px; font-size: 16px; color: #3d4450; }
.rf-step .rf-next, .rf-step #go { width: 100%; margin-top: 14px; }
.rf-near-h { margin: 6px 0 8px; display: flex; align-items: center; gap: 6px; font-weight: 700; color: #0B4A3A; }
.rf-near-h .ti, .rf-chosen .ti { width: 18px; height: 18px; background: currentColor; }
.rf-near, .rf-results { display: grid; gap: 8px; }
.rf-results:not(:empty) { margin-top: 8px; }
.rf-pub { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; min-height: 52px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(212,175,55,.45); }
.rf-pub b { font-size: 16px; color: #0B4A3A; } .rf-pub small { font-size: 14px; color: #5b6170; }
.rf-pub:hover, .rf-pub:focus-visible { border-color: #0B4A3A; outline: none; box-shadow: 0 0 0 3px rgba(11,74,58,.18); }
.rf-search { margin-top: 14px; } .rf-search input { min-height: 48px; font-size: 16px; }
.rf-chosen { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #E6F1EA; color: #0B4A3A; }
.rf-chosen > span:nth-child(2) { flex: 1; display: grid; } .rf-chosen b { font-size: 17px; } .rf-chosen small { color: #3d4450; }
.rf-stout { border: 0; margin: 18px 0 0; padding: 0; } .rf-stout legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.rf-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-chips button { min-height: 48px; border-radius: 12px; border: 1.5px solid #0B4A3A; background: #fff; color: #0B4A3A; font: 700 16px var(--body); cursor: pointer; }
.rf-chips button[aria-checked="true"] { background: #0B4A3A; color: #fff; }
#stoutMoreWrap { margin-top: 10px; }
.rf-taste { text-align: center; padding: 8px 0 4px; }
.rf-taste output { display: grid; justify-items: center; margin-bottom: 10px; }
.rf-taste output b { font: 700 56px/1 var(--display); color: #0B4A3A; font-variant-numeric: tabular-nums; }
.rf-taste output span { margin-top: 4px; font: 700 15px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #9A7A2C; }
#tasteRange { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; --p: 72%; touch-action: pan-y; }
#tasteRange::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #0B4A3A var(--p), #E4DDCB var(--p)); }
#tasteRange::-moz-range-track { height: 12px; border-radius: 999px; background: #E4DDCB; } #tasteRange::-moz-range-progress { height: 12px; border-radius: 999px; background: #0B4A3A; }
#tasteRange::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -14px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #F9F6EE 0 38%, #14221B 39%); border: 3px solid #D4AF37; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
#tasteRange::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: #14221B; border: 3px solid #D4AF37; }
#tasteRange:focus-visible { outline: 3px solid #D4AF37; outline-offset: 4px; border-radius: 8px; }
.rf-scale { display: flex; justify-content: space-between; font-size: 13px; color: #5b6170; }
.rf-pace { margin: 10px 0 0; text-align: center; }
/* result */
.rs-k { margin: 0; font: 700 12px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #9A7A2C; }
.rs-parts { margin: 4px 0 8px; font-size: 16px; color: #3d4450; } .rs-parts b { font-family: var(--display); font-variant-numeric: tabular-nums; color: #0B4A3A; }
.rs-rank { margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: #F6EED6; color: #3D2F0E; font-size: 16px; }
.rs-rank small { display: block; margin-top: 4px; color: #5b6170; }
.rs-prog { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: #E4DDCB; overflow: hidden; } .rs-prog i { display: block; height: 100%; background: #0B4A3A; }
.rs-acts { display: grid; gap: 10px; margin: 14px 0 6px; }
.rs-acts .btn { width: 100%; }
.rs-home { background: #0B4A3A; color: #fff; border-color: #0B4A3A; }
/* Get Home Safe */
.hs { border: 0; border-radius: 20px; padding: 22px 18px; width: min(420px, 92vw); background: #F9F6EE; color: #1A201C; }
.hs::backdrop { background: rgba(11,18,14,.6); }
.hs h2 { margin: 0 0 6px; color: #0B4A3A; } .hs p { margin: 0 0 14px; }
.hs-list { display: grid; gap: 10px; margin-bottom: 12px; } .hs-list .btn, .hs-x { width: 100%; text-decoration: none; }
/* Score Card sheet */
.sc { border: 0; padding: 16px; width: min(460px, 96vw); max-height: 96dvh; border-radius: 22px; background: #F9F6EE; color: #1A201C; }
.sc::backdrop { background: rgba(11,18,14,.7); }
.sc-top { display: flex; justify-content: space-between; align-items: center; } .sc-top h2 { margin: 0; font-size: 22px; color: #0B4A3A; }
.sc-x { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; border-radius: 50%; }
.sc-fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 10px; }
.sc-fmt button { min-height: 44px; border-radius: 12px; border: 1.5px solid #0B4A3A; background: #fff; color: #0B4A3A; font: 700 15px var(--body); }
.sc-fmt button[aria-selected="true"] { background: #0B4A3A; color: #fff; }
.sc-prev { display: grid; place-items: center; } .sc-prev img { display: block; max-width: 100%; max-height: 52dvh; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sc-acts { display: grid; gap: 8px; margin-top: 12px; } .sc-acts .btn.big { width: 100%; }
.sc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sc-row .btn { min-height: 44px; padding: 0 4px; font-size: 14px; }
.sc-msg { margin: 0; text-align: center; min-height: 1.2em; }
.rs-acts .btn { width: 100%; justify-content: center; }
.hs-k { margin: 0 0 6px !important; font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #9A7A2C; }
.rf-chips button[aria-checked="true"], .rf-chips button[aria-checked="true"]:hover, .rf-chips button[aria-checked="true"]:focus { background: #0B4A3A; color: #fff; border-color: #0B4A3A; }
.rf-chosen .btn { flex: none; min-height: 40px; width: auto; padding: 0 14px; font-size: 14px; }
/* ---------- The Best Pint Guide ---------- */
.gd-cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.gd-cities button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(241,227,198,.55); background: transparent; color: #F1E3C6; font: 700 15px var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gd-cities button[aria-pressed="true"] { background: #F1E3C6; color: #0B4A3A; border-color: #F1E3C6; }
.gd-cities [data-near] { border-color: #D4AF37; color: #F2CF6A; } .gd-cities [data-near][aria-pressed="true"] { background: #D4AF37; color: #0B120E; }
.gd-cities [data-near] .ti { width: 16px; height: 16px; background: currentColor; }
.gd-cities [data-near].busy { opacity: .6; }
.gd-cities [data-more] { border-style: dashed; }
.gd-msg { margin: 0; min-height: 0; font-size: 14px; color: #F2CF6A; } .gd-msg:empty { display: none; }
body.pints:not(.gd-more):has(.gd-cities) .pt-regions, body.pints:not(.gd-more):has(.gd-cities) .rp-countries, body.pints:not(.gd-more):has(.gd-cities) .rp-label { display: none !important; }
.pt-sort3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: #EFE9DA; }
.pt-sort3 button { min-height: 44px; border-radius: 999px; border: 0; background: transparent; color: #0B4A3A; font: 700 15px var(--body); }
.pt-sort3 button[aria-pressed="true"] { background: #0B4A3A; color: #fff; }
.pt-list .pt-tier { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 4px 6px; border: 0; background: none; }
.pt-list .pt-tier b { font: 700 18px var(--display); color: #0B4A3A; } .pt-list .pt-tier small { color: #5b6170; font-size: 13px; text-align: right; }
.pt-list .pt-parts { color: #3d4450; } .pt-list .pt-parts b { font-variant-numeric: tabular-nums; }
.pt-list .pt-big b { font-size: 28px; font-family: var(--display); font-variant-numeric: tabular-nums; }
.pt-list .pt-rising .pt-big b { color: #3d4450; }
.pt-prog { display: block; height: 6px; margin: 6px 0 2px; max-width: 220px; border-radius: 999px; background: #E4DDCB; overflow: hidden; } .pt-prog i { display: block; height: 100%; background: #D4AF37; }
.pt-prog-t { font-size: 13px; color: #5b6170; }
.pt-list .pt-ranked .pt-rank { color: #9A7A2C; font-family: var(--display); font-weight: 700; }
body.pints:not(.gd-more):has(.gd-cities) #places { display: none !important; }

/* City vs City ticker (home) */
.tl-vs { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(249,246,238,.18); }
.tl-vs-k { margin: 0 0 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 12px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F2CF6A; }
.tl-live { width: 8px; height: 8px; border-radius: 50%; background: #7BE09B; box-shadow: 0 0 0 0 rgba(123,224,155,.7); animation: tlLive 2s infinite; }
@keyframes tlLive { 70% { box-shadow: 0 0 0 8px rgba(123,224,155,0); } 100% { box-shadow: 0 0 0 0 rgba(123,224,155,0); } }
.tl-vs-track { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tl-vs-track::-webkit-scrollbar { display: none; }
.tl-vs-row { display: flex; align-items: center; gap: 4px; width: max-content; margin: 0 auto; padding: 2px 4px; transition: opacity .3s; }
.tl-vs-row.flash { animation: vsFlash 1.2s; } @keyframes vsFlash { 0% { opacity: .3; } 100% { opacity: 1; } }
.tl-vs-i { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: 10px; color: #F9F6EE; text-decoration: none; white-space: nowrap; }
.tl-vs-i:hover { background: rgba(249,246,238,.1); }
.tl-vs-n { font-size: 12px; color: #CFE2D6; } .tl-vs-i b { font-size: 16px; } .tl-vs-i em { font: 700 18px var(--display); font-style: normal; color: #F2CF6A; font-variant-numeric: tabular-nums; }
.tl-vs-dot { color: rgba(249,246,238,.4); }
.tl-vs-empty { margin: 0; text-align: center; font-size: 15px; color: #E4EFE8; }
@media (prefers-reduced-motion: reduce) { .tl-live, .tl-vs-row.flash { animation: none; } }

.tl-vs-track.running { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tl-vs-row.run { margin: 0; animation: vsRun var(--t, 30s) linear infinite; }
.tl-vs-track.running:hover .tl-vs-row, .tl-vs-track.running:active .tl-vs-row, .tl-vs-track.running:focus-within .tl-vs-row { animation-play-state: paused; }
.tl-vs-copy { display: inline-flex; align-items: center; gap: 4px; }
@keyframes vsRun { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--w))); } }

/* POUR Relation of the Month vote */
.pr-vote-k { margin: 0 0 4px; font-size: 15px; }
.pr-grid li { position: relative; }
.pr-vote { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 6px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #C93B2B; background: #fff; color: #C93B2B; font: 700 14px var(--body); cursor: pointer; }
.pr-vote span { font-weight: 600; font-size: 12px; opacity: .85; }
.pr-vote[aria-pressed="true"] { background: #C93B2B; color: #fff; }
.pr-crown { position: absolute; top: 44px; left: 8px; padding: 2px 8px; border-radius: 999px; background: #C93B2B; color: #fff; font: 700 11px var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.pr-lead-pint img { outline: 3px solid #C93B2B; outline-offset: -3px; }

/* ===== T.I.P brand system (Phase 1) ===== */
body.tip {
  --color-stout-bg: #0B120E;       /* ultra-deep stout black-green: headers, footers, accents */
  --color-stout-surface: #14221B;  /* deep forest container surface */
  --color-head-cream: #F9F6EE;     /* warm Irish linen: cards and surfaces */
  --color-head-pure: #FFFFFF;      /* crisp foam white */
  --color-gold-brass: #D4AF37;     /* aged brass: awards, #1 badges and primary actions only */
  --color-gold-brass-2: #C5A059;
  --color-ink: #1A201C;            /* type on cream */
  --color-pour-red: #C93B2B;       /* The POUR Relation only */
  --brass-line: rgba(212, 175, 55, 0.3);
  --ivory: #F1ECDF; --card: var(--color-head-cream); --text: var(--color-ink);
  background: var(--ivory);
}
/* Cards: refined cream with a fine brass rule; no gold gradients. Gold must feel rare and earned. */
body.tip .pt-card, body.tip .pt-list li:not(.pt-tier):not(.pt-more):not(.muted):not(.pt-split-row), body.tip .to-card .to-form input { border-color: var(--brass-line); }
body.tip .pt-card, body.tip .pt-list li:not(.pt-tier):not(.pt-more):not(.muted):not(.pt-split-row) { background: var(--color-head-cream); }
body.tip .pt-list li.pt-ranked:first-of-type, body.tip .pt-list .pt-tier + li.pt-ranked { border: 1px solid var(--color-gold-brass); box-shadow: inset 4px 0 0 var(--color-gold-brass); }
body.tip .rp-world { background: var(--color-gold-brass); box-shadow: 0 0 0 2px var(--color-stout-bg) inset, 0 2px 8px rgba(0,0,0,.25); }
body.tip .gp-btn b { background: none; -webkit-text-fill-color: var(--color-gold-brass); color: var(--color-gold-brass); }
/* Venue tiles: cream card, fine brass rule, a brass edge, dark serif heading (no gold-on-gold) */
body.tip .pk-tile { background: var(--color-head-cream); border: 1px solid rgba(212,175,55,.55); box-shadow: inset 5px 0 0 var(--color-gold-brass), 0 2px 10px rgba(11,18,14,.06); color: var(--color-ink); }
body.tip .pk-tile b { background: none; -webkit-text-fill-color: #0B4A3A; color: #0B4A3A; font-size: 20px; }
body.tip .pk-tile small { color: #3d4450; font-size: 16px; }
body.tip .pk-tile-ico, body.tip .pk-tile .gp-btn-go { color: #9A7A2C; }
body.tip .pk-tile:hover { filter: none; border-color: var(--color-gold-brass); }
body.tip .pd-month b { background: var(--color-gold-brass); }
body.tip .pr-vote, body.tip .pr-crown { --pr: var(--color-pour-red); }
/* Scores: always the serif display face, even-width digits */
body.tip .pt-avg b, body.tip .pt-score b, body.tip .mp-score, body.tip .rs-parts b, body.tip .pt-parts b, body.tip .tl-cd b, body.tip .tl-vs-i em, body.tip .pg-score, body.tip .pr-s, body.tip #tasteNum { font-family: var(--display, Fraunces, Georgia, serif); font-variant-numeric: tabular-nums lining-nums; }
/* Body text: 16px minimum on phones */
@media (max-width: 700px) {
  body.tip main p:not(.kit-sheet *):not(.pt-small):not(.pl-cap):not(.pt-eyebrow):not(.rs-k):not(.to-kicker):not(.tl-season-k):not(.tl-vs-k):not(.to-fine):not(.gd-msg), body.tip main li:not(.pt-tier) > span:not([class]), body.tip .pt-steps li { font-size: max(16px, 1em); }
}

/* The 119.5-second ritual in miniature: a pint surging and settling, for every loading state. */
@property --surge { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.surge { display: inline-block; flex: none; width: 18px; height: 26px; vertical-align: -6px; margin-right: 8px; position: relative;
  clip-path: polygon(6% 0, 94% 0, 80% 100%, 20% 100%);
  background:
    linear-gradient(180deg, #EADBB6 0 22%, rgba(154,122,44,.9) 22% 25%, transparent 25%),
    linear-gradient(0deg, #14221B 0 var(--surge), #8A6844 var(--surge) calc(var(--surge) + 22%), #C9A97A calc(var(--surge) + 22%) 100%);
  animation: surgeSettle 2.4s cubic-bezier(.45, .05, .35, 1) infinite; filter: drop-shadow(0 0 .6px rgba(20,34,27,.75)); }
.surge::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.35) 0 1px, transparent 1.6px) 0 0 / 6px 7px; animation: surgeRise 2.4s linear infinite; opacity: .7; }
@keyframes surgeSettle { 0% { --surge: 0%; } 70% { --surge: 78%; } 100% { --surge: 78%; } }
@keyframes surgeRise { from { background-position: 0 0; } to { background-position: 0 -21px; } }
.tip-loading { display: flex; align-items: center; gap: 2px; color: #5b6170; }
.ps-step { display: flex; align-items: center; justify-content: center; }
.sc-wait { justify-content: center; min-height: 200px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .surge, .surge::after { animation: none; --surge: 78%; } }
/* Rate: city + pub dropdowns, pint-glass taste, PourScan thumbnail */
.rf-sel { display: grid; gap: 10px; margin-top: 14px; }
.rf-sel select { width: 100%; min-height: 48px; font-size: 16px; border-radius: 12px; }
.rf-sel select:disabled { opacity: .55; }
.rf-nom { margin: 8px 0 0; }
.rf-taste .pt-pints { margin: 4px 0 6px; }
.rf-taste .rf-scale { padding: 0 4px; }
.rf-thumb { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 8px; border-radius: 14px; background: var(--color-stout-surface, #14221B); color: #F9F6EE; }
.rf-thumb img { width: 64px; height: 84px; object-fit: cover; border-radius: 10px; flex: none; }
.rf-thumb > span { flex: 1; display: grid; gap: 2px; } .rf-thumb b { font-size: 15px; color: #F2CF6A; } .rf-thumb small { font-size: 14px; color: #E4EFE8; }
.rf-thumb .btn { flex: none; min-height: 40px; padding: 0 12px; font-size: 14px; background: transparent; color: #F9F6EE; border: 1.5px solid rgba(249,246,238,.5); }

.pt-pints button { -webkit-tap-highlight-color: transparent; background: transparent; }
.pt-pints button:focus { outline: none; } .pt-pints button:focus-visible { outline: 3px solid #D4AF37; outline-offset: 2px; border-radius: 6px; }
.rf-steps { grid-template-columns: 1fr 1.35fr 1fr; }
@media (max-width: 420px) { .rf-steps li { padding: 6px 8px; gap: 6px; font-size: 13.5px; } .rf-steps li b { width: 24px; height: 24px; font-size: 13px; } }
.rf-thumb { position: relative; } .rf-thumb .ps-step { font-size: 11px; }

/* More places: a framed panel of its own */
.gd-panel { display: none; margin: 14px 0 4px; padding: 14px 14px 12px; border-radius: 18px; background: rgba(6, 18, 13, .45); border: 1px solid rgba(212,175,55,.55); box-shadow: inset 0 1px 0 rgba(249,246,238,.06); }
body.gd-more .gd-panel { display: block; animation: gdIn .18s ease-out; }
@keyframes gdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gd-panel-h { display: grid; gap: 2px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(212,175,55,.3); }
.gd-panel-h b { font: 700 13px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F2CF6A; }
.gd-panel-h span { font-size: 14px; color: #CFE2D6; }
.gd-panel .rp-countries { margin: 0 0 10px; }
.gd-panel .pt-regions, .gd-panel #places { margin: 0; padding-top: 10px; border-top: 1px dashed rgba(249,246,238,.18); }
.gd-panel #places:empty { display: none; }
.gd-less { display: block; margin: 12px auto 0; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: #F2CF6A; font: 700 14px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
body.gd-more .gd-cities [data-more] { border-style: solid; border-color: #D4AF37; color: #F2CF6A; }
body.pints .gd-panel .rp-label { display: none !important; }
body.gd-more .gd-panel .rp-countries, body.gd-more .gd-panel .pt-regions, body.gd-more .gd-panel #places { display: flex !important; }
body.pints:has(.gd-cities) .rp-label { display: none !important; }
body.gd-more .gd-panel #places:not(:has(button)) { display: none !important; }
body.pints .pt-board .pt-sec h2 .pt-cityline { display: block; }
/* My pints summary: light cream card with a brass edge */
body .my-pints { background: #F9F6EE; color: #1E3A30; border: 1px solid #D4AF37; box-shadow: 0 1px 0 rgba(11,18,14,.06); }
body .my-pints b { color: #0B4A3A; }
body .my-pints a { color: #0B4A3A; text-decoration-color: #D4AF37; text-underline-offset: 3px; }
/* Steps: let "Where & What" take the room it needs, on one line */
.rf-steps { grid-template-columns: auto minmax(0, 1fr) auto; }
.rf-steps li { white-space: nowrap; }
.rf-steps li:nth-child(2) { justify-content: center; }
@media (max-width: 360px) { .rf-steps li { padding: 6px 7px; gap: 5px; font-size: 13px; } .rf-steps li:nth-child(2) { white-space: normal; } }
/* All places panel: only the chosen country's cities; the county list shows only for Ireland / N. Ireland */
body.gd-more .gd-panel #places[hidden] { display: none !important; }
body.gd-more .gd-panel .pt-regions:not(:has(.pt-rg.rp-show:not(.rp-single))) { display: none !important; }

/* The Perfect PourScan Process */
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pp-step { background: #0B2A22; border: 1px solid rgba(221,180,71,.45); border-radius: 18px; padding: 14px 14px 16px; color: #E6EFE9; text-align: center; }
.pp-n { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #DDB447; }
.pp-step h3 { margin: 4px 0 6px; font-family: 'Fraunces', Georgia, serif; font-size: 21px; color: #F9F6EE; }
.pp-ill { width: 100%; max-width: 120px; height: auto; display: block; margin: 0 auto 8px; }
.pp-step p { margin: 0; font-size: 15px; line-height: 1.45; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(11,74,58,.06); border: 1px solid rgba(11,74,58,.14); }
.pp-list b { color: #0B4A3A; }
.pp-glass-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pp-scanbox { flex: 0 0 auto; display: flex; gap: 14px; align-items: center; justify-content: center; padding: 16px; border-radius: 18px; background: radial-gradient(120% 100% at 50% 0%, #13664F, #032A21 70%); box-shadow: 0 0 0 1px rgba(221,180,71,.35) inset, 0 18px 40px rgba(3,42,33,.25); margin: 0 auto; }
.pp-scanbox > svg { width: 170px; max-width: 46vw; height: auto; margin: 0; }
.pp-hud { display: grid; gap: 10px; }
.pp-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(3,26,20,.9); border: 1px solid #DDB447; font: 800 11px/1 var(--body); letter-spacing: .14em; color: #F7D978; justify-self: start; }
.pp-tag i { width: 8px; height: 8px; border-radius: 50%; background: #5FE39A; box-shadow: 0 0 8px #5FE39A; animation: ps-blink .6s infinite alternate; }
.pp-hud dl { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(3,26,20,.85); border: 1px solid rgba(221,180,71,.5); font: 700 12px/1.9 ui-monospace, "SF Mono", Menlo, monospace; }
.pp-hud dl div { display: flex; justify-content: space-between; gap: 14px; opacity: 0; animation: pp-in .5s ease forwards; }
.pp-hud dl div:nth-child(2) { animation-delay: .6s; } .pp-hud dl div:nth-child(3) { animation-delay: 1.2s; } .pp-hud dl div:nth-child(4) { animation-delay: 1.8s; }
.pp-hud dt { color: rgba(247,217,120,.75); letter-spacing: .08em; } .pp-hud dd { margin: 0; color: #FBF7EC; } 
@keyframes pp-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.pp-lock { filter: drop-shadow(0 0 3px rgba(247,217,120,.8)); }
.pp-step { transition: transform .2s ease, box-shadow .2s ease; }
.pp-step:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(221,180,71,.6), 0 14px 30px rgba(3,42,33,.35); }
@media (prefers-reduced-motion: reduce) { .pp-hud dl div { animation: none; opacity: 1; } .pp-tag i { animation: none; } .pp-beam { display: none; } }
.pp-glass-row > .pp-list { flex: 1 1 300px; }
.pp-steps-wrap { margin: 18px 0; }
.pp-ill text { stroke: none; }
/* the small thumbnail scan (while the rating is sent) keeps just the beam, brackets and grid */
#rfThumb .ps-hud, #rfThumb .ps-ret, #rfThumb .ps-tag, #rfThumb .ps-prog, #rfThumb .ps-step { display: none; }
#rfThumb .ps-c { width: 12px; height: 12px; border-width: 2px; }
#rfThumb .ps-c.tl, #rfThumb .ps-c.bl { left: 4px; } #rfThumb .ps-c.tr, #rfThumb .ps-c.br { right: 4px; } #rfThumb .ps-c.tl, #rfThumb .ps-c.tr { top: 4px; } #rfThumb .ps-c.bl, #rfThumb .ps-c.br { bottom: 4px; }

/* narrow photos: stack the readouts under the badge and let the step text wrap */
.ps-scan { container-type: inline-size; }
.ps-step { max-width: calc(100% - 20px); white-space: normal; text-align: center; }
@container (max-width: 300px) {
  .ps-hud { left: 12px; right: auto; top: 46px; font-size: 10px; min-width: 0; padding: 6px 8px; }
  .ps-tag { left: 12px; top: 12px; font-size: 10px; padding: 4px 9px; }
  .ps-step { font-size: 12px; padding: 6px 10px; bottom: 10px; }
  .ps-prog { bottom: 50px; left: 12px; right: 12px; }
  .ps-c { width: 18px; height: 18px; }
}
/* Home hero: the pint sits in the space between the headline and the buttons (in the flow, not
   pinned to a % of the hero), so it never drifts down behind the buttons on any screen. */
.tl-hero-photo .tl-copy { order: 1; } .tl-hero-photo .tl-pic { order: 2; } .tl-hero-photo .tl-bottom { order: 3; }
.tl-hero-photo .tl-spacer { display: none; }
.tl-hero-photo .tl-pic { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; flex: 1 1 auto; width: 100%; min-height: 42vh; margin: 14px 0 16px; }
@media (min-width: 701px) { .tl-hero-photo .tl-pic { min-height: clamp(280px, 44vh, 460px); } }
@media (max-width: 420px) { .pp-scanbox { gap: 10px; padding: 12px; max-width: 100%; } .pp-scanbox > svg { width: 40vw; } .pp-hud dl { font-size: 11px; padding: 8px 10px; } .pp-hud dl div { gap: 8px; } }

/* T.I.P Score Index colours: stout black at the top, greens for good, amber and red for bad.
   Used on the index, the score ring, the verdict and the band picker. */
:root { --b-master: #0A0D0C; --b-perfect: #0B4A3A; --b-grand: #13664F; --b-decent: #5FA67F; --b-work: #E0A030; --b-bar: #C9654A; }
.tsi-master { border-left-color: var(--b-master) !important; } .tsi-perfect { border-left-color: var(--b-perfect) !important; } .tsi-grand { border-left-color: var(--b-grand) !important; }
.tsi-decent { border-left-color: var(--b-decent) !important; } .tsi-work { border-left-color: var(--b-work) !important; } .tsi-bar { border-left-color: var(--b-bar) !important; }
.tsi-list li { border-left-width: 6px; }
.tsi-list li .tsi-r { justify-self: end; padding: 2px 9px; border-radius: 999px; color: #fff; font-size: 12.5px; }
.tsi-master .tsi-r { background: var(--b-master); color: #F7D978; box-shadow: 0 0 0 1px #DDB447 inset; } .tsi-perfect .tsi-r { background: var(--b-perfect); } .tsi-grand .tsi-r { background: var(--b-grand); }
.tsi-decent .tsi-r { background: var(--b-decent); } .tsi-work .tsi-r { background: var(--b-work); color: #2A1C00; } .tsi-bar .tsi-r { background: var(--b-bar); }
.tsi-list li.on { background: var(--bc, #0B4A3A); }
.tsi-master.on { --bc: var(--b-master); } .tsi-perfect.on { --bc: var(--b-perfect); } .tsi-grand.on { --bc: var(--b-grand); } .tsi-decent.on { --bc: #3F7E5C; } .tsi-work.on { --bc: #9A6510; } .tsi-bar.on { --bc: #9E4630; }
.tsi-list li.on .tsi-r { background: rgba(255,255,255,.16); color: #F7D978; box-shadow: none; }
/* the score ring and verdict on a result */
.pt-score[data-band="master"] .ps-ring-fg { stroke: var(--b-master); } .pt-score[data-band="master"] b { color: var(--b-master); }
.pt-score[data-band="master"] .ps-ring-bg { stroke: #DDB447; }
.pt-score[data-band="perfect"] .ps-ring-fg { stroke: var(--b-perfect); } .pt-score[data-band="perfect"] b { color: var(--b-perfect); }
.pt-score[data-band="grand"] .ps-ring-fg { stroke: var(--b-grand); } .pt-score[data-band="grand"] b { color: var(--b-grand); }
.pt-score[data-band="decent"] .ps-ring-fg { stroke: var(--b-decent); } .pt-score[data-band="decent"] b { color: #3F7E5C; }
.pt-score[data-band="work"] .ps-ring-fg { stroke: var(--b-work); } .pt-score[data-band="work"] b { color: #9A6510; }
.pt-score[data-band="bar"] .ps-ring-fg { stroke: var(--b-bar); } .pt-score[data-band="bar"] b { color: #9E4630; }
#rVerdict[data-band] { display: table; margin: 4px auto 0; padding: 6px 16px; border-radius: 999px; color: #fff; }
#rVerdict[data-band="master"] { background: var(--b-master); color: #F7D978; box-shadow: 0 0 0 2px #DDB447 inset; }
#rVerdict[data-band="perfect"] { background: var(--b-perfect); } #rVerdict[data-band="grand"] { background: var(--b-grand); }
#rVerdict[data-band="decent"] { background: var(--b-decent); } #rVerdict[data-band="work"] { background: var(--b-work); color: #2A1C00; } #rVerdict[data-band="bar"] { background: var(--b-bar); }
/* the band picker on What makes a Grand pint */
.r-master { --c: var(--b-master) !important; --t: #F7D978 !important; } .r-perfect { --c: var(--b-perfect) !important; --t: #fff !important; }
.r-grand { --c: var(--b-grand) !important; --t: #fff !important; } .r-decent { --c: var(--b-decent) !important; --t: #fff !important; }
.r-settle { --c: var(--b-work) !important; --t: #2A1C00 !important; } .r-bar { --c: var(--b-bar) !important; --t: #fff !important; }
/* Steps line up: label, title, glass and text each sit on the same line across every card */
.pp-step { display: grid; grid-template-rows: auto minmax(2.6em, auto) auto 1fr; align-items: start; }
.pp-step h3 { display: flex; align-items: center; justify-content: center; line-height: 1.15; }
@supports (grid-template-rows: subgrid) {
  .pp-step { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}

.pk-free { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #13664F; color: #FBF7EC; -webkit-text-fill-color: #FBF7EC; font: 800 11px/1.5 var(--body); font-style: normal; letter-spacing: .1em; vertical-align: 3px; }

/* the T.I.P Score Index colour as a line to the right of each board score */
.pt-list .pt-big[class*=" b-"] { position: relative; padding-right: 16px; }
.pt-list .pt-big[class*=" b-"]::after { content: ''; position: absolute; right: 0; top: 2px; bottom: 2px; width: 6px; border-radius: 6px; background: var(--bl); }
.pt-big.b-master { --bl: var(--b-master); } .pt-big.b-master::after { box-shadow: 0 0 0 1.5px #DDB447; }
.pt-big.b-perfect { --bl: var(--b-perfect); } .pt-big.b-grand { --bl: var(--b-grand); } .pt-big.b-decent { --bl: var(--b-decent); } .pt-big.b-work { --bl: var(--b-work); } .pt-big.b-bar { --bl: var(--b-bar); }

/* T.I.P Score Index strip under the score tabs */
.tsi-strip { display: block; margin: 12px 0 4px; text-decoration: none; color: inherit; }
.tsi-strip-t { display: block; font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #0B4A3A; margin-bottom: 6px; }
.tsi-strip ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tsi-strip li { display: grid; gap: 2px; padding-top: 8px; border-top: 6px solid var(--bl); border-radius: 3px 3px 0 0; text-align: center; }
.tsi-strip li b { font: 800 13px var(--body); color: #0B4A3A; font-variant-numeric: tabular-nums; }
.tsi-strip li span { font-size: 11.5px; line-height: 1.2; color: #4b5f57; }
.tsi-strip li:first-child { border-top-left-radius: 6px; } .tsi-strip li:last-child { border-top-right-radius: 6px; }
.tsi-strip li.b-master { box-shadow: inset 0 1.5px 0 #DDB447; }
.tsi-strip li.b-master { --bl: var(--b-master); } .tsi-strip li.b-perfect { --bl: var(--b-perfect); } .tsi-strip li.b-grand { --bl: var(--b-grand); }
.tsi-strip li.b-decent { --bl: var(--b-decent); } .tsi-strip li.b-work { --bl: var(--b-work); } .tsi-strip li.b-bar { --bl: var(--b-bar); }
.tsi-strip:hover .tsi-strip-t { text-decoration: underline; }
@media (max-width: 480px) { .tsi-strip li span { font-size: 10px; } .tsi-strip li b { font-size: 12px; } }
.tsi-strip ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tsi-strip li span.s { display: none; }
@media (max-width: 560px) { .tsi-strip li span.l { display: none; } .tsi-strip li span.s { display: block; font-size: 10.5px !important; } .tsi-strip li b { font-size: 12px; } }
/* Best Pint Guide hero on phones: a touch more compact */
@media (max-width: 600px) {
  body.tip .pt-hero-slim { padding: 22px 18px 14px; }
  body.tip .pt-hero-slim h1 { font-size: 2.05rem; margin: 2px 0 6px; }
  body.tip main .pt-hero-slim > p:not(.pt-eyebrow):not(.gd-msg) { font-size: 15.5px !important; line-height: 1.45; }
  body.tip .pt-hero-slim .pt-eyebrow { font-size: 12px; }
  .gd-cities { gap: 6px; margin: 12px 0 4px; }
  .gd-cities button { min-height: 38px; padding: 0 12px; font-size: 14px; }
  .gd-cities [data-near] .ti { width: 14px; height: 14px; }
  .gd-msg { font-size: 13px; }
}

.rs-wrong { text-align: center; margin: 10px 0 0; }
.rs-wrong button { background: none; border: 0; padding: 6px 4px; color: #0B4A3A; font: 600 14px var(--body); text-decoration: underline; cursor: pointer; }
.rs-wrong button:disabled { text-decoration: none; color: #13664F; cursor: default; }
.rw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rw-chips .chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #CFC6AE; background: #fff; color: #1A201C; font: 600 13.5px var(--body); cursor: pointer; }
.rw-chips .chip[aria-pressed="true"] { background: #0B4A3A; border-color: #0B4A3A; color: #FBF7EC; }
.rw-l { display: grid; gap: 4px; margin-bottom: 12px; font: 600 14px var(--body); color: #0B4A3A; }
.rw-l small { font-weight: 400; color: #5b6b63; }
.rw-l input, .rw-l textarea { font: 400 16px var(--body); padding: 9px 11px; border-radius: 10px; border: 1.5px solid #CFC6AE; background: #fff; }
.rw-l input { max-width: 110px; }
.rw-err { color: #9E4630; min-height: 0; margin: 0 0 8px !important; font-size: 14px; } .rw-err:empty { display: none; }

/* Pub dashboard: tabs, focus, part bars, Pour School */
.pd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 999px; background: #ECE6D6; position: sticky; top: 64px; z-index: 5; }
.pd-tabs button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: #0B4A3A; font: 700 14px var(--body); cursor: pointer; }
.pd-tabs button[aria-selected="true"] { background: #0B4A3A; color: #F7D978; }
body.tip section.pt-card.pd-focus { background: radial-gradient(120% 120% at 0% 0%, #13664F, #032A21 70%); color: #F1E3C6; border: 1px solid rgba(221,180,71,.5); }
.pd-focus h2 { color: #fff; margin: 2px 0 8px; } .pd-focus b { color: #F7D978; }
.pd-k { margin: 0; font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #DDB447; }
.pd-drill { background: rgba(0,0,0,.22); border-left: 4px solid #DDB447; padding: 10px 12px; border-radius: 8px; }
.pd-target { font-weight: 700; } .pd-prog .up { color: #5FE39A; } .pd-prog .down { color: #F0A58C; }
.pd-parts { display: grid; gap: 12px; margin-top: 10px; }
.pd-part { display: grid; grid-template-columns: 110px 1fr 38px; gap: 10px; align-items: center; font-size: 14px; }
.pd-part em { font-style: normal; font-weight: 800; color: #0B4A3A; text-align: right; }
.pd-track { position: relative; height: 14px; border-radius: 8px; background: #ECE6D6; }
.pd-track > b { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #13664F, #0B4A3A); }
.pd-track i { position: absolute; top: -4px; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px; }
.pd-track i.city, .pd-legend i.city { background: #DDB447; } .pd-track i.all, .pd-legend i.all { background: #9E4630; }
.pd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: #4b5f57; margin: 12px 0 0; }
.pd-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; } .pd-legend i.you { background: #0B4A3A; } .pd-legend i.city, .pd-legend i.all { width: 4px; height: 14px; }
.pd-weeks { height: 140px; } .pd-weeks .pd-month b { width: 60%; }
.pd-staffbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.pd-staffbar label { font-weight: 700; color: #0B4A3A; } .pd-staffbar select { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #CFC6AE; font: 600 15px var(--body); background: #fff; }
.pd-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-lesson details { border: 1.5px solid #E2D9BF; border-radius: 14px; background: #fff; padding: 0 14px; }
.pd-lesson summary { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; list-style: none; } .pd-lesson summary::-webkit-details-marker { display: none; }
.pd-ln { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ECE6D6; color: #0B4A3A; font: 800 14px var(--body); }
.pd-lesson.done .pd-ln { background: #13664F; color: #fff; }
.pd-lesson details p { margin: 0 0 10px; } .pd-q { font-weight: 700; color: #0B4A3A; }
.pd-ans { display: grid; gap: 6px; margin-bottom: 10px; } .pd-ans .chip { text-align: left; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #CFC6AE; background: #F9F6EE; font: 600 14px var(--body); cursor: pointer; } .pd-ans .chip:disabled { opacity: .45; }
.pd-res:empty { display: none; } .pd-res { font-weight: 700; color: #13664F; }
.pd-teamk { margin: 6px 0 10px; } .pd-teamk b { font-size: 22px; color: #0B4A3A; }
.pd-link { background: none; border: 0; padding: 0; color: #9E4630; font: 600 12px var(--body); text-decoration: underline; cursor: pointer; }
@media (max-width: 480px) { .pd-part { grid-template-columns: 92px 1fr 34px; font-size: 13px; } .pd-tabs button { font-size: 13px; } }

.pd-tabs { grid-template-columns: repeat(4, 1fr); }
.pv-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 140px; margin: 12px 0 18px; }
.pv-day { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pv-day b { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #0B4A3A; }
.pv-day i { position: absolute; bottom: 0; left: 30%; width: 40%; border-radius: 2px; background: #DDB447; }
.pv-ax { position: absolute; bottom: -18px; left: 0; font-size: 11px; color: #6b706c; } .pv-ax.r { left: auto; right: 0; }
.pd-legend i.rt { background: #DDB447; width: 14px; height: 10px; }
.pv-list { display: grid; gap: 6px; margin-top: 8px; }
.pv-row { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: #F4EFE2; overflow: hidden; font-size: 15px; }
.pv-row::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #E4EEE7; z-index: 0; }
.pv-row span, .pv-row b { position: relative; } .pv-row b { color: #0B4A3A; }

/* My pints map: pins in the T.I.P Score Index colours */
.pm-b-master .pm-dot { background: var(--b-master); color: #F7D978; box-shadow: 0 0 0 2px #DDB447; }
.pm-b-perfect .pm-dot { background: var(--b-perfect); color: #F7D978; } .pm-b-grand .pm-dot { background: var(--b-grand); color: #F7D978; }
.pm-b-decent .pm-dot { background: var(--b-decent); color: #032A21; } .pm-b-work .pm-dot { background: var(--b-work); color: #2A1C00; } .pm-b-bar .pm-dot { background: var(--b-bar); color: #FBF7EC; }
.mp-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.mp-key i.b-master { background: var(--b-master); box-shadow: 0 0 0 1.5px #DDB447; } .mp-key i.b-perfect { background: var(--b-perfect); } .mp-key i.b-grand { background: var(--b-grand); }
.mp-key i.b-decent { background: var(--b-decent); } .mp-key i.b-work { background: var(--b-work); } .mp-key i.b-bar { background: var(--b-bar); }

/* My pints map key: one swatch per label, two columns */
ul.mp-key { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; color: #33413a; }
ul.mp-key li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
ul.mp-key li small { color: #6b706c; font-size: 12.5px; }
ul.mp-key li.mp-key-dream { grid-column: 1 / -1; white-space: normal; }
ul.mp-key i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #032A21; }
ul.mp-key i.b-master { background: var(--b-master); box-shadow: 0 0 0 1.5px #DDB447; } ul.mp-key i.b-perfect { background: var(--b-perfect); } ul.mp-key i.b-grand { background: var(--b-grand); }
ul.mp-key i.b-decent { background: var(--b-decent); } ul.mp-key i.b-work { background: var(--b-work); } ul.mp-key i.b-bar { background: var(--b-bar); }
ul.mp-key i.k-dream { border: 0; width: auto; height: auto; color: #7A5C1E; font-style: normal; }
body.tip-lean .mp-key-dream { display: none !important; } /* Dream Pints are parked */
.ck-check summary::after { margin-left: 0; }

.sc-gate form { display: grid; gap: 10px; margin-top: 12px; } .sc-gate h3 { margin: 0; color: #0B4A3A; font-size: 19px; } .sc-gate p { margin: 0; }
.sc-gate input[type=email] { width: 100%; min-height: 48px; font-size: 16px; border-radius: 12px; }
.sc-gnews { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .sc-gnews input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.sc-gerr { color: #A3402A; font-weight: 600; min-height: 0; } .sc-gerr:empty { display: none; }
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sc-gate .btn { width: 100%; }
.sc.gating .sc-prev img { max-height: 24dvh; } .sc.gating .sc-fmt { display: none; }

/* Search pages: /pubs, /pubs/<place>, /pub/<region>/<id> */
.seo { display: grid; gap: 16px; }
.seo-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0 0; margin: 0; font-size: 14px; color: #5B6B64; }
.seo-crumbs li + li::before { content: '›'; margin-right: 4px; color: #9AA59F; }
.seo-crumbs a { color: #13664F; }
.seo .pt-hero { background: radial-gradient(120% 140% at 0% 0%, #0B4A3A, #032A21 70%); }
.seo .pt-card h2 { margin: 0; color: #0B4A3A; }
.seo-places, .seo-wait, .seo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.seo-places { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.seo-places a, .seo-wait a { display: grid; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: #13241E; background: #FBFAF6; }
.seo-places a:hover, .seo-wait a:hover { border-color: #13664F; }
.seo-places small, .seo-wait small, .seo-pub small { color: #5B6B64; font-size: 13px; }
.seo-pub { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #FBFAF6; }
.seo-pub a { display: grid; flex: 1; text-decoration: none; color: #13241E; min-width: 0; }
.seo-rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E6F2EC; color: #0B4A3A; font-weight: 800; flex: 0 0 auto; }
.seo-score { display: grid; justify-items: end; line-height: 1.1; padding-right: 10px; border-right: 6px solid var(--bc, #13664F); }
.seo-score b { font-size: 20px; color: #0B4A3A; } .seo-score small { font-size: 11px; color: #5B6B64; }
[data-band="master"] { --bc: var(--b-master, #0A0D0C); } [data-band="perfect"] { --bc: var(--b-perfect, #0B4A3A); } [data-band="grand"] { --bc: var(--b-grand, #13664F); }
[data-band="decent"] { --bc: var(--b-decent, #5FA67F); } [data-band="work"] { --bc: var(--b-work, #E0A030); } [data-band="bar"] { --bc: var(--b-bar, #C9654A); }
.seo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seo-tile { display: grid; justify-items: center; padding: 12px 6px; border-radius: 12px; background: #F3F1EA; border-bottom: 5px solid var(--bc, #D8D3C4); }
.seo-tile b { font-size: 24px; color: #0B4A3A; } .seo-tile small { font-size: 12px; color: #5B6B64; }
.seo-faq { margin: 0; display: grid; gap: 4px; } .seo-faq dt { font-weight: 700; color: #13241E; margin-top: 8px; } .seo-faq dd { margin: 0; color: #3C4A44; }

/* ---------- Pub marketing pack (/pub-kit) ---------- */
.kit { display: grid; gap: 16px; }
.kit-sel { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kit-items { display: grid; gap: 16px; } .kit-items[hidden] { display: none; }
.kit-h { margin: 6px 0 0; color: #0B4A3A; }
.kit-item > header { display: grid; gap: 6px; margin-bottom: 12px; } .kit-item h3 { margin: 0; color: #0B4A3A; font-size: 20px; } .kit-item header p { margin: 0; color: #3C4A44; }
.kit-item header .btn { justify-self: start; }
.kit-sheet { container-type: inline-size; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 210 / 297; background: #fff; box-shadow: 0 4px 18px rgba(3,42,33,.18); border-radius: 6px; overflow: hidden; position: relative; color: #fff; }
.kit-sheet svg { display: block; width: 100% !important; height: auto !important; stroke: none; fill: initial; }
/* Poster */
.kp-poster { background: radial-gradient(130% 90% at 20% 0%, #0E5A45, #032A21 60%, #021A14); }
.kp-in { position: absolute; inset: 4cqi; border: .7cqi solid #E9C171; border-radius: 3cqi; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6cqi 5cqi 4cqi; }
.kp-in p, .kp-in h4 { margin: 0; }
.kp-top { font: 800 3.2cqi var(--body); letter-spacing: .25em; color: #E9C171; }
.kp-h { font: 800 14cqi/1 var(--display); color: #fff; margin: 4cqi 0 2cqi !important; } .kp-h span { color: #E9C171; }
.kp-sub { font: 600 4.2cqi var(--body); color: #CFE3D8; }
.kp-pub { font: 800 8cqi/1.05 var(--display); color: #E9C171; margin: 1.5cqi 0 5cqi !important; overflow-wrap: anywhere; }
.kp-qr { width: 46%; background: #fff; padding: 2cqi; border-radius: 2.4cqi; }
.kp-scan { font: 700 4.4cqi var(--body); margin-top: 4cqi !important; }
.kp-steps { display: flex; gap: 2cqi; margin-top: 2.4cqi !important; } .kp-steps span { font: 700 3cqi var(--body); color: #032A21; background: #E9C171; border-radius: 99px; padding: 1cqi 2.4cqi; }
.kp-url { font: 800 5.6cqi var(--body); color: #fff; margin-top: auto !important; }
.kp-small { font-size: 2.3cqi; color: #9FC2B0; margin-top: 1.5cqi !important; }
/* Table talkers: two cards, each half of A4; top face printed upside down so it reads after folding */
.kp-tables { background: #fff; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.kt-card { display: grid; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); border-bottom: .3cqi dashed #9AA59F; } .kt-card:last-child { border-bottom: 0; }
.kt-face { background: radial-gradient(120% 120% at 20% 0%, #0E5A45, #032A21 65%); margin: 2cqi 4cqi; border-radius: 2cqi; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .8cqi; padding: 1.4cqi; min-height: 0; overflow: hidden; border: .5cqi solid #E9C171; }
.kt-face p { margin: 0; } .kt-face .kp-top { font-size: 2.4cqi; } .kt-flip { transform: rotate(180deg); }
.kt-big { font: 800 5.8cqi/1 var(--display); color: #fff; } .kt-sm { font: 600 3cqi var(--body); color: #CFE3D8; } .kt-sm b { color: #E9C171; }
.kt-qr { width: 13cqi; background: #fff; padding: 1cqi; border-radius: 1.4cqi; }
/* Coasters: 6 × 9 cm */
.kp-coasters { background: #fff; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); place-items: center; padding: 4cqi; }
.kc-disc { width: 42.8cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #0E5A45, #032A21 70%); border: .6cqi solid #E9C171; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2cqi; outline: .25cqi dashed #9AA59F; outline-offset: 1cqi; }
.kc-disc { gap: .9cqi !important; padding: 3cqi; }
.kc-disc p { margin: 0; } .kc-k { font: 800 1.6cqi var(--body); letter-spacing: .2em; color: #E9C171; }
.kc-top { font: 800 4.2cqi/1 var(--display); color: #fff; letter-spacing: .01em; }
.kc-bot { font: 700 2.3cqi var(--body); color: #fff; letter-spacing: .04em; } .kc-bot b { color: #E9C171; }
.kc-goal { font: 600 1.9cqi var(--body); color: #CFE3D8; }
.kc-qr { width: 15cqi; background: #fff; padding: .8cqi; border-radius: 1.2cqi; }
/* Window sticker: 15 cm disc */
.kp-windows { background: #fff; display: grid; place-items: center; align-content: center; gap: 3cqi; }
.kw-disc { width: 71.4cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #0E5A45, #032A21 70%); border: 1.2cqi solid #E9C171; outline: .3cqi dashed #9AA59F; outline-offset: 1.4cqi; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kw-disc p { margin: 0; } .kw-top { font: 800 3.4cqi var(--body); letter-spacing: .3em; color: #CFE3D8; } .kw-logo { font: 800 13cqi/1 var(--display); color: #E9C171; }
.kw-score { display: grid; line-height: 1; margin: 1cqi 0 2cqi !important; } .kw-score b { font: 800 8cqi var(--display); color: #fff; } .kw-score small { font: 700 3cqi var(--body); color: #E9C171; }
.kw-qr { width: 20cqi; background: #fff; padding: 1cqi; border-radius: 1.4cqi; } .kw-bot { font: 700 3.4cqi var(--body); color: #fff; margin-top: 2cqi !important; }
.kw-cut { color: #5B6B64; font-size: 2.6cqi; }
/* Social */
.ks-row { display: grid; grid-template-columns: 9fr 16fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.ks-row figure { margin: 0; display: grid; gap: 8px; } .ks-row canvas { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 14px rgba(3,42,33,.2); }
.ks-row .btn { width: 100%; padding-inline: 8px; font-size: 14px; }
.ks-caps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kit textarea { width: 100%; font: 15px/1.45 var(--body); border-radius: 12px; padding: 10px; }
.kb-preview { padding: 18px; background: #F3F1EA; border-radius: 12px; margin-bottom: 10px; }
.kl-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.kl-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.kl-list span { font-weight: 700; } .kl-list code { grid-column: 1; font-size: 12px; overflow-wrap: anywhere; color: #3C4A44; } .kl-list .btn { grid-column: 2; grid-row: 1 / span 2; }
@media print {
  body[data-print] > *:not(main), body[data-print] .kit-no-print, body[data-print] .kit-pick, body[data-print] .pt-hero, body[data-print] .kit-h { display: none !important; }
  body[data-print] .kit-item { display: none !important; }
  body[data-print="poster"] .kit-item[data-item="poster"], body[data-print="table"] .kit-item[data-item="table"], body[data-print="coaster"] .kit-item[data-item="coaster"], body[data-print="window"] .kit-item[data-item="window"] { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
  body[data-print] .pt-main, body[data-print] .kit, body[data-print] .kit-items { padding: 0 !important; margin: 0 !important; gap: 0 !important; display: block !important; max-width: none !important; }
  body[data-print] .kit-sheet { width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body[data-print] .kw-cut { display: none; }
}
.kit-sel .field { min-width: 0; } .kit-sel select { width: 100%; max-width: 100%; min-width: 0; }
.tip-foot .tf-links + .tf-links { margin-top: 4px; }
/* Map tiles recoloured to match T.I.P: soft cream streets, sage parks, muted roads. Pins are not filtered. */
.leaflet-tile-pane { filter: saturate(.35) sepia(.25) hue-rotate(40deg) brightness(1.03) contrast(.92); }
.leaflet-container { background: #EEEFE4; }
.kw-target { font: 700 3cqi/1.2 var(--body); color: #fff; margin: 1cqi 0 2.4cqi !important; } .kw-target[hidden] { display: none; }
.kp-goal { font: 700 3.4cqi var(--body); color: #E9C171; margin-top: 3cqi !important; }
.kp-url { margin-top: auto !important; }
.tl-sss { font-style: normal; font-weight: 800; color: #0B4A3A; }
/* Map popups: scores on one line, a proper Rate button */
.pm-pop .pm-sc, .pm-pop .pm-sc b { display: inline; }
.pm-pop .pm-sc { display: block; font-size: 15px !important; }
.pm-pop .pm-sc b { font: 800 16px var(--display); color: #0B4A3A; }
.pm-act { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px !important; }
.pm-act a.pm-rate { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px; background: #DDB447; color: #032A21 !important; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 2px 0 #B8902F; }
.pm-act a.pm-rate:hover { background: #E9C171; }
.pm-act a.pm-dir { text-align: center; font-size: 15px; }