/* ===========================================================================
   South Pier Co. / Veterans Collection
   Scoped visual system for veterans.html ONLY.

   This file is deliberately STANDALONE. veterans.html does not link
   styles.css at all, so nothing here can reach index.html, school.html or
   personal.html, and nothing there can reach this page. That is the point:
   the collection needs its own palette, its own typefaces and its own
   navigation treatment, and styles.css claims bare h1/h2/h3/p/a/section/
   footer with no page scope. Sharing the file would have meant fighting it
   on every rule. The cost is re-declaring the focus ring, the reduced-motion
   block and the form component here, which is about forty lines.

   Colours are measured, not eyeballed. See work/veterans-988/ASSETS.json for
   the contrast table and the compositing tests behind the two rules that
   matter most:
     1. The tag's own olive sits very close to OD green #414A33, so the hero
        ground is the DEEP olive. On #414A33 the product nearly disappears.
     2. The lifestyle photographs fade out through a bright warm edge. Over a
        dark ground they read as a glowing oval halo. They must sit on the
        near-white paper tone, measured at #FBF8F1; the warmer #EEE7D9 still
        showed a faint ring.
   =========================================================================== */

:root{
  /* field palette */
  --od:#414A33;          /* primary OD green: rules and fills, not a text ground */
  --deep:#20271D;        /* deep olive shadow: the hero and the dark bands */
  --deeper:#161B13;      /* deepest: gradient falloff, masthead, footer */
  --tan:#C6AF86;         /* warm field tan: display type on dark, accents */
  --tan-hi:#DCCBAB;      /* lighter tan: body copy on dark (5.85 on od, 9.62 on deep) */
  --canvas:#EEE7D9;      /* light canvas: reading sections */
  --paper:#FBF8F1;       /* photo stage. measured. do not darken this one */
  --red:#762D2C;         /* deep red. used sparingly on purpose */
  --red-hi:#8E3736;
  --ink:#20231E;         /* dark text */
  --ink-2:#4B5145;       /* muted text on light */

  --maxw:1180px;
  --gutter:20px;
  --display:Oswald,"Arial Narrow",Haettenschweiler,Impact,sans-serif;
  --body:Barlow,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (min-width:700px){:root{--gutter:32px}}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:.005em;
  line-height:.94;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* One focus ring for the page. Red on light grounds, tan on dark ones, both
   clear of the 3:1 non-text contrast floor. */
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.vet-hero :focus-visible,.vet-band :focus-visible,.vet-top :focus-visible,footer :focus-visible{outline-color:var(--tan)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--red);color:#fff;
  padding:12px 18px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0}

/* --- small utility type ------------------------------------------------- */
.eyebrow{
  display:block;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);
}
.vet-hero .eyebrow,.vet-band .eyebrow{color:var(--tan)}
.lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;color:var(--ink-2);max-width:62ch}
h1 + .lede,h2 + .lede,h3 + .lede{margin-top:clamp(16px,1.7vw,24px)}
.vet-band .lede{color:var(--tan-hi)}

/* A hairline stencil rule. Separates. Never decorates for its own sake. */
/* the eyebrow carries the accent in its own colour now, with no bar */
.eyebrow.key{color:var(--red)}

.vet-band .eyebrow.key,.vet-hero .eyebrow.key{color:var(--tan)}

/* ===========================================================================
   NAVIGATION

   Same layout as the other three pages: centred mark, a meta line, centred
   links with underlines. The colours are this collection's. Kept a touch more
   compact than the originals so the hero's primary action and the crisis line
   still land above the fold on a laptop.
   =========================================================================== */
.vet-top{background:#242C20;color:var(--canvas);padding-block:clamp(22px,2.6vw,30px) 0}
.vet-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(13px,1.7vw,20px)}
/* The wordmark is navy and red on transparent. Against this page's field the
   navy half simply disappears, so it sits on a warm plate. The artwork itself
   is untouched. */
.vet-logo{display:inline-flex;background:var(--paper);border-radius:6px;padding:12px 18px}
.vet-logo img{width:min(300px,64vw);height:auto;display:block}
.topmeta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);line-height:1.9;margin:0;
}
.vet-nav{display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.3vw,18px);flex-wrap:wrap;margin-top:2px}
.vet-nav a{
  font-family:var(--display);font-size:clamp(13px,1.15vw,15px);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--tan-hi);border-bottom:2.5px solid rgba(198,175,134,.28);padding:9px 5px 6px;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.vet-nav a:hover{color:var(--canvas);border-bottom-color:var(--tan)}
.vet-nav .sep{color:rgba(198,175,134,.4);font-size:13px;padding-inline:1px}
.vet-nav a[aria-current="page"]{color:var(--canvas);border-bottom-color:var(--tan)}
.vet-nav a.help{color:#fff;background:var(--red);border-bottom-color:var(--red);border-radius:3px;padding-inline:13px}
.vet-nav a.help:hover{background:var(--red-hi);border-bottom-color:var(--red-hi);color:#fff}
@media (max-width:760px){
  /* The product-line links are the reason this bar exists, so they wrap rather
     than hide. The separators go, because they read as noise once it wraps. */
  .vet-nav .sep{display:none}
  .vet-nav{gap:4px 8px}
  .vet-nav a{font-size:13px;padding:7px 4px 5px}
  .vet-top{padding-block:22px 0}
  .vet-head{gap:14px}
  .vet-logo img{width:min(250px,62vw)}
}

/* ===========================================================================
   THE BANNER

   The site's single availability disclosure, and on this page it is a physical
   thing: a strip of canvas webbing run across the tag field and stitched down.
   Woven texture is two crossed hairline gradients plus a fine warp, all at low
   alpha, so it reads as cloth at arm's length and vanishes under the words.
   The stitch is a dashed rule inset from each edge, and the shadow underneath
   is what makes it sit ON the page rather than in it.
   No image is used; this is the only place the page carries a texture that is
   meant to be noticed.
   =========================================================================== */
.notice{
  position:relative;
  background:var(--tan);
  color:#3B3524;
  font-size:14.5px;
  box-shadow:0 6px 16px rgba(10,13,8,.42), 0 1px 0 rgba(255,255,255,.18) inset;
}
/* the weave */
.notice::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(90,72,42,.16) 0 1px,rgba(0,0,0,0) 1px 4px),
    repeating-linear-gradient(0deg,rgba(90,72,42,.13) 0 1px,rgba(0,0,0,0) 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,rgba(0,0,0,0) 1px 9px);
}
/* the stitching, top and bottom */
.notice::after{
  content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;pointer-events:none;
  border-top:2px dashed rgba(94,34,33,.42);
  border-bottom:2px dashed rgba(94,34,33,.42);
}
.notice p{position:relative;z-index:1;padding-block:15px}
.notice strong{color:var(--ink);font-weight:600}
.notice a{color:#5E2221;text-underline-offset:3px;font-weight:500}
.notice a:hover{color:var(--ink)}

/* ===========================================================================
   SECTION GROUNDS

   No section meets another at a hard edge, and there is not a single rule
   across the page. The other South Pier pages are built on chevron dividers
   and flat slabs of colour; this one is one continuous field that changes
   temperature as you go down it.

   Each zone carries --melt-from, the colour of the zone above it, and paints
   a tall gradient from that colour down into its own. At the seam the two are
   the same colour, so there is nothing to see. It is positional rather than
   absolute, so it survives any amount of reflow.
   =========================================================================== */
section{padding-block:clamp(58px,8vw,108px);position:relative}
/* The fade is deliberately SHORTER than the zone's own top padding, so every
   heading and every line of copy sits on the finished colour. A longer, more
   luxurious melt looked better empty and put tan text over a half-washed
   ground, which is a contrast problem, not a style. */
.melt{padding-top:clamp(84px,11vw,160px)}
.melt::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(60px,8vw,120px);
  background:linear-gradient(to bottom,var(--melt-from) 0%,transparent 88%);
}
section > .wrap{position:relative;z-index:1}
.vet-band{background:var(--deep);color:var(--canvas)}
.vet-band h2,.vet-band h3{color:var(--canvas)}
.on-canvas{background:var(--canvas)}
.on-paper{background:var(--paper)}

/* ===========================================================================
   HERO
   =========================================================================== */
.vet-hero{
  position:relative;overflow:hidden;
  background:var(--deep);color:var(--canvas);
  padding-block:clamp(30px,3.6vw,54px);
}
/* Directional light: a warm pool from the upper right falling off into the
   deepest olive at the lower left. This is what gives the tag something to sit
   in instead of floating on a flat rectangle. */
.vet-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 92% at 74% 14%, rgba(198,175,134,.26) 0%, rgba(198,175,134,.09) 34%, rgba(32,39,29,0) 64%),
    radial-gradient(90% 80% at 12% 96%, rgba(22,27,19,.72) 0%, rgba(22,27,19,0) 62%),
    linear-gradient(168deg,#242C20 0%,#20271D 46%,#1A2017 100%);
}
/* Canvas weave: two crossed hairline gradients at very low alpha. It reads as
   material at arm's length and disappears under text, which is the test that
   matters. */
.vet-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,rgba(0,0,0,0) 1px 3px);
}
.vet-herogrid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-areas:"hd stage" "bd stage";
  grid-template-rows:auto 1fr;
  column-gap:clamp(24px,3.4vw,56px);align-items:start;
}
.vet-hd{grid-area:hd;min-width:0}
.vet-bd{grid-area:bd;min-width:0}
.vet-stage{grid-area:stage;align-self:center}
.vet-hero h1{
  font-size:clamp(50px,6.4vw,94px);
  line-height:.88;letter-spacing:-.005em;
  color:var(--canvas);margin-top:16px;
}
.vet-hero h1 .hl{color:var(--tan);display:block}
.vet-hero .lede{margin-top:17px;color:var(--tan-hi);max-width:46ch;font-size:clamp(16.5px,1.45vw,18.5px)}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.055em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;border-radius:3px;border:2px solid transparent;
  background:var(--red);color:#fff;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--red-hi)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tan);padding-inline:4px;
  text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:rgba(198,175,134,.4)}
.btn.ghost:hover{color:var(--canvas);text-decoration-color:var(--tan)}

/* The support route in the hero. Separated from the two commercial buttons by
   a rule and a different shape, so getting help is never something you have to
   find among the ways to buy. */
.vet-help{margin-top:26px;max-width:48ch}
.vet-help a{
  display:inline-block;
  font-family:var(--display);font-size:clamp(18px,1.9vw,22px);font-weight:600;letter-spacing:.03em;
  color:var(--canvas);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:3px;
}
.vet-help a:hover{border-bottom-color:var(--tan);color:#fff}
.vet-help p{margin-top:10px;font-size:14px;color:var(--tan-hi);opacity:.92;line-height:1.58}
.vet-help p b{color:var(--canvas);opacity:1}

/* --- the tag stage ------------------------------------------------------ */
.vet-stage{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:clamp(320px,46vw,540px)}
/* Light pool behind the product. This is the controlled overlap: the pool runs
   under the edge of the text column, the lettering never does. */
.vet-stage::before{
  content:"";position:absolute;z-index:0;
  width:min(100%,clamp(240px,42vw,520px));aspect-ratio:1/1.05;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(217,197,160,.30),rgba(217,197,160,.10) 46%,rgba(217,197,160,0) 72%);
}
.vet-stage img{
  position:relative;z-index:1;
  width:auto;height:clamp(300px,42vw,480px);
  filter:drop-shadow(-12px 26px 30px rgba(10,13,8,.62)) drop-shadow(0 2px 3px rgba(10,13,8,.5));
}
/* Equipment label. Small, mono, a functional detail rather than a sticker.
   Every line on it is a fact already stated elsewhere on the site. */
.vet-plate{
  position:absolute;z-index:2;left:0;bottom:6px;
  font-family:var(--mono);font-size:10.5px;line-height:1.85;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tan);opacity:.82;
}

/* Mobile gets its own composition, not a squeezed desktop: label, headline,
   then the product big and centred, then the copy, actions and support. */
@media (max-width:980px){
  .vet-herogrid{grid-template-columns:1fr;grid-template-areas:"hd" "stage" "bd";grid-template-rows:auto auto auto}
  .vet-hero h1{font-size:clamp(46px,12.5vw,76px)}
  .vet-hero .lede,.vet-help{max-width:none}
  .vet-stage{min-height:0;margin-top:30px;margin-bottom:6px}
  .vet-stage img{height:min(62vw,400px)}
  .vet-plate{position:static;margin-top:22px}
}

/* ===========================================================================
   PRODUCT
   =========================================================================== */
.vet-prod{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,66px);align-items:center}
/* Three fronts side by side. They are siblings, so they get equal columns
   and sit on a shared baseline rather than being centred independently. */
.vet-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);align-items:end}
.vet-face{width:100%;margin:0;text-align:center}
.vet-face .frame{display:flex;align-items:flex-end;justify-content:center}
.vet-face img{width:100%;height:auto}

.vet-face figcaption{
  margin-top:11px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.vet-prod h2{font-size:clamp(34px,4.6vw,58px);margin-top:14px}
.vet-prod .lede{margin-top:20px}
/* Matches the price line on the other two product pages: stated, not announced.
   This used to set the figure at 54px, which on a page selling a $12 object read
   as the loudest possible way to say a small number. */
.askbox{margin-top:34px}
.askbox .price{font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);line-height:1.6;max-width:56ch}
.askbox .price b{color:var(--ink);font-weight:700}
.askbox p{font-size:16px;color:var(--ink-2);line-height:1.62;margin-top:14px;max-width:56ch}
.speclist{margin-top:30px;padding:0;list-style:none;display:grid;gap:17px}
.speclist li{font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:56ch}
.speclist li b{color:var(--ink);font-weight:600}
@media (max-width:900px){.vet-prod{grid-template-columns:1fr}}

/* ===========================================================================
   THE BACK
   =========================================================================== */
.vet-backgrid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(26px,4.5vw,58px);align-items:center}
.vet-backgrid h2{font-size:clamp(32px,4.4vw,56px);margin-top:14px}
.vet-backshot{position:relative;margin:0}
.vet-backshot::before{
  content:"";position:absolute;inset:-8% 0;
  background:radial-gradient(closest-side,rgba(217,197,160,.24),rgba(217,197,160,0) 76%);
}
.vet-backshot img{position:relative;width:100%;filter:drop-shadow(-8px 18px 26px rgba(10,13,8,.55))}
.tapquote{margin-top:30px;color:var(--tan);font-size:clamp(18px,2vw,23px);line-height:1.48;max-width:44ch;font-weight:500}
.tapquote .cap{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);margin-bottom:9px;
}
.tapquote q{font-style:normal}
.notclaim{
  margin-top:26px;font-size:15.5px;line-height:1.64;color:var(--tan-hi);opacity:.9;max-width:54ch;
}
.notclaim b{color:var(--canvas)}
@media (max-width:860px){.vet-backgrid{grid-template-columns:1fr}}

/* ===========================================================================
   HOW THE TAP WORKS
   =========================================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(20px,3vw,36px);margin-top:40px}
.step{padding-top:2px}
.step .n{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--red);margin-bottom:10px}
.step h3{font-size:25px;margin-bottom:9px}
.step p{font-size:16px;color:var(--ink-2)}
.tapfig{margin:42px 0 0}
.tapfig img{width:100%;border-radius:4px}
.tapfig figcaption{margin-top:14px;font-size:14.5px;color:var(--ink-2);max-width:76ch;line-height:1.6}

/* ===========================================================================
   EVERYDAY CARRY
   =========================================================================== */
.carry{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.6vw,32px);margin-top:42px}
.carry figure{margin:0}
.carry img{width:100%}
.carry figcaption{margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.55}
.carry b{color:var(--ink);font-weight:600;display:block;font-family:var(--display);font-size:20px;letter-spacing:.01em;margin-bottom:4px}

/* ===========================================================================
   SUPPORT PANEL. Its own ground on purpose: it steps out of the field palette
   so it does not read as another piece of the sales pitch. No purchase action
   is allowed in this section.
   =========================================================================== */
.vet-support{background:var(--tan)}
.vet-support h2{font-size:clamp(32px,4.4vw,54px);margin-top:14px;color:var(--ink)}
.vet-support .eyebrow{color:#5E2221}
.vet-support .lede{color:#3B3524;max-width:66ch}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,3.6vw,48px);margin-top:38px}
.way{
  display:flex;flex-direction:column;gap:8px;
  text-decoration:none;color:var(--ink);transition:color .15s ease;
}
.way:hover .big{color:#5E2221}
.way .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#5E2221}
.way .big{font-family:var(--display);font-size:clamp(24px,2.6vw,31px);font-weight:600;line-height:1.04;letter-spacing:.01em}
.way .sub{font-size:15px;color:#3B3524;line-height:1.56}
.supportnote{margin-top:24px;font-size:15px;color:#3B3524;max-width:76ch;line-height:1.66}
.supportnote + .supportnote{margin-top:12px}

/* ===========================================================================
   FAQ
   =========================================================================== */
.faq{margin-top:34px}
.faq summary:hover{color:var(--red)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 46px 17px 0;position:relative;transition:color .15s ease;
  font-family:var(--display);font-size:clamp(20px,2.1vw,25px);font-weight:600;letter-spacing:.012em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 24px;font-size:16.5px;color:var(--ink-2);max-width:76ch;line-height:1.66}
.faq .a p + p{margin-top:12px}

/* ===========================================================================
   CLOSE + FORM
   =========================================================================== */
.vet-close{text-align:center}
.vet-close h2{font-size:clamp(36px,5.4vw,70px);margin-top:14px;color:var(--canvas)}
.vet-close .lede{margin:18px auto 0;text-align:center}

.closeshot{margin:34px auto 0;max-width:186px;position:relative}
.closeshot::before{
  content:"";position:absolute;inset:-12% -20%;
  background:radial-gradient(closest-side,rgba(217,197,160,.24),rgba(217,197,160,0) 72%);
}
.closeshot img{position:relative;width:100%;filter:drop-shadow(-10px 22px 28px rgba(10,13,8,.6))}

.contactcard{max-width:720px;margin:40px auto 0;text-align:left;position:relative}
.quoteform{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field-wide{grid-column:1/-1}
.quoteform label{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--tan)}
.quoteform input,.quoteform textarea{
  font-family:var(--body);font-size:16px;color:var(--canvas);
  background:rgba(0,0,0,.26);border:0;border-radius:4px;
  padding:13px 14px;width:100%;
}
.quoteform textarea{resize:vertical;min-height:118px}
.quoteform input:focus-visible,.quoteform textarea:focus-visible{outline:3px solid var(--tan);outline-offset:1px;border-color:var(--tan)}
.formactions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:4px}
.formfoot{font-size:14px;color:var(--tan-hi);line-height:1.62}
.formfoot a{color:var(--tan)}
.formnote{margin-bottom:18px;font-size:16.5px;color:var(--tan);font-weight:500}
.formnote.bad{color:#E9A3A1}
.nothanks{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:620px){.quoteform{grid-template-columns:1fr}}

/* ===========================================================================
   FOOTER
   =========================================================================== */
footer{background:linear-gradient(to bottom,var(--deep),var(--deeper) 58%);color:rgba(238,231,217,.7);padding-block:10px 46px;font-size:13.5px}
.footrow{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;line-height:1.75}
footer a{color:var(--tan)}
.footfine{margin-top:20px;font-size:11.5px;line-height:1.75;opacity:.72;max-width:92ch}

/* ===========================================================================
   THE MESSAGE THE TAP OPENS.
   Set as real text, not a screenshot. The site's two shared NFC photographs
   both show the GUARDIAN wording on a navy tag, which is the wrong category
   and the wrong product for this page. Typesetting it here guarantees the
   standard emergency-contact wording is exact, keeps it selectable and
   readable by a screen reader, and survives a copy change without a re-render.
   The Send pill is illustration. It is a <p>, not a control, so it is not
   focusable and cannot be clicked to nowhere.
   =========================================================================== */
.msgdemo{margin:44px 0 0;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(20px,3vw,38px);align-items:center}
.msgscreen{padding:0}
.msgto{
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--ink);
  padding-bottom:4px;
}
.msgbody{
  margin-top:14px;font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink);font-weight:500;
}
.msgsend{
  margin-top:18px;color:var(--red);
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.11em;text-transform:uppercase;
}
.msgdemo figcaption{font-size:14.5px;color:var(--ink-2);line-height:1.62;max-width:52ch}
@media (max-width:760px){.msgdemo{grid-template-columns:1fr}.msgscreen{max-width:340px}}