/* ============================================================================
   Handled — shared page system
   Created 2026-09-14 at Ella's instruction: "Update the style of all of these
   pages to match the home page quality and aesthetic."

   Every value here is LIFTED VERBATIM from index.html, which is the reference.
   Nothing was invented, re-picked, or "improved" on the way across. If the home
   page changes, change it there first and copy it here, in that order.

   ⛔ This file carries NO COPY. It is tokens, type, and chrome only. LAW 2: the
   words on every page belong to Ella and none of them live in a stylesheet.
   ========================================================================= */

/* ── Tokens, from index.html's first :root ── */
:root{
  --bg-deep:#051A18; --bg:#07211E;
  --teal:#0E7C78; --teal-br:#19B6AC; --teal-deep:#0B5650;
  --mint:#8FE8DD; --cream:#F4ECDD; --coral:#E88A6E; --gold:#E2B65E;
  --glass-nav:rgba(5,22,20,.78);
  --glass-card:rgba(255,255,255,.05);
  --glass-card-hover:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.11);
  --glass-border-hover:rgba(143,232,221,.34);
  --glass-shadow:0 8px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
  --glass-shadow-hover:0 20px 56px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.18);
  --tile-glow:inset 0 0 20px rgba(143,232,221,.10);
  --ink:#F4ECDD; --body:rgba(244,236,221,.82); --muted:rgba(244,236,221,.72);
  --accent:#19B6AC; --accent-hover:#8FE8DD;
  --maxw:1080px; --font:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1); --radius:18px;
}

/* ── The teak-and-brass override, from index.html's second :root (2026-09-04).
      This is what makes the accent brass rather than teal. Keep both blocks in
      this order; the second deliberately re-points --accent/--mint/--gold. ── */
:root{
  --teak-base:#3d2420;
  --teak-hi:#b27a42; --teak-mid:#a86f3a; --teak-lo:#8a5a2e;
  --metal-hi:#e6cf9a; --metal:#b39475; --metal-mid:#8f6b44; --metal-lo:#5c4028;
  --brass-light:#e0dab8; --brass:#c2be8e; --brass-deep:#b6b67c;
  --ground:hsl(175 55% 7%);
  --ink:hsl(168 40% 94%);
  --accent:#c2be8e; --accent-hover:#e0dab8; --mint:#c2be8e; --gold:#c2be8e; --coral:#E88A6E;
  --plank:url(handled-sign-wood-strip-mirror.webp);
  /* Button: the sign's own plank in a brass rim, the same recipe and the same 384px
     scale this sheet already uses for header.site and footer.site, so a button reads as
     cut from the surrounding board. Ella, 2026-09-19, via the handled-wood-finish skill.
     Measured over all 975,360 pixels of the strip: the brightest pixel plus both lighting
     layers at peak leaves cream #f4ecdd at 7.20:1, so the face holds AAA everywhere. */
  --btn-rim:var(--metal-hi); --btn-rim-hover:#f2e0b4;
  --btn-ink:#f4ecdd; --btn-ink-hover:#ffffff;
  --btn-lift:linear-gradient(0deg,rgba(255,240,230,.07),rgba(255,240,230,.07));
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg-deep);
  line-height:1.65;font-size:18px;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.16;margin:0 0 .5em}
h3,h4{font-weight:600;letter-spacing:-.006em}
h1{font-size:clamp(2.2rem,5.4vw,3.2rem);letter-spacing:-.035em;line-height:1.06}
h2{font-size:clamp(1.35rem,3vw,1.75rem);letter-spacing:-.028em;margin:2rem 0 .6rem}
p{margin:0 0 1rem}
a{color:var(--accent);text-underline-offset:.2em;transition:color .2s}
a:hover{color:var(--accent-hover)}
strong{font-weight:700;color:var(--ink)}
img{max-width:100%}
ul,ol{margin:.4rem 0 1.1rem;padding-left:1.35rem}
li{margin:.35rem 0}
.skip{position:absolute;left:-9999px;top:auto;background:#0B5B59;color:#fff;padding:.6rem 1rem;z-index:9999;border-radius:8px}

/* 1.4.8 (AAA): a line of running text may be no wider than 80 characters.
   34em, deliberately, and NOT a pixel value and NOT `ch`.
   - em scales with each element's OWN font size, so one rule serves 12.8px
     fine print and 18px body copy alike. A single pixel cap could not: the
     tightest element on the site needed 466px while the widest needed 647px.
   - `ch` is the width of the digit "0", 12.41px in Plus Jakarta Sans, while
     the average glyph is about 0.45em. A `ch` cap therefore renders roughly
     35% wider than it reads. terms.html carried max-width:68ch for exactly
     that reason and it never bound; it rendered about 106 characters.
   Measured ratio on this site: 0.451em to 0.466em per character, so 34em
   lands between 73 and 75 characters everywhere.
   It only binds on text that is already too wide. Card and column text sits
   well under 34em and is untouched. */
main p, main li, main dd{max-width:34em}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--accent-hover);outline-offset:3px;border-radius:6px}

/* ── Layout ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;position:relative;z-index:2}
.page{max-width:820px;margin:0 auto;padding:2.6rem 1.5rem 4rem;position:relative;z-index:2}

/* ── Ambient background, from index.html ── */
.bg-canvas{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.blob-1{width:700px;height:700px;top:-180px;left:-160px;background:radial-gradient(circle,rgba(14,124,120,.62) 0%,transparent 70%);animation:blob-drift 26s ease-in-out infinite}
.blob-2{width:520px;height:520px;top:28%;right:-80px;background:radial-gradient(circle,rgba(25,182,172,.38) 0%,transparent 70%);animation:blob-drift 20s ease-in-out infinite reverse;animation-delay:-7s}
.blob-3{width:620px;height:620px;bottom:-120px;left:22%;background:radial-gradient(circle,rgba(232,138,110,.20) 0%,transparent 70%);animation:blob-drift 32s ease-in-out infinite;animation-delay:-14s}
@keyframes blob-drift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(38px,-55px) scale(1.06)}50%{transform:translate(18px,42px) scale(.94)}75%{transform:translate(-32px,-18px) scale(1.03)}}

/* ── Header: the teak plank, the signwood icon, the nameboard wordmark and the
      brass rule, all lifted from index.html so every page wears the same sign. ── */
header.site{position:sticky;top:0;z-index:50;border-bottom:0;
  background-color:var(--teak-base);background-image:
    linear-gradient(180deg,rgba(255,240,230,.06) 0%,rgba(255,240,230,.02) 12%,rgba(255,255,255,0) 40%,rgba(20,8,6,.05) 86%,rgba(20,8,6,.08) 100%),
    linear-gradient(105deg,rgba(255,240,230,0) 28%,rgba(255,240,230,.03) 45%,rgba(255,240,230,0) 63%),
    var(--plank);
  background-size:100% 100%,100% 100%,384px auto;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 30px rgba(0,0,0,.45)}
header.site::after{content:"";position:absolute;left:0;right:0;top:100%;height:3px;pointer-events:none;opacity:1;
  background:linear-gradient(90deg,var(--metal-lo),var(--metal-hi) 30%,var(--metal) 50%,var(--metal-hi) 70%,var(--metal-lo))}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.5rem;max-width:var(--maxw);margin:0 auto}
/* The page's own back link, exactly the words it had before the 2026-09-14 restyle.
   It sits at the top of the content column rather than in the bar, so the header stays
   structurally identical to index.html's and the nav keeps its own row. */
.backlink{color:var(--accent);text-decoration:none;font-size:.92rem;font-weight:600;
  min-height:44px;display:flex;width:fit-content;align-items:center;white-space:nowrap;transition:color .2s;
  margin:0 0 .3rem}
.backlink:hover{color:var(--accent-hover)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;min-height:44px}
.brand .appicon{display:block;width:60px;height:60px;flex:0 0 auto;border-radius:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.brand .bt-board{display:block;height:54px;width:auto;flex:0 0 auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
@media (max-width:480px){.brand .appicon{width:48px;height:48px}.brand .bt-board{height:42px}}
.navtoggle{display:none;background:rgba(255,255,255,.09);color:var(--ink);border:1px solid var(--glass-border);
  border-radius:999px;padding:.5rem .9rem;font-size:.9rem;font-family:var(--font);font-weight:600;cursor:pointer;min-height:44px}
nav.primary ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;align-items:center}
nav.primary li{margin:0}
nav.primary a{color:rgba(244,236,221,.92);text-decoration:none;font-size:.92rem;font-weight:600;transition:color .2s;position:relative}
nav.primary a.btn{font-size:.9375rem}  /* the header Sign up is a BUTTON: nav.primary a was shrinking it to .92rem */
nav.primary a:not(.btn)::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1.5px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease)}
nav.primary a:not(.btn):hover{color:var(--brass-light)}
nav.primary a:not(.btn):hover::after{transform:scaleX(1)}
@media (max-width:860px){
  nav.primary{display:none;width:100%}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column;gap:.2rem;padding:.5rem 0 0;align-items:stretch}
  nav.primary li{border-top:1px solid rgba(255,255,255,.10)}
  nav.primary a:not(.btn){display:block;padding:.7rem 0}
  nav.primary li:last-child{padding-top:.6rem}
  .bar{flex-wrap:wrap}
  .navtoggle{display:inline-block}
}

/* ── Glass card, from index.html ── */
.card{background:var(--glass-card);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(143,232,221,.16);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--glass-shadow),var(--tile-glow)}

.card + .card{margin-top:1.1rem}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}

/* Effective date / subtitle line under an h1 */
.eff{color:var(--muted);font-size:.92rem;margin:.1rem 0 1.6rem;letter-spacing:.01em}
/* Small italic note at the foot of a document */
.note{color:var(--muted);font-size:.86rem;font-style:italic;margin-top:1.5rem;line-height:1.6}

/* ── Pill kicker, from index.html's .kicker treatment ── */
.pill{display:inline-block;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700;
  color:var(--accent);background:rgba(194,190,142,.10);border:1px solid rgba(194,190,142,.28);
  border-radius:999px;padding:.34rem .8rem;margin-bottom:.9rem}
.lead{font-size:1.1rem;color:var(--body);line-height:1.66;max-width:34em}

/* ── Buttons, from index.html ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.48rem;font-family:var(--font);font-weight:600;
  font-size:.9375rem;letter-spacing:-.01em;background-color:var(--teak-base);background-image:linear-gradient(180deg,rgba(255,240,230,.06) 0%,rgba(255,240,230,.02) 12%,rgba(255,255,255,0) 40%,rgba(20,8,6,.05) 86%,rgba(20,8,6,.08) 100%),linear-gradient(105deg,rgba(255,240,230,0) 28%,rgba(255,240,230,.03) 45%,rgba(255,240,230,0) 63%),var(--plank);background-size:100% 100%,100% 100%,384px auto;background-repeat:no-repeat,no-repeat,repeat;background-position:center;
  color:var(--btn-ink);text-shadow:0 1px 2px rgba(0,0,0,.6);text-decoration:none;padding:.75rem 1.5rem;min-height:44px;border-radius:999px;border:2px solid var(--btn-rim);
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  box-shadow:0 9px 20px rgba(0,0,0,.48),inset 0 1px 0 rgba(233,205,150,.26),inset 0 -7px 13px rgba(0,0,0,.4)}
.btn:hover,.btn:focus{color:var(--btn-ink-hover);border-color:var(--btn-rim-hover);transform:translateY(-3px) scale(1.02);
  background-color:var(--teak-base);background-image:var(--btn-lift),linear-gradient(180deg,rgba(255,240,230,.06) 0%,rgba(255,240,230,.02) 12%,rgba(255,255,255,0) 40%,rgba(20,8,6,.05) 86%,rgba(20,8,6,.08) 100%),linear-gradient(105deg,rgba(255,240,230,0) 28%,rgba(255,240,230,.03) 45%,rgba(255,240,230,0) 63%),var(--plank);background-size:100% 100%,100% 100%,100% 100%,384px auto;background-repeat:no-repeat,no-repeat,no-repeat,repeat;background-position:center;
  box-shadow:0 14px 26px rgba(0,0,0,.52),inset 0 1px 0 rgba(233,205,150,.34),inset 0 -7px 13px rgba(0,0,0,.42)}
.btn:active{transform:translateY(0) scale(.97)}

/* ── Form controls, matching index.html's .ea-form input treatment ── */
label{display:block;font-weight:600;color:var(--ink);font-size:.95rem;margin:1.1rem 0 .35rem}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;min-height:48px;padding:.7rem 1rem;border-radius:14px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.5}
textarea{min-height:150px;resize:vertical;padding-top:.8rem}
select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.45em),calc(100% - 14px) calc(1.45em);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
select option{background:#07211E;color:var(--ink)}
input::placeholder,textarea::placeholder{color:rgba(244,236,221,.52)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(194,190,142,.4)}
form .btn{margin-top:1.3rem}
.status{margin-top:.9rem;font-weight:600}
.status.ok{color:var(--accent-hover)}
.status.err{color:var(--coral)}

/* ── Footer, from index.html, including the teak plank and the brass rule ── */
footer.site{position:relative;background-color:var(--teak-base);background-image:
    linear-gradient(180deg,rgba(255,240,230,.06) 0%,rgba(255,240,230,.02) 12%,rgba(255,255,255,0) 40%,rgba(20,8,6,.05) 86%,rgba(20,8,6,.08) 100%),
    linear-gradient(105deg,rgba(255,240,230,0) 28%,rgba(255,240,230,.03) 45%,rgba(255,240,230,0) 63%),
    var(--plank);
  background-size:100% 100%,100% 100%,384px auto;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0;
  color:rgba(244,236,221,.86);font-size:.85rem;padding:1.9rem 0 2.4rem;border-top:0;z-index:2}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--metal-lo),var(--metal-hi) 30%,var(--metal) 50%,var(--metal-hi) 70%,var(--metal-lo))}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;align-items:center}
footer.site a{color:rgba(244,236,221,.86);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;
  text-decoration-color:rgba(244,236,221,.42);padding:.25rem 0;display:inline-block}
footer.site a:hover{color:#fff;text-decoration-color:rgba(244,236,221,.9)}
footer.site .protect{flex-basis:100%;width:100%;margin-top:.9rem;font-size:.78rem;line-height:1.55;color:rgba(244,236,221,.82)}
footer.site .protect strong{color:rgba(244,236,221,.92);font-weight:600}
footer.site .legal{flex-basis:100%;width:100%;margin-top:.7rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;line-height:1.62;color:rgba(244,236,221,.82)}
footer.site .legal strong{color:rgba(244,236,221,.92);font-weight:600}

/* ── Responsive ── */
@media (max-width:860px){
  body{font-size:17px}
  .page{padding:2rem 1.2rem 3rem}
}