/* Plona site header and footer (shared by the site pages and the app, site-v2/js/chrome.js draws both). */
/* ===== The header (round 3A, founder 2026-10-09). Tokens only (app.css / v2.css), so dark mode keeps working.
   Row 1: the centered logo "Plona" with one small bull after the word, facing right, centered on it (3.6.0.7) = home.
   Row 2: 4 tabs, a line icon above the word. Driver mode (and signed out): Plona Market, Routes, Inbox, More. Owner mode: Routes,
   Vehicles, Inbox, More. Badges on Routes and Inbox; More carries the other mode's count.
   Phones: only the tab row stays at the top while scrolling (the logo row scrolls away). Other round 3 areas size their own icons
   (PlonaChrome.ICON has no width or height). The sign-in sheet and the bull wait screen are at the end of this file. ===== */
:root{--sh-logo-h:44px;--sh-tabs-h:50px}
@media (min-width:900px){:root{--sh-logo-h:56px;--sh-tabs-h:58px}}

/* the whole header sticks at minus the logo row's height, so the logo row scrolls off and the tabs (and #banner) stay */
.sh{position:sticky;top:calc(-1 * var(--sh-logo-h));z-index:30;background:var(--bg);border-bottom:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.sh .sh-in{max-width:1120px;margin:0 auto;padding:0;display:block}

/* row 1: the logo */
.sh-logo-row{height:var(--sh-logo-h);display:flex;align-items:center;justify-content:center}
.sh-logo{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border-radius:12px;color:var(--ink);text-decoration:none;
  font-family:'Clash Grotesk','Instrument Sans',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.01em;line-height:1}
.sh-word{padding:0 3px}
/* 3.6.0.7: one bull after the word, facing right (bull.png as it is, never mirrored), centered on the word and close to it. Chandon, Oct 27
   (Round 2): "I like Plona in the center and then maybe just one bull on the right side of it, and we shrink it ... the bull would be facing
   to the right. So the horn of the bull would be to the right"; Oct 28, on the mockup: "I like the logo, but it needs to be in line with
   Plona instead of hanging underneath it. So it should be like centered vertically". 38x24 on a phone, 46x29 on a laptop (below).
   bull.png is 260x260 with the bull in the middle band: object-fit:cover keeps the whole bull and drops the empty top and bottom.
   It slides in a little from the left once per visit (.sh-noanim after that), never with reduced motion. */
.sh-bull{display:block;flex:none;align-self:center;width:38px;height:24px;margin:2px 0 0 -8px;object-fit:cover;object-position:50% 50%;
  animation:shIn .9s cubic-bezier(.22,.9,.3,1.1) both}
@keyframes shIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.sh-noanim .sh-bull{animation:none}
@media (prefers-reduced-motion:reduce){.sh-bull{animation:none}}
.sh-logo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* row 2: the tabs (links, not an ARIA tablist: each one opens a page) */
.sh-tabs{min-height:var(--sh-tabs-h);display:flex}
.sh-tabs ul{list-style:none;margin:0 auto;padding:0 4px;display:flex;flex:1;max-width:560px}
.sh-tabs li{flex:1 1 0;min-width:min-content;display:flex;margin:0}
.sh-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;padding:2px 2px 4px;
  border-radius:12px;color:var(--sub);text-decoration:none;font:600 13px/16px 'Instrument Sans',-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
.sh-ic{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:28px;border-radius:99px;transition:background-color .15s}
.sh-ic svg{width:24px;height:24px;display:block}
/* a label is never cut: one line down to 280px wide; narrower (200% zoom on a phone) it wraps to two lines and the row grows */
.sh-tl{white-space:nowrap;text-align:center}
@media (hover:hover){.sh-tab:hover{color:var(--ink)}.sh-tab:hover .sh-ic{background:var(--wait)}}
/* selected: orange text and icon plus a tint pill behind the icon (a shape cue too, not color alone) */
.sh-tab[aria-current=page]{color:var(--ot);font-weight:700}
.sh-tab[aria-current=page] .sh-ic{background:var(--tint)}
.sh-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* badge: a count on the icon's upper right corner, 1 to 9, then 9+ */
.sh-badge{position:absolute;top:-4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ob);color:#fff;
  font:700 11px/18px 'Instrument Sans',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none;white-space:nowrap}
/* (team-mode-design 10.9: "9+" broke onto two lines in every mode: the badge sits at 50% + 6px of the pill, so it had 22px to shrink into) */
/* team mode: five tabs (Find, My work, To-do, Inbox, More; question 14.9 option B keeps the 13px labels), a little wider row on laptops */
.sh-tabs[data-mode=team] ul{max-width:640px}
@media (max-width:419px){.sh-tabs[data-mode=team] ul{padding:0 2px}.sh-tabs[data-mode=team] .sh-ic{width:50px}}

/* laptops: a bigger logo, the same two rows, centered */
@media (min-width:900px){
  .sh-logo{font-size:30px}
  .sh-bull{width:46px;height:29px}
  .sh-tabs ul{max-width:600px}
  .sh-tab{font-size:14px;line-height:18px;gap:2px}
  .sh-ic{width:64px;height:32px}
}
/* small phones (320 to 359): the labels still fit on one line */
@media (max-width:359px){.sh-tab{font-size:12px}.sh-ic{width:48px}.sh-tab:focus-visible{outline-offset:0}}
@media (max-width:279px){.sh-tabs li{min-width:0}.sh-tl{white-space:normal;text-wrap:balance}.sh-ic{width:40px}}

/* other sticky things sit under the tab row: --sh-stick is the visible part (tabs + #banner), set by JS (ResizeObserver) */
:root{--sh-stick:calc(var(--sh-tabs-h) + 1px)}

/* the offline and out-of-sync banner sits in the sticky part, under the tabs. On phones it is one line (the step pages already do this,
   app/css/steps.css lines 13-16); the longer sentence stays for screen readers. Move those 4 rules here, scoped to phones. */
@media (max-width:600px){
  .sh #banner .sbanner{padding:4px 16px;font-size:14px;flex-wrap:nowrap}
  .sh #banner .sbanner .in{min-height:44px;padding:0;flex-wrap:nowrap;gap:8px;justify-content:space-between}
  .sh #banner .sbanner span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sh #banner .sbanner .btn{flex:none;min-height:44px;margin:0}
}

.sf{background:#0d0d0d;color:#9a9a9a;margin-top:32px;font-size:15px}
.sf-in{max-width:1120px;margin:0 auto;padding:40px 16px calc(40px + env(safe-area-inset-bottom))}
/* round 3A: no bottom bar any more, so a page that ends with the footer ends flush (the footer pads for the safe area itself) */
body:has(> #site-footer){padding-bottom:0}
.sf-cols{display:flex;justify-content:center;gap:24px 72px;flex-wrap:wrap}
.sf-cols>div{min-width:180px}
.sf h3{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.sf-cols a{display:flex;align-items:center;min-height:44px;color:#d6d6d6;text-decoration:none}
.sf-cols a:hover,.sf-social a:hover{color:#F7925A}
.sf a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sf-band{display:flex;flex-direction:column;align-items:center;gap:2px;border-top:1px solid #262626;margin-top:24px;padding-top:18px;text-align:center}
.sf-band img{width:56px;height:56px}
.sf-name{color:#fff;font-family:'Clash Grotesk','Instrument Sans',sans-serif;font-weight:700;font-size:22px}
.sf-tag{color:#a8a8a8;font-size:14px}
.sf-social{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-top:14px}
.sf-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#d6d6d6}
.sf-social svg{width:20px;height:20px;fill:currentColor}
.sf-bottom{margin-top:12px;color:#8a8a8a;text-align:center;font-size:14px}
@media (max-width:600px){.sf-cols{justify-content:flex-start;gap:8px 32px}.sf-cols>div{min-width:0;flex:1 1 100%}}
#plfb-tab,#plfb-ov,#chat-launch{display:none!important}
/* install banner and popup */
.inst-banner{display:flex;align-items:center;gap:12px;background:var(--tint);border:1px solid var(--tint-line,#f7cdb2);border-radius:var(--r-lg,16px);padding:12px 14px}
.inst-banner>div{flex:1;min-width:0}
.inst-banner b{display:block;font-size:16px}
.inst-banner span{display:block;color:var(--sub);font-size:14px;line-height:1.35}
.inst-banner .btn{flex:none}
.inst-dlg{margin:auto;border:0;border-radius:18px;padding:0;width:min(460px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.inst-dlg::backdrop{background:rgba(20,20,20,.45)}
.inst-in{padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.inst-top{display:flex;align-items:flex-start;gap:8px}
.inst-top h2{flex:1;font-size:21px;line-height:1.2}
.inst-x{width:44px;height:44px;border:0;background:transparent;font-size:28px;line-height:1;color:var(--ink);cursor:pointer;border-radius:10px;margin:-8px -8px 0 0}
.inst-x:hover{background:var(--tint)}
.inst-seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px}
.inst-seg button{flex:1;min-height:44px;border:0;background:transparent;border-radius:9px;font:inherit;font-weight:600;color:var(--sub);cursor:pointer}
.inst-seg button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.inst-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.inst-steps li{padding-left:2px}
/* install banner: Not now, "you have the app" line (walkthrough 2026-09-29 notes 3, 15, 29) */
.inst-banner{flex-wrap:wrap}
.inst-banner>div:first-child{flex:1 1 220px}
.inst-banner>.inst-btns{display:flex;gap:8px;flex-wrap:wrap;flex:0 1 auto;min-width:0}
.inst-banner .btn.sm{min-height:44px;padding:0 14px;font-size:15px}
.inst-banner.has{background:var(--card);border-color:var(--line)}
.inst-gone{color:var(--sub);font-size:14px;margin:0}
@media (max-width:520px){.inst-banner>.inst-btns{flex:1 1 100%}.inst-banner .inst-btns .btn{flex:1 1 auto}}
/* "Download the Plona app for instant alerts!" (was "Download Plona Web App ...", founder 2026-10-01, item 4): the homepage tile and the banner
   under the Owner, Driver and Plona Market page titles. js/getapp.js. Uses the shared color tokens of the page (app.css or v2.css).
   3.6.0.4 (Chandon, Oct 27: "instead of it's like download the web app, it's like download iOS, Android"): the Add to Home Screen steps
   are gone; .ga-stores holds the store button(s) (Plona's own text buttons, PlonaGetApp.stores) and .ga-web the quiet browser line. */
.ga h2{font-family:'Clash Grotesk','Instrument Sans',sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.ga .btn{min-height:48px}
/* founder 2026-10-08: the homepage download tile gets its own shade so it stands out (tint; ink 16.3:1, --sub 6.4:1, --ot 5.6:1 on it) */
.ga-tile{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;background:var(--tint);border-color:var(--tint-line);border-top:3px solid var(--orange)}
.ga-tile h2{font-size:clamp(24px,5vw,30px);text-wrap:balance}
.ga-banner{border:2px solid var(--ob);background:var(--tint);border-radius:var(--r-lg);padding:14px 16px;margin:12px 0 16px}
.ga-bh{display:flex;gap:12px;align-items:center}
.ga-ic{flex:none;width:44px;height:44px;border-radius:10px;background:var(--card)}
.ga-banner h2{font-size:20px;margin:0}
.ga-banner .ga-bh p{font-size:14.5px;color:var(--sub);margin:2px 0 0}
.ga-banner .ga-not{margin-top:6px}
.ga-stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ga-stores .btn{flex:1 1 200px;min-height:48px;white-space:nowrap;padding-left:14px;padding-right:14px;text-decoration:none}
.ga-tile .ga-stores{margin-top:4px}
.ga-web{margin:6px 0 0;font-size:15px;color:var(--sub)}
.ga-web a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline}
.ga-intro{font-weight:700;font-size:clamp(18px,4.4vw,22px);line-height:1.35;color:var(--ink);outline:0}
.ga-gone{font-weight:600;padding:10px 0}
@media(min-width:720px){.ga-stores .btn{flex:0 1 auto;min-width:240px}}
.ga-not{align-self:flex-start;min-height:44px;padding:0 6px;margin-left:-6px;background:none;border:0;color:var(--ink);text-decoration:underline;font:600 15px 'Instrument Sans',sans-serif;cursor:pointer}

/* ===== The log in or sign up sheet (PlonaChrome.gate, round 3A, r3prep/modes SHEET-SPEC) and the brief tab highlight.
   Site pages and the app both load it. Tokens only; .btn and .btn.ghost come from app.css and v2.css, which define them the same way. ===== */

/* the brief tab highlight: the tapped tab lights, the page's own tab goes quiet; both go back when the sheet is gone */
.sh-peeking .sh-tab[aria-current=page]:not(.sh-peek){color:var(--sub);font-weight:600}
.sh-peeking .sh-tab[aria-current=page]:not(.sh-peek) .sh-ic{background:transparent}
.sh-tab.sh-peek{color:var(--ot);font-weight:700}
.sh-tab.sh-peek .sh-ic{background:var(--tint)}

/* phones: full screen, square corners, the page behind is not dimmed (Turo). It rises from the bottom in 0.42 s, falls in 0.34 s. */
.sh-gate{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;
  background:var(--bg);color:var(--ink);overflow:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.4,0,.9,.6)}
.sh-gate.in{transform:none;transition:transform .42s cubic-bezier(.2,.85,.25,1)}
.sh-gate.instant,.sh-gate.instant.in{transition:none}
.sh-gate::backdrop{background:transparent}
.sh-gate-in{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom))}
.sh-gate-top{min-height:56px;display:flex;align-items:center}
.sh-gate-x{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:-8px;padding:0;border:0;border-radius:24px;background:transparent;color:var(--ink);cursor:pointer}
.sh-gate-x svg{width:26px;height:26px;display:block}
@media (hover:hover){.sh-gate-x:hover{background:var(--wait)}}
.sh-gate-x:focus-visible{outline:2px solid var(--ink);outline-offset:0}
/* the words and buttons sit a little above the middle, so the buttons land where a thumb reaches */
.sh-gate-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:420px;margin:0 auto;
  padding:0 0 clamp(24px,9vh,88px);text-align:center}
.sh-gate-bull{display:block;width:132px;height:84px;object-fit:cover;object-position:50% 50%}
.sh-gate h2{font:600 30px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;margin:12px 0 0;outline:none}
.sh-gate-why{font-size:17px;line-height:1.45;color:var(--sub);margin:10px 0 0;max-width:34ch;text-wrap:balance}
.sh-gate-btns{width:100%;display:grid;gap:12px;margin-top:28px}
.sh-gate-btns .btn{width:100%;min-height:52px;font-size:17px}
.sh-gate-one{font-size:14.5px;line-height:1.4;color:var(--sub);margin:18px 0 0}
.sh-gate-one[hidden]{display:none}
html.sh-gate-on{overflow:hidden}
/* html overflow:hidden stops body{overflow-x:hidden} (v2.css, app.css) passing to the page, so the body would turn into its own scroll box and the sticky header would scroll away behind the 1280 card; clip does not make a scroll box */
html.sh-gate-on body{overflow-x:clip}

/* laptops and tablets: a centered card over a dimmed page, so the lit tab stays in view behind it */
@media (min-width:700px){
  .sh-gate{inset:0;margin:auto;width:min(440px,calc(100% - 32px));height:fit-content;max-height:calc(100dvh - 48px);
    border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.18);
    opacity:0;transform:translateY(24px);transition:transform .2s ease-in,opacity .16s ease-in}
  .sh-gate.in{opacity:1;transform:none;transition:transform .28s cubic-bezier(.2,.85,.25,1),opacity .2s ease-out}
  .sh-gate::backdrop{background:rgba(20,16,12,.42)}
  .sh-gate-in{min-height:0;padding:8px 32px 32px}
  .sh-gate-top{min-height:48px;margin:0 -24px 0 -14px}
  .sh-gate-body{padding:0}
}
/* reduced motion: no slide and no rise; it is simply there, and simply gone */
@media (prefers-reduced-motion:reduce){.sh-gate,.sh-gate.in{transition:none}}

/* ===== The bull wait screen (PlonaChrome.bullwait, P.bullwait in the app; round 3A, r3prep/modes MODE-SPEC 4). The app and Plona Market
   both draw it (the switch to driver mode lands on the Market). The switch button's look is in app/css/more-inbox.css (.mo-sw).
   The two role colors are fixed on purpose (PRD-37: owner orange, driver black); white text passes on both, in light and dark. ===== */
.bw{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));background:var(--bw-c,#BF4A0A);color:#fff;text-align:center;animation:bwFade .12s ease-out both}
.bw.to-owner{--bw-c:#BF4A0A}
.bw.to-driver{--bw-c:#141414}
.bw.to-team{--bw-c:#1E4C8A}   /* team blue (team-mode-design 2.2): white text 8.6:1 */
/* dark mode: the same blue as the dark "Switch to team mode" button (app.css --team, #3767A8; white text 5.7:1) */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bw.to-team{--bw-c:#3767A8}}
:root[data-theme=dark] .bw.to-team{--bw-c:#3767A8}
/* the plain look, if the founder prefers it to the role colors: PlonaChrome.bullwait.setup({plain:true}) puts data-tone="plain" on it */
.bw[data-tone=plain]{--bw-c:var(--bg);color:var(--ink)}
.bw-in{display:flex;flex-direction:column;align-items:center;max-width:440px;margin-top:-6vh}
.bw-stage{position:relative;width:200px;height:122px}
/* bull.png is 260x260 with the bull in the middle band: cover in a 168x106 box keeps the whole bull (the header does the same at 38x24, 3.6.0.7) */
.bw-bull{position:absolute;left:16px;bottom:12px;width:168px;height:106px;object-fit:cover;
  animation:bwDrive .5s cubic-bezier(.22,.9,.3,1.1) both,bwTrot .46s ease-in-out .5s infinite}
.bw.to-owner:not([data-tone=plain]) .bw-bull,.bw.to-team:not([data-tone=plain]) .bw-bull{filter:brightness(0) invert(1)}   /* white bull on orange; the orange bull on black */
/* the road under the bull: dashes slide left, so the bull drives right */
.bw-road{position:absolute;left:0;right:0;bottom:4px;height:4px;border-radius:2px;opacity:.6;
  background:repeating-linear-gradient(90deg,currentColor 0 16px,transparent 16px 28px);animation:bwRoad .42s linear infinite}
/* big moments end on a green check (the trip bar's done color) for half a second */
.bw-check{position:absolute;right:-4px;bottom:-10px;width:32px;height:32px;border-radius:50%;background:#0B6B40;color:#fff;box-shadow:0 0 0 3px #fff;
  font:700 18px/32px 'Instrument Sans',sans-serif;opacity:0;transform:scale(.6)}
.bw[data-state=done] .bw-check{opacity:1;transform:none;transition:opacity .15s,transform .22s cubic-bezier(.3,1.5,.5,1)}
.bw[data-state=done] .bw-bull,.bw[data-state=done] .bw-road{animation:none}
.bw-words{margin-top:26px}
.bw-t{font:600 27px/1.15 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;margin:0}
.bw-s{font:500 16.5px/1.45 'Instrument Sans',sans-serif;margin:10px auto 0;max-width:30ch}
.bw-s:empty{display:none}
.bw.out{animation:bwOut .18s ease-in forwards}
@media (min-width:900px){.bw-stage{width:240px;height:146px}.bw-bull{left:20px;width:200px;height:126px}.bw-t{font-size:34px}.bw-s{font-size:18px}}
@keyframes bwFade{from{opacity:0}to{opacity:1}}
@keyframes bwOut{to{opacity:0}}
@keyframes bwDrive{from{transform:translateX(-130px);opacity:0}to{transform:none;opacity:1}}
@keyframes bwTrot{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bwRoad{from{background-position:0 0}to{background-position:-28px 0}}
/* reduced motion: the same screen, still. No fade, no drive in, no trot, no moving road, no pop. */
@media (prefers-reduced-motion:reduce){.bw,.bw.out,.bw-bull,.bw-road{animation:none}.bw[data-state=done] .bw-check{transition:none}}
/* a switch to driver mode lands on /plonamarket: until chrome.js draws the screen there, the page stays the screen's color (MODE-SPEC 4.5) */
html[data-bw] body{visibility:hidden}
html[data-bw=owner]{background:#BF4A0A}
html[data-bw=driver]{background:#141414}

/* ---------- page tops PT1 on site pages (b341; founder 2026-10-10): the round Back alone on its own row above the h1, like the app's inner
   pages (app/css/part2.css .pbk, the same look; site pages do not load part2.css). The h1 sits under it, left aligned. ---------- */
.site-bk{display:flex;align-items:center;min-height:44px;margin:10px 0 6px}
.site-bk .pbk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
  background:var(--card);background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid var(--line);border-color:color-mix(in srgb,var(--line) 75%,transparent);
  box-shadow:0 1px 2px rgba(20,20,20,.06),0 3px 10px rgba(20,20,20,.10);color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-out,transform .1s ease-out}
.site-bk .pbk svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-bk .pbk:hover{background:var(--wait)}
.site-bk .pbk:active{transform:scale(.94)}
.site-bk .pbk:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.site-bk .pbk{transition:none}.site-bk .pbk:active{transform:none}}
@media print{.site-bk{display:none}}
/* 3.4.0.2, kept in 3.4.1: About Plona and the contact lines in every footer (the Telnyx 10DLC brand check) */
.sf-about{max-width:620px;margin:16px auto 0;text-align:center;color:#a8a8a8;font-size:14px;line-height:1.55}
.sf-about b{color:#fff}
.sf-about address{font-style:normal;margin-top:6px}
.sf-about a{color:#d6d6d6;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:4px 0;margin:0 5px}
.sf-about a:hover{color:#F7925A}