/* ============================================================
   Wags n Tags — shared site shell
   Pair with tokens.css, which holds the palette and its rules.
   Used by index.html (landing) and my-tags.html (dashboard).
   login.html and signup.html stay self-contained and do not
   link this file, so they can ship as standalone handoff pages.
   ============================================================ */

*{box-sizing:border-box}
/* anything marked hidden stays hidden, even when a layout class sets display */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  font-size:var(--fs-s); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--green); outline-offset:3px; border-radius:6px}
/* Phosphor icons inlined as SVG: sized to the text they sit beside unless a component says otherwise */
.ic{width:1.2em; height:1.2em; flex:none}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 20px}
@media (min-width:900px){ .wrap{padding:0 clamp(40px,6vw,96px)} }
.wrap--narrow{max-width:860px}

/* centered section heading block: eyebrow, h2, lede */
/* Section heads sit on the left edge of the column. Centering every head was one of the template tells. */
.center{text-align:left; margin-left:0; margin-right:auto}
.center .lede{margin-left:0}

.band{padding:72px 0}
@media (min-width:900px){ .band{padding:112px 0} }

.band--dark{
  background:var(--green-deep);
  background-image:radial-gradient(120% 90% at 22% 12%, #1D4B40 0%, #173F35 44%, #0E2C25 100%);
  color:var(--on-green);
}
.band--dark h1,.band--dark h2,.band--dark h3{color:var(--cream)}
.band--sage{background:var(--sage)}

.eyebrow{
  /* sentence case serif italic, not tracked all caps */
  font-family:var(--serif); font-style:italic; font-size:var(--fs-s); font-weight:500; line-height:1.5;
  color:var(--amber-text); margin:0 0 10px;
}
.band--dark .eyebrow{color:var(--brass-lit)}
.h2{font-size:var(--fs-l)}
.lede{font-size:var(--fs-s); line-height:1.5; color:var(--muted); max-width:58ch}
.band--dark .lede{color:var(--on-green)}
@media (min-width:900px){ .lede{font-size:var(--fs-s)} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; border:0; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:var(--fs-s); font-weight:700; text-decoration:none;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, transform .06s;
}
/* spring easing (a damped spring sampled into CSS linear(), in the spirit of anime.js springs):
   used for small, physical feedback only. Reduced-motion users get none of it. */
:root{--spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.101, 1.083 30.2%, 1.02 36.5%, 1.003 39.3%, .993 42.2%, .99 45%, .996 55.4%, 1.001 66.6%, 1)}
.btn{transition:background .15s, border-color .15s, transform .5s var(--spring)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98); transition-duration:.08s}
.cartbtn b.bump{animation:bump .6s var(--spring)}
@keyframes bump{0%{transform:scale(.4)}100%{transform:scale(1)}}
.btn--amber{background:var(--amber); color:var(--ink)}
.btn--amber:hover{background:var(--amber-press)}
.btn--green{background:var(--green); color:var(--cream)}
.btn--green:hover{background:var(--green-deep)}
.btn--ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink); font-weight:600}
.btn--ghost:hover{background:var(--white); border-color:var(--line-hover)}
.band--dark .btn--ghost{border-color:rgba(247,243,234,.3); color:var(--cream)}
.band--dark .btn--ghost:hover{background:rgba(247,243,234,.08); border-color:rgba(247,243,234,.5)}
.btn--sm{min-height:44px; padding:0 20px; font-size:var(--fs-s)}

.link-quiet{
  display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-s); font-weight:600;
  color:var(--green); text-decoration:none; border-bottom:1.5px solid rgba(23,63,53,.25); padding-bottom:2px;
}
.link-quiet:hover{border-bottom-color:var(--green)}
.band--dark .link-quiet{color:var(--cream); border-bottom-color:rgba(247,243,234,.35)}
.band--dark .link-quiet:hover{border-bottom-color:var(--cream)}

/* ---------- top nav ----------
   Phone: logo, cart, menu button.
   Laptop: logo left, links in the true center, cart + CTA right. */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(247,243,234,.88);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
.nav.is-stuck{border-bottom-color:var(--line); background:rgba(247,243,234,.96)}
.nav__in{display:flex; align-items:center; gap:8px; height:64px}
@media (min-width:900px){ .nav__in{height:76px} }
.nav__brand{display:flex; align-items:center; gap:9px; margin-right:auto; text-decoration:none}
.nav__brand img{height:30px; width:auto}
.nav__brand .word{height:19px}
.nav__links{display:none}
.nav__end{display:flex; align-items:center; gap:6px}
.nav__cta{display:none}
@media (min-width:1060px){
  .nav__in{display:grid; grid-template-columns:1fr auto 1fr; gap:24px}
  .nav__brand{margin-right:0; justify-self:start}
  .nav__links{display:flex; align-items:center; gap:26px}
  .nav__links a{
    font-size:var(--fs-s); font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap;
    border-bottom:1.5px solid transparent; padding-bottom:3px;
  }
  .nav__links a:hover,.nav__links a[aria-current="page"]{border-bottom-color:var(--amber)}
  .nav__end{justify-self:end; gap:10px}
  .nav__cta{display:inline-flex}
}
.cartbtn{
  position:relative; min-width:46px; height:46px; padding:0 11px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:var(--green); text-decoration:none; font-size:var(--fs-s); font-weight:700; white-space:nowrap;
}
.cartbtn:hover,.cartbtn[aria-current="page"]{background:var(--sage)}
.cartbtn svg{width:25px; height:25px; flex:none}
.cartbtn__txt{display:none}
@media (min-width:1220px){ .cartbtn__txt{display:inline} .cartbtn b{position:static; box-shadow:none} }
.cartbtn b{
  position:absolute; top:4px; right:2px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:var(--amber); color:var(--ink); font-size:var(--fs-s); font-weight:700; line-height:20px; text-align:center;
  box-shadow:0 0 0 2px var(--cream);
}
.cartbtn b:empty{display:none}
.nav__burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; border:0; border-radius:12px; background:transparent; cursor:pointer;
}
@media (min-width:1060px){ .nav__burger{display:none} }
.nav__burger span{display:block; height:2px; border-radius:2px; background:var(--green); transition:transform .22s, opacity .18s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.sheet{
  position:fixed; inset:64px 0 0; z-index:55; background:var(--cream);
  padding:22px 20px 34px; display:flex; flex-direction:column; gap:4px;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  overflow-y:auto;
}
.sheet.is-open{opacity:1; transform:none; pointer-events:auto}
.sheet a{
  font-family:var(--serif); font-size:var(--fs-m); font-weight:600; color:var(--green);
  text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line);
}
.sheet .btn{margin-top:22px; width:100%}
@media (min-width:1060px){ .sheet{display:none} }

/* ---------- sticky mobile call to action ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,243,234,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .26s ease;
}
.dock.is-up{transform:none}
.dock .btn{width:100%}
@media (min-width:640px){ .dock{display:none} }

/* ---------- the finder phone mockup ----------
   Lifted from login.html so the landing page and the login
   screen show the identical product. cqh units keep every
   inner size tied to the mockup height, not the viewport.   */
.phone{
  aspect-ratio:1/2.03; container-type:size;
  background:#0A231D; border-radius:24px; padding:7px;
  box-shadow:0 30px 52px -22px rgba(0,0,0,.6), 0 0 0 1px rgba(14,44,37,.18);
}
.phone .screen{width:100%; height:100%; border-radius:18px; overflow:hidden; background:var(--white); display:flex; flex-direction:column}
.p-hero{height:38%; position:relative; background:var(--sage)}
.p-hero img{width:100%; height:100%; object-fit:cover}
.p-body{padding:2.1cqh 2.4cqh; display:flex; flex-direction:column; gap:1.5cqh; flex:1; min-height:0}
.p-body b{font-family:var(--serif); font-size:3.4cqh; font-weight:600; color:var(--green); line-height:1}
.p-body i{font-style:normal; font-size:2.2cqh; color:var(--muted); line-height:1.5}
.p-btn{border-radius:1.8cqh; padding:1.6cqh; text-align:center; font-size:2.33cqh; font-weight:700}
.p-btn.a{background:var(--amber); color:var(--ink)}
.p-btn.b{background:var(--sage); color:var(--green)}
.p-meta{display:flex; align-items:baseline; justify-content:space-between; gap:1.5cqh; border-top:1px solid var(--line); padding-top:1.3cqh; font-size:2.07cqh; color:var(--muted)}
.p-meta b{font-family:var(--sans); font-size:2.2cqh; font-weight:700; color:var(--ink)}
.p-note{font-size:2.07cqh; line-height:1.5; color:var(--muted); background:var(--sage); border-radius:1.5cqh; padding:1.6cqh 1.8cqh; margin-top:auto}

/* ============ shared sections: closing call to action, numbered steps, FAQ ============ */
/* the call to action that closes each section */
.act{margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:14px 26px}
.act .btn{min-width:200px}
@media (max-width:639px){ .act .btn{width:100%} }

/* ================= steps =================
   Rule-topped text columns with a big serif numeral, instead of numbered circles joined by a line. */
.steps__list{margin:40px 0 0; display:grid; counter-reset:step; border-top:1px solid var(--line)}
.step{position:relative; padding:22px 0 24px 58px; border-bottom:1px solid var(--line)}
.step::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:16px;
  font-family:var(--serif); font-size:var(--fs-l); font-weight:500; line-height:1; color:var(--amber-deep)}
.step h3{font-size:var(--fs-m); color:var(--green)}
.step p{margin-top:6px; color:var(--muted); max-width:40ch}
.band--dark .step h3{color:var(--cream)}
.band--dark .step p{color:var(--on-green)}
@media (min-width:900px){
  .steps__list{grid-template-columns:1.1fr 1fr 1fr; gap:40px; border-top:0; margin-top:56px}
  .step{padding:22px 0 0; border-bottom:0; border-top:2px solid var(--green)}
  .band--dark .step{border-top-color:var(--brass-lit)}
  .step::before{position:static; display:block; margin-bottom:18px; font-size:var(--fs-l)}
  .step h3{font-size:var(--fs-m)}
}

/* ================= faq =================
   Every answer visible: question on the left, answer on the right. No accordion. */
.faq__list{margin:40px 0 0; border-top:1px solid var(--line)}
.qa{display:grid; gap:8px; padding:22px 0; border-bottom:1px solid var(--line)}
.qa h3{font-size:var(--fs-m); line-height:1.5; color:var(--green)}
.qa p{color:var(--muted); max-width:62ch}
@media (min-width:900px){ .qa{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; padding:28px 0} .qa h3{font-size:var(--fs-m)} }

/* ---------- forms (tags page, cart) ---------- */
.field{margin-bottom:16px}
.field label,.field .lbl{display:block; font-size:var(--fs-s); font-weight:700; margin-bottom:7px}
.field .hint{font-weight:500; color:var(--muted)}
.input{
  width:100%; min-height:50px; border:1.5px solid var(--line); border-radius:var(--r-input); background:var(--white);
  padding:11px 14px; font-family:var(--sans); font-size:var(--fs-s); color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
textarea.input{min-height:92px; resize:vertical; line-height:1.5}
.input::placeholder{color:var(--placeholder)}
.input:focus-visible{outline:none; border-color:var(--green); box-shadow:var(--focus-glow)}
.input[aria-invalid="true"]{border-color:#B4453C}
.err{color:#A3372C; font-size:var(--fs-s); font-weight:600; margin-top:6px}
.err:empty{display:none}
.stepper{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--white)}
.stepper button{width:44px; height:44px; border:0; background:transparent; font-size:var(--fs-m); font-weight:600; color:var(--green); cursor:pointer; border-radius:50%}
.stepper button:hover{background:var(--sage)}
.stepper button:disabled{color:var(--line-hover); cursor:not-allowed; background:transparent}
.stepper output{min-width:34px; text-align:center; font-weight:700; font-size:var(--fs-s)}

/* ---------- footer ---------- */
.foot{
  background:var(--green-deep);
  background-image:radial-gradient(120% 120% at 12% 0%, #1D4B40 0%, #14382F 46%, #0B241E 100%);
  color:var(--on-green); padding:60px 0 32px;
}
.foot__top{display:grid; gap:38px}
@media (min-width:760px){ .foot__top{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px} }
.foot__brand img{height:84px; width:auto; margin-bottom:18px}
.foot__brand p{font-size:var(--fs-s); line-height:1.5; max-width:34ch; color:var(--on-green-dim)}
.foot h4{
  font-family:var(--sans); font-size:var(--fs-s); font-weight:700; letter-spacing:0;
  text-transform:uppercase; color:var(--brass-lit); margin:0 0 15px;
}
.foot li{margin-bottom:11px}
.foot a{color:var(--on-green); text-decoration:none; font-size:var(--fs-s); border-bottom:1px solid transparent; padding-bottom:2px}
.foot a:hover{border-bottom-color:var(--brass-lit); color:var(--cream)}
.foot__base{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(247,243,234,.14);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;
  font-size:var(--fs-s); color:var(--on-green-dim);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ================= tag stacks =================
   Real front designs on drawn tags, in place of "Photo coming" boxes until product photos arrive.
   Metal is brushed steel (a material, so a gradient is allowed); acrylic is cream with an amber edge. */
.stack{position:relative; width:100%; max-width:460px; aspect-ratio:1; margin:0 auto}
.tag{position:absolute; display:grid; place-items:center; aspect-ratio:1; border-radius:50%;
  box-shadow:0 26px 40px -22px rgba(8,28,23,.6)}
.tag img{width:56%; height:56%; object-fit:contain; margin-top:10%}
.tag::before{content:""; position:absolute; top:6%; left:50%; width:9%; aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; background:var(--green-deep); box-shadow:inset 0 2px 3px rgba(0,0,0,.45)}
.tag--metal{background:radial-gradient(circle at 34% 26%, #FBFCFB 0%, #E3E7E4 50%, #BFC6C1 100%);
  box-shadow:inset 0 0 0 3px #B3BBB5, inset 0 -6px 12px rgba(32,37,34,.14), 0 26px 40px -22px rgba(8,28,23,.6)}
.tag--acrylic{background:#FBF8F1;
  box-shadow:inset 0 0 0 5px rgba(217,154,61,.6), inset 0 0 0 10px rgba(255,255,255,.75), 0 26px 40px -22px rgba(8,28,23,.6)}
.tag:nth-child(1){width:60%; left:3%; top:14%; transform:rotate(-8deg); z-index:2}
.tag:nth-child(2){width:45%; right:3%; top:3%; transform:rotate(10deg); z-index:1}
.tag:nth-child(3){width:41%; right:9%; bottom:3%; transform:rotate(-4deg); z-index:3}


/* metal tag cutouts (Krishiv's real renders, 2026-10-05): the photo of the tag is the tag, no drawn disc */
.tag--metal{background:none !important; border-radius:50% !important; overflow:hidden; box-shadow:0 26px 40px -22px rgba(8,28,23,.6) !important}
.tag--metal::before{display:none}
.tag--metal img{width:100%; height:100%; margin:0; object-fit:cover; transform:scale(1.5); transform-origin:52% 56%}
/* cart and "added" thumbnails of metal tags are photos of the tag in a hand: crop to the tag */
.line__thumb img[src*="assets/metal/"], .rv img[src*="assets/metal/"], .added__item img[src*="assets/metal/"]{object-fit:cover; object-position:52% 56%; border-radius:10px; padding:0 !important; width:100% !important; height:100% !important}
.line__thumb:has(img[src*="assets/metal/"]){overflow:hidden}
.rv li img[src*="assets/metal/"]{width:44px !important; height:44px !important}
.added__item img[src*="assets/metal/"]{width:72px !important; height:72px !important}

/* ============================================================
   Brand spec layer (2026-10-02, BRAND-SPEC.md). Manrope only, forest green
   buttons with cream text, 12px buttons, 16px cards, brass for small accents.
   Sits last so it wins over the older rules above.
   ============================================================ */
h1,h2,h3{font-family:var(--sans); font-weight:800; letter-spacing:-.035em; line-height:1.04}
h3,h4{font-weight:700; letter-spacing:-.02em; line-height:1.2}
.eyebrow{font-family:var(--sans); font-style:normal; font-size:var(--fs-s); font-weight:600; letter-spacing:0; text-transform:uppercase; color:var(--muted); line-height:1.5}
.band--dark .eyebrow{color:var(--amber)}
.lede{color:var(--muted); font-weight:500}
.btn{border-radius:12px; font-weight:600; letter-spacing:-.005em}
.btn--amber{background:var(--green); color:var(--cream)}
.btn--amber:hover{background:#1F4D41}
.band--dark .btn--amber{background:var(--cream); color:var(--green)}
.band--dark .btn--amber:hover{background:var(--white)}
.btn--glass{background:rgba(23,63,53,.5); color:var(--cream); box-shadow:inset 0 0 0 1px rgba(247,243,234,.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.btn--glass:hover{background:rgba(23,63,53,.72)}
.btn--ghost{border-radius:12px; border-color:rgba(23,63,53,.22)}
.nav__links a{color:var(--muted); font-weight:500}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--green); border-bottom-color:var(--amber)}
.cartbtn b{color:var(--green)}
.sheet a{font-family:var(--sans); font-size:var(--fs-m); font-weight:600; letter-spacing:-.01em}
.foot{background:#0E211C; background-image:none}
input,select,textarea{border-color:rgba(23,63,53,.22)}
/* one nav on every page: same width, logo size and icon-only cart as the home page */
.nav__brand img{height:35px}
.nav__brand .word{height:25px}
.cartbtn__txt{display:none !important}
@media (min-width:1060px){ .nav .wrap{max-width:1360px; padding:0 40px} .nav__in{grid-template-columns:1fr auto 1fr; gap:34px} .nav__links{gap:34px} .nav__links a{font-size:var(--fs-s)} .cartbtn b{position:absolute} }
.nav__links a{padding-top:3px}
@media (max-width:759px){ .foot__top{grid-template-columns:1fr 1fr; gap:34px 20px} .foot__brand,.foot__top > div:last-child{grid-column:1/-1} }
h1,h2,h3{text-wrap:balance}

/* nav over a photo hero (product pages): dim glass that melts into the photo, cream once you scroll past it */
.nav__logo{display:flex; align-items:center; gap:9px}
.nav__logo--dark{display:none}
.nav--over{margin-bottom:-64px}
@media (min-width:900px){ .nav--over{margin-bottom:-76px} }
.nav--over:not(.is-solid){background:linear-gradient(180deg, rgba(14,33,28,.62) 0%, rgba(14,33,28,.34) 100%); border-bottom-color:rgba(247,243,234,.08); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1)}
.nav--over:not(.is-solid) .nav__logo--light{display:none}
.nav--over:not(.is-solid) .nav__logo--dark{display:flex}
.nav--over:not(.is-solid) .nav__links a{color:rgba(247,243,234,.84)}
.nav--over:not(.is-solid) .nav__links a:hover,.nav--over:not(.is-solid) .nav__links a[aria-current="page"]{color:var(--cream)}
.nav--over:not(.is-solid) .cartbtn{color:var(--cream)}
.nav--over:not(.is-solid) .cartbtn:hover{background:rgba(247,243,234,.12)}
.nav--over:not(.is-solid) .cartbtn b{box-shadow:none}
.nav--over:not(.is-solid) .nav__burger span{background:var(--cream)}
.nav--over:not(.is-solid) .nav__cta{box-shadow:inset 0 0 0 1px rgba(247,243,234,.22)}
.nav--over{transition:background .3s, border-color .3s}

/* Type system (his pick, 2026-10-02): Gambarino for headings, General Sans for everything else.
   Gambarino has one weight, so no faux bold, and ligatures are off so the i dot never fuses into the f. */
h1,h2,.ph__hi,.agit__turn{font-family:var(--display);font-weight:400 !important;letter-spacing:-.015em !important;font-synthesis:none;font-variant-ligatures:no-common-ligatures;font-feature-settings:"liga" 0,"clig" 0}
h3,h4{font-family:var(--sans)}
/* titles inside product pages use the display face too (his note, 2026-10-02: heavy sans titles read as the wrong font) */
.pstep h3,.step h3,.qa h3{font-family:var(--display);font-weight:400 !important;font-synthesis:none;font-variant-ligatures:no-common-ligatures;letter-spacing:-.01em !important;font-size:var(--fs-m);line-height:1.15}

/* Top bar (his call, 2026-11-04): Gambarino like everything else. General Sans is gone from the site. */
html body .nav__links a, html body .nav .nav__cta{font-size:var(--fs-s) !important}