/* Swops additions to the website design (apps/site-source/IMPORT-NOTES.md), loaded after site.css
   on every page. Same palette and type as site.css. */

/* Euro / dollar switch: the twin of .billing-toggle (pricing), smaller in the price notes elsewhere.
   Hidden until assets/swops.js runs, so visitors without JavaScript never see a dead control. */
/* Euro / dollar: a quiet text link under the prices (Jim 2026-10-14), not a toggle. */
.currency-link{margin:14px 0 0;font-size:13px;line-height:1.5;color:#697267}
.currency-link[hidden],[data-tax-note][hidden]{display:none!important}
.currency-link button{border:0;background:none;padding:0;font:inherit;color:#1c2922;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b9c3ae}
.currency-link button:hover{text-decoration-color:#1c2922}
.plan-switches{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 14px;margin:28px auto 36px}
.plan-switches .billing-toggle{margin:0}
.currency-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}

/* Layout fixes from the phone / tablet / large-screen review (2026-10-14) */
/* home hero, phones: the three "Capture. Understand. Keep it together." columns did not fit
   (the third ran off the screen at 375 px): one row each, title beside its line */
@media(max-width:540px){
 .hero .metric-strip{grid-template-columns:1fr;gap:14px;padding-top:24px;margin-top:40px}
 .hero .metric-strip>div{display:grid;grid-template-columns:minmax(0,8.6em) minmax(0,1fr);gap:14px;align-items:baseline}
 .hero .metric-strip strong{font-size:21px}
 .hero .metric-strip span{margin-top:0;font-size:12px}
}
/* small phones: at Jim's 50 px (from 360 px up) "understanding." needs 303 px, wider than the
   screen below ~347 px; 45 px fits 320 px (270 of 276 px) */
/* Home hero title (Jim 2026-10-14: "Scan business cards & badges. Understand the business with live AI."),
   a little smaller than the design's h1 so the longer title reads well. */
.hero-copy h1{font-size:clamp(44px,4.7vw,66px)}
@media(max-width:1050px){.hero-copy h1{font-size:52px}}
@media(max-width:800px){.hero-copy h1{font-size:54px}}
@media(max-width:540px){.hero-copy h1{font-size:42px;letter-spacing:-1.2px}}
@media(max-width:359px){.hero-copy h1{font-size:37px}}
/* home + features "In their inbox" email card: the preview was taller than its fixed-height box,
   so the label and the white card touched the box's top and bottom edges (on phones they ran past
   them). Both cards of the pair are a little taller on tablets and desktops (so they stay level);
   on phones, where the cards stack, the email box takes the height of its content */
@media(min-width:1101px){.sharing-visual{height:410px}}
@media(min-width:801px) and (max-width:1100px){.sharing-visual{height:400px}}
@media(max-width:800px){.sharing-visual.email-scene{height:auto;min-height:410px}}
@media(max-width:540px){.sharing-visual.email-scene{min-height:345px;padding:26px 20px}}
/* tablets: the "Card captured" pill stayed inside the photo column instead of 14 px from the screen edge */
@media(max-width:1100px){.saved-badge{right:0}}
/* FAQ answers: a comfortable line length in the 860 px column (was ~125 characters a line) */
.faq details p{max-width:690px}
/* headings wrap into even lines instead of leaving one word behind ("All plans / compared.",
   "Terms of / Service"), most visible on phones since the -.03em letter-spacing; the <br>s stay */
h1,h2,h3,h4{text-wrap:balance}
/* exhibitors email preview: the label runs to two lines on small phones; tick beside the first */
.email-sent-label{align-items:flex-start}.email-sent-label .icon{flex:none;margin-top:1px}

/* Legal links at the foot of every page */
.footer-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.footer .footer-legal a{display:inline;padding:0}
.footer-legal a:not(:last-child)::after{content:'\00b7';display:inline-block;margin:0 9px;color:#9aa78f}
.footer-legal a:hover,.footer-legal a[aria-current=page]{color:#1c2922}
.footer-bottom{gap:10px 30px}
@media(max-width:540px){.footer-legal{justify-content:flex-start}}

/* Mobile menu (Jim 2026-10-14), used up to 800 px like the design's: header bar = logo · "Try free" ·
   toggle (three lines, no circle; an x in the same place when open). The menu is a panel fixed under
   the header, covering the page; the header itself never moves. Behaviour: assets/swops.js. */
.menu-toggle{display:none;position:relative;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:0;background:none;color:#1c2922;-webkit-tap-highlight-color:transparent}
.menu-icon{position:absolute;left:11px;top:15px;width:22px;height:14px}
.menu-icon i{position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.menu-icon i:nth-child(1){top:0}
.menu-icon i:nth-child(2){top:6px}
.menu-icon i:nth-child(3){top:12px}
.menu-toggle[aria-expanded=true] .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-icon i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-actions{display:none}
@media(max-width:800px){
 html{scrollbar-gutter:stable}
 html.menu-open{overflow:hidden}
 .header .nav{flex-wrap:nowrap;gap:12px}
 .menu-toggle{display:block;order:3;margin-right:-11px}
 .navend{display:flex;order:2;margin-left:auto;gap:0}
 .navend>a:not(.btn){display:none}
 .navlinks{position:fixed;z-index:60;top:var(--menu-top,75px);left:0;right:0;height:calc(100vh - var(--menu-top,75px));height:calc(100dvh - var(--menu-top,75px));margin:0;padding:14px 28px 36px;display:none;flex-direction:column;align-items:stretch;gap:8px;background:#fafbf7;overflow-y:auto;overscroll-behavior:contain;order:4}
 .navlinks.open{display:flex}
 .menu-actions{display:grid;gap:12px;width:100%;margin-top:22px;padding-top:24px;border-top:1px solid #dce4d3}
 .menu-actions .btn{width:100%;min-height:48px;padding:0 22px;font-size:14px;transform:none}
 .menu-actions .btn.menu-signin{background:transparent;color:#1c2922;border-color:#1c2922}
 .menu-actions .btn.menu-signin:hover{background:#eef2e7}
 .menu-actions p{margin:2px 0 0;text-align:center}
}
@media(min-width:541px) and (max-width:800px){.menu-actions{max-width:480px}}
@media(max-width:540px){.navlinks{padding-left:22px;padding-right:22px}}
@media(prefers-reduced-motion:reduce){.menu-icon i{transition:none}}

/* The 78-second film on phones held upright (Jim 2026-10-14): the portrait file (540 x 960, chosen by
   the <source media> in the page) plays in a 9:16 player, at most 80% of the screen height. Landscape
   phones, tablets and desktops keep the 16:9 player and file. */
@media(max-width:600px) and (orientation:portrait){
 .film-adaptive{aspect-ratio:9/16;width:min(100%,calc(80svh * 9 / 16));margin-inline:auto}
 .film-adaptive video{aspect-ratio:auto;height:100%}
}

/* Cookie banner (assets/consent.js, Jim 2026-10-14): a calm card, not a modal; the page stays usable.
   Phones: pinned to the bottom; from 801 px: bottom right, 420 px wide (bottom left covered the hero's "Try Swops free" on laptops). Above the page (the sticky
   header is 50, at the top); the phone menu's panel (60) covers it, and it is hidden while that menu
   is open. Accept and Reject look exactly the same on purpose. */
.consent{position:fixed;z-index:55;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:16px 16px 14px;background:#fff;color:#1c2922;border:1px solid #dce3d3;border-radius:18px;box-shadow:0 18px 44px -12px rgba(28,41,34,.28);font-size:14px;line-height:1.55;animation:consent-in .22s ease-out}
.consent[hidden]{display:none}
.consent:focus{outline:none}
.consent:focus-visible{outline:3px solid #63854f;outline-offset:3px}
.consent .consent-text,.consent .consent-status{margin:0}
.consent-text a{color:#344d24;font-weight:550;white-space:nowrap;text-decoration:underline;text-decoration-color:#a8b998;text-underline-offset:3px}
.consent-text a:hover{text-decoration-color:currentColor}
.consent .consent-status{margin-top:6px;font-size:13px;color:#657b52}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.consent-btn{min-height:44px;padding:10px 18px;border-radius:100px;border:1px solid #1c2922;background:#1c2922;color:#fff;font-size:14px;font-weight:550;line-height:1.3;transition:background .2s}
.consent-btn:hover{background:#354b3a;border-color:#354b3a}
html.consent-shown body{padding-bottom:var(--consent-space,0px)}
html.menu-open .consent{visibility:hidden}
@media(min-width:801px){.consent{left:auto;right:24px;bottom:24px;width:420px;max-width:calc(100vw - 48px);padding:20px 22px 18px}}
@keyframes consent-in{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.consent{animation:none}.consent-btn{transition:none}}
/* Privacy Notice, cookies section: "Change cookie settings" (shown by consent.js) */
.legal-page .consent-settings{margin-top:22px}
.consent-open{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:100px;border:1px solid #ccd5c1;background:transparent;color:#1c2922;font-size:14px;font-weight:550;line-height:1.5;transition:background .2s}
.consent-open:hover{background:#eef2e7}

/* Home hero on phones (Jim 2026-10-19, option E of the hero review): the card-capture illustration
   edge to edge on top, "Scan the business behind every card." with "business" on a lime marker, the
   new line under it, one wide "Try Swops free" and two outline buttons (For exhibitors, How it works).
   No eyebrow, no free-scans line, no photo or Northline card. Tablets and desktops keep the photo
   hero; the <picture> in index.html serves the illustration (already on the page colour) up to 540 px. */
.hero-phone,.hero-phone-btn{display:none}
@media(max-width:540px){
 .home-hero{padding-top:0}
 .home-hero .hero-wide,.home-hero .eyebrow,.home-hero .hero-copy>.small,.home-hero .textlink,.home-hero .saved-badge,.home-hero .hero-float{display:none}
 .home-hero .hero-phone{display:inline}
 .home-hero .hero-grid{gap:14px}
 .home-hero .hero-visual{order:-1;width:auto;max-width:none;height:auto;margin:0 -22px;padding:0}
 .home-hero .hero-photo{height:auto;aspect-ratio:390/336;border-radius:0;object-position:50% 28%}
 .home-hero .hero-copy{padding:0}
 .home-hero h1{font-size:40px;line-height:1.08;letter-spacing:-.035em;margin-bottom:14px}
 .home-hero h1 mark{display:inline-block;padding:0 8px;border-radius:10px;background:#c6f47c;color:inherit;transform:rotate(-1.5deg)}
 .home-hero .lead{font-size:16.5px;line-height:1.45;margin-bottom:0}
 .home-hero .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0}
 .home-hero .actions .btn{min-height:46px;padding:0 12px;font-size:14px;gap:8px}
 .home-hero .actions .btn:first-child{grid-column:1/-1;min-height:54px;font-size:16px;gap:12px}
 .home-hero .hero-phone-btn{display:inline-flex}
 .home-hero .hero-phone-btn .arrow{font-size:15px}
}
@media(max-width:359px){.home-hero h1{font-size:35px}}