/* ================================================================
   S3XY CARDS — chrome.css
   The skip link, announce bar, header, menu sheet and footer of every
   storefront page and of /order/. The markup sits between the
   chrome:start / chrome:end comments of each page and is the same on
   all of them.
   It stands on its own: /order/ does not load site-v2.css, so nothing
   here uses that file's tokens, reset or classes (.btn, .container,
   .section, .chip, .timeline). Every color is a --chrome-* property
   declared below. Load it last on the page.
   ------------------------------------------------------------
   ORDER
   1. Tokens
   2. Shared base, focus rings
   3. Skip link
   4. Announce bar
   5. Header: logo, nav, the "Create your card" pill, menu button
   6. Menu sheet
   7. Footer
   ================================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --chrome-bg:#141416; --chrome-bg-elev:#19191C;
  --chrome-line:rgba(255,255,255,.08); --chrome-line-strong:rgba(255,255,255,.18);
  --chrome-text:#F5F5F7; --chrome-text-2:#A1A1A6; --chrome-text-3:#8E8E93;
  --chrome-glass:rgba(20,20,22,.78);
  --chrome-pill:#F5F5F7; --chrome-pill-hover:#FFFFFF; --chrome-pill-press:#D9D9DE; --chrome-on-pill:#000000;
  --chrome-focus:#F5F5F7;

  /* The accent: S3XY crimson. To go back to amber, replace these five values with the
     ones in the comment (site-v2.css, create-v2.css and app-v2.css hold the same block). */
  --chrome-accent:#FF2D55; --chrome-accent-strong:#E80038; --chrome-on-accent:#FFFFFF;
  --chrome-accent-text:#FF5C7A; --chrome-accent-glow:rgba(255,45,85,.35);
  /* amber:
  --chrome-accent:#FFB547; --chrome-accent-strong:#FFB547; --chrome-on-accent:#09090B;
  --chrome-accent-text:#FFB547; --chrome-accent-glow:rgba(255,181,71,.35); */

  /* the system face only: a web font a page loads for its card canvas must not change the chrome */
  --chrome-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --chrome-maxw:1200px; --chrome-gutter:clamp(16px,4vw,32px);
  --chrome-ease:cubic-bezier(.2,.7,.2,1);
  /* phones and tablets: a 44px bar so its link is a full tap target, and a slimmer header.
     site-v2.css keeps --header-h equal to --chrome-header-h. */
  --chrome-header-h:64px; --chrome-announce-h:44px;
}
@media (min-width:960px){
  :root{ --chrome-header-h:76px; --chrome-announce-h:32px; }
}
/* body.chrome-dark: the chrome of a page that is still dark (/order/). Everything in the chrome is
   inside <body>, so these win over the :root values above. */
body.chrome-dark{
  --chrome-bg:#141416; --chrome-bg-elev:#19191C;
  --chrome-line:rgba(255,255,255,.08); --chrome-line-strong:rgba(255,255,255,.18);
  --chrome-text:#F5F5F7; --chrome-text-2:#A1A1A6; --chrome-text-3:#8E8E93;
  --chrome-glass:rgba(20,20,22,.78);
  --chrome-pill:#F5F5F7; --chrome-pill-hover:#FFFFFF; --chrome-pill-press:#D9D9DE; --chrome-on-pill:#000000;
  --chrome-focus:#F5F5F7; --chrome-accent-text:#FF5C7A;
}

/* ============================================================
   2. SHARED BASE
   The host page's own text styles differ from page to page, so the
   chrome sets every one it depends on.
   ============================================================ */
.skip-link,.announce,.site-header,.menu-sheet,.site-footer{
  font-family:var(--chrome-font); font-size:1rem; font-weight:400; line-height:1.5; letter-spacing:0;
  text-align:left; text-transform:none; color:var(--chrome-text); color-scheme:dark;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.skip-link,.announce,.announce *,.site-header,.site-header *,.menu-sheet,.menu-sheet *,.site-footer,.site-footer *{ box-sizing:border-box; }

/* one focus ring for everything in the chrome */
.skip-link:focus-visible,
.announce a:focus-visible,
.site-header a:focus-visible,.site-header button:focus-visible,
.menu-sheet a:focus-visible,.menu-sheet button:focus-visible,
.site-footer a:focus-visible{ outline:2px solid var(--chrome-focus); outline-offset:3px; border-radius:6px; }
.announce a:focus:not(:focus-visible),
.site-header a:focus:not(:focus-visible),.site-header button:focus:not(:focus-visible),
.menu-sheet a:focus:not(:focus-visible),.menu-sheet button:focus:not(:focus-visible),
.site-footer a:focus:not(:focus-visible){ outline:none; }

/* the menu sheet is open: the page behind it does not scroll */
body.scroll-lock{ overflow:hidden; }

/* ============================================================
   3. SKIP LINK
   ============================================================ */
.skip-link{
  position:fixed; top:-100%; left:12px; z-index:200;
  background:var(--chrome-text); color:var(--chrome-bg); padding:12px 18px; border-radius:12px;
  font-weight:600; font-size:.9rem; text-decoration:none; transition:top .15s var(--chrome-ease);
}
.skip-link:focus{ top:12px; }
.skip-link:focus-visible{ border-radius:12px; }

/* ============================================================
   4. ANNOUNCE BAR: the offer on the left, help links on the right
   (the help links move into the menu sheet under 768px)
   ============================================================ */
.announce{ display:block; min-height:0; margin:0; padding:0; background:var(--chrome-bg-elev); border-bottom:1px solid var(--chrome-line); }
.announce-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; max-width:var(--chrome-maxw); min-height:var(--chrome-announce-h); margin-inline:auto; padding-inline:var(--chrome-gutter);
}
.announce a{
  display:inline-flex; align-items:center; min-height:var(--chrome-announce-h);
  font-size:.8125rem; line-height:1.2; letter-spacing:0; color:var(--chrome-text-2); text-decoration:none; transition:color .18s;
}
.announce-promo{ font-weight:400; white-space:normal; overflow:visible; text-overflow:clip; }
/* the link is a flex box, which drops the space after the bold words: the margin puts it back */
.announce-promo b{ margin-right:.3em; color:var(--chrome-text-2); font-weight:600; }
.announce-links{ display:none; align-items:center; gap:22px; flex:none; }
.announce-links a{ font-weight:500; }
.announce a[aria-current="page"]{ color:var(--chrome-text); }
@media (hover:hover){ .announce a:hover{ color:var(--chrome-text); } }
@media (min-width:768px){ .announce-links{ display:flex; } }

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--chrome-header-h);
  background:var(--chrome-glass); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent; transition:border-color .2s, background-color .25s;
}
.site-header.is-scrolled{ border-bottom-color:var(--chrome-line); }
/* a page whose hero runs under the header (body.has-stage-hero): the header is clear until
   the page scrolls, and solid again while the menu sheet is open */
.has-stage-hero .site-header:not(.is-scrolled):not(.menu-open){
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent;
}
.header-inner{
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:var(--chrome-maxw); height:100%; margin-inline:auto; padding-inline:var(--chrome-gutter);
}

/* the logo: 30px high in a 44px tall link */
.chrome-dark .site-header .brand-logo img,.chrome-dark .site-footer .footer-logo img{ filter:none; opacity:1; }
.brand-logo{ display:inline-flex; align-items:center; flex:none; gap:0; min-height:44px; line-height:0; text-decoration:none; }
.site-header .brand-logo img{ display:block; width:auto; height:30px; max-width:none; }

.main-nav{ display:none; flex:none; margin:0; }
.main-nav-list{ display:flex; align-items:center; gap:clamp(20px,2.6vw,36px); margin:0; padding:0; list-style:none; }
.main-nav-list li{ display:flex; margin:0; padding:0; }
.main-nav-list a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--chrome-font); font-size:1.0625rem; font-weight:600; line-height:1.2; letter-spacing:-.02em;
  color:var(--chrome-text); text-decoration:none; white-space:nowrap; transition:color .18s;
}
@media (hover:hover){ .main-nav-list a:hover{ color:var(--chrome-text-2); } }
/* the page you are on: a dot under its name */
.main-nav-list a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--chrome-accent);
}

.header-actions{ display:flex; flex:none; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; }

/* the "Create your card" pill: in the header from 768px, and at the foot of the menu sheet */
.header-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; margin:0; padding:0 20px; border:0; border-radius:999px;
  background:var(--chrome-pill); color:var(--chrome-on-pill);
  font-family:var(--chrome-font); font-size:.9375rem; font-weight:500; line-height:1; letter-spacing:-.012em;
  text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--chrome-ease), background-color .18s;
}
@media (hover:hover){ .header-cta:hover{ background:var(--chrome-pill-hover); color:var(--chrome-on-pill); } }
.header-cta:active{ transform:scale(.965); background:var(--chrome-pill-press); }
.site-header .header-cta:focus-visible,.menu-sheet .header-cta:focus-visible{ border-radius:999px; }
.header-actions .header-cta{ display:none; }
@media (min-width:768px){ .header-actions .header-cta{ display:inline-flex; } }

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0;
  border:0; border-radius:12px; background:none; color:var(--chrome-text); font:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background-color .18s;
}
@media (hover:hover){ .menu-toggle:hover{ background:rgba(255,255,255,.06); } }
.menu-toggle:active{ background:rgba(255,255,255,.1); }
@media (hover:hover){ .chrome-dark .menu-toggle:hover{ background:rgba(255,255,255,.06); } }
.chrome-dark .menu-toggle:active{ background:rgba(255,255,255,.1); }
.site-header .menu-toggle:focus-visible{ border-radius:12px; }
.menu-toggle svg{ display:block; width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (min-width:960px){
  /* the logo and the pill take equal shares, so the nav sits in the middle of the page */
  .header-inner{ display:grid; grid-template-columns:1fr auto 1fr; }
  .brand-logo{ justify-self:start; }
  .site-header .brand-logo img{ height:36px; }
  .main-nav{ display:block; }
  .header-actions{ justify-self:end; margin-left:0; }
  .menu-toggle{ display:none; }
}

/* ============================================================
   6. MENU SHEET
   Fixed under the header. site-v2.js sets --sheet-top to the header's
   real bottom edge when it opens; the calc() stands in before that.
   ============================================================ */
.menu-sheet{
  position:fixed; top:var(--sheet-top, calc(var(--chrome-header-h) + var(--chrome-announce-h))); left:0; right:0; bottom:0; z-index:99;
  background:var(--chrome-bg); opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--chrome-ease), transform .22s var(--chrome-ease), visibility 0s linear .22s;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.menu-sheet.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .22s var(--chrome-ease), transform .22s var(--chrome-ease); }
.menu-sheet-inner{
  position:relative; display:flex; flex-direction:column; gap:24px; min-height:100%;
  padding:12px var(--chrome-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
}
/* the dialog's own close button. The header's menu button, which now shows a cross, is what a
   pointer uses; this one appears for keyboard focus, so the sheet does not show two crosses. */
.menu-sheet-close{
  position:absolute; top:8px; right:calc(var(--chrome-gutter) - 2px); z-index:1; align-self:auto;
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0;
  border:0; border-radius:12px; background:var(--chrome-bg-elev); color:var(--chrome-text); font:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none; opacity:0; pointer-events:none;
}
.menu-sheet-close:focus-visible{ opacity:1; pointer-events:auto; }
.menu-sheet .menu-sheet-close:focus-visible{ border-radius:12px; }
.menu-sheet-close svg{ display:block; width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
.menu-sheet-nav{ display:grid; gap:0; }
.menu-sheet-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:0 4px;
  font-family:var(--chrome-font); font-size:1.25rem; font-weight:600; line-height:1.2; letter-spacing:-.02em;
  color:var(--chrome-text); text-decoration:none; border-bottom:1px solid var(--chrome-line);
}
.menu-sheet-nav a:active{ color:var(--chrome-text-2); }
.menu-sheet-nav a[aria-current="page"]::after{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--chrome-accent); }
.menu-sheet-cta{ margin-top:auto; }
.menu-sheet-cta .header-cta{ display:flex; width:100%; min-height:56px; padding:0 30px; font-size:1.0625rem; }

/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer{ margin:0; padding-block:clamp(40px,6vw,64px) 28px; background:var(--chrome-bg-elev); border-top:1px solid var(--chrome-line); color:var(--chrome-text-2); }
.footer-inner{ width:100%; max-width:var(--chrome-maxw); margin-inline:auto; padding-inline:var(--chrome-gutter); }
.site-footer p{ text-wrap:pretty; } /* no orphan word at the end of a paragraph; ignored where unsupported */
/* the brand block, then the link lists: two across on phones, all three in a row from 600px;
   from 960px the brand block is the first of four columns */
.footer-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; margin:0 0 28px; }
.footer-top{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:46ch; }
.footer-logo{ display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; line-height:0; text-decoration:none; }
.site-footer .footer-logo img{ display:block; width:auto; height:30px; max-width:none; }
.footer-top p{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--chrome-text-2); }
.footer-social{ display:flex; gap:10px; margin:6px 0 0; }
.footer-social a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--chrome-line-strong);
  color:var(--chrome-text-2); text-decoration:none; transition:color .18s, border-color .18s;
}
.site-footer .footer-social a:focus-visible{ border-radius:50%; }
@media (hover:hover){ .footer-social a:hover{ color:var(--chrome-text); border-color:var(--chrome-text-2); } }
.footer-social svg{ display:block; width:18px; height:18px; fill:currentColor; stroke:none; }
.footer-social svg.is-line{ fill:none; stroke:currentColor; stroke-width:1.8; }
.footer-social svg.is-line .is-dot{ fill:currentColor; stroke:none; }

.footer-col{ min-width:0; }
.footer-heading{
  margin:0 0 4px; font-family:var(--chrome-font); font-size:.8125rem; font-weight:600; line-height:1.4; letter-spacing:0;
  text-transform:none; color:var(--chrome-text-3);
}
.footer-col ul{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.footer-col li{ display:flex; margin:0; padding:0; }
.footer-col a{
  display:inline-flex; align-items:center; min-width:44px; min-height:44px;
  font-size:.9375rem; line-height:1.3; color:var(--chrome-text-2); text-decoration:none; transition:color .18s;
}
.footer-col a[aria-current="page"]{ color:var(--chrome-text); }
@media (hover:hover){ .footer-col a:hover{ color:var(--chrome-text); text-decoration:underline; text-underline-offset:3px; } }

.footer-bottom{ display:grid; gap:12px; padding-top:24px; border-top:1px solid var(--chrome-line); }
.footer-secure{ display:flex; align-items:center; gap:8px; margin:0; font-size:.875rem; font-weight:500; line-height:1.4; color:var(--chrome-text-2); }
.footer-secure svg{ display:block; flex:none; width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-disclaimer{ max-width:90ch; margin:0; font-size:.8125rem; line-height:1.6; color:var(--chrome-text-3); }
.footer-copyright{ margin:0; font-size:.8125rem; line-height:1.6; color:var(--chrome-text-3); }

@media (min-width:600px){
  .footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:960px){
  .footer-cols{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
  .footer-top{ grid-column:auto; gap:12px; }
  .footer-heading{ margin-bottom:8px; }
  .footer-col a{ min-height:0; padding-block:5px; }
}

@media (prefers-reduced-motion:reduce){
  .skip-link,.site-header,.announce a,.main-nav-list a,.header-cta,.menu-toggle,.footer-social a,.footer-col a{ transition:none; }
  .menu-sheet,.menu-sheet.is-open{ transform:none; transition:none; }
  .header-cta:active{ transform:none; }
}
@media (forced-colors:active){
  /* the dot is a background, which this mode drops: underline the current page instead */
  .main-nav-list a[aria-current="page"],.menu-sheet-nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; }
}
/* on paper only the page's own content is printed */
@media print{
  .skip-link,.announce,.site-header,.menu-sheet,.site-footer{ display:none !important; }
}