/* ============================================================
   SOURCE DRAGON — tokens
   ============================================================ */
:root{
  /* Ground shifted from neutral to blue-black so the slate logo belongs here. */
  --void:      #0A0D12;   /* page ground                        */
  --ash:       #111721;   /* raised surface                     */
  --ash-2:     #1A222E;   /* raised surface, one step up        */
  --bone:      #E8E4DC;   /* primary text                       */
  --smoke:     #8892A0;   /* secondary text                     */

  /* Two brand colours. Ember leads; slate is the logo's own blue. */
  --ember:     #FF6B35;   /* accent: actions, live markers      */
  --slate:     #304457;   /* logo blue, as drawn                */
  --slate-mid: #4E6C8B;   /* structural blue                    */
  --slate-up:  #93A9C1;   /* blue that reads as text on dark    */

  /* Depictive only — these live inside mockups, never in brand chrome. */
  --gilt:      #C9A227;   /* Artive frame moulding         */
  --bubble:    #30D158;   /* Bro outgoing message (its own green) */
  --bubble-ink:#08240F;   /* text on that green                   */

  --hairline:  rgba(147,169,193,.16);
  --hairline-2:rgba(147,169,193,.09);

  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 1140px;
  --measure: 56ch;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--mono);
  font-weight:300;
  font-size:.9375rem;      /* 15px */
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--ember); color:var(--void); }

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:1px;
}

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ember); color:var(--void);
  padding:.6rem 1rem; z-index:99;
}
.skip:focus{ left:0; }

/* ============================================================
   Top bar
   ============================================================ */
.bar{
  border-bottom:1px solid var(--hairline-2);
  position:relative;
  z-index:5;
}
.bar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem;
  flex-wrap:wrap;
  padding-block:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
}
.brand__mark{
  width:30px; height:30px;
  display:block;
  flex:0 0 auto;
}
.wordmark{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:.045em;
  color:var(--bone);
  line-height:1;
}
.brand:hover .wordmark{ color:var(--ember); }

.nav{
  display:flex;
  align-items:center;
  gap:clamp(1.1rem, 2.6vw, 2.1rem);
}
.nav a{
  font-size:.8125rem;
  color:var(--smoke);
  text-decoration:none;
  padding-block:.3rem;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.nav a:hover{ color:var(--bone); }
.nav a[aria-current="page"]{
  color:var(--bone);
  border-bottom-color:var(--ember);
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--hairline-2);
}
.hero__inner{
  position:relative;
  z-index:1;
  padding-block:clamp(4rem, 11vh, 7rem) clamp(4rem, 10vh, 6.5rem);
  /* .shell's gutter sits inside this box, so add it back on */
  max-width:calc(46rem + var(--gutter) * 2);
}

.hero__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 1.9rem;
  text-wrap:balance;
}
.hero__title em{
  font-style:italic;
  font-weight:400;
}

/* The forced break helps the two-line desktop headline; on narrow screens it
   strands the last word, so let the text wrap on its own instead. */
@media (max-width: 640px){
  .hero__title br{ display:none; }
}

.hero__lede{
  margin:0;
  max-width:var(--measure);
  color:var(--smoke);
  font-size:.9375rem;
  line-height:1.85;
}
.hero__lede b{
  color:var(--bone);
  font-weight:400;
}

/* The two products, stated up front — the main thing this company has. */
.hero__products{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.85rem;
  margin-top:2.9rem;
  max-width:42rem;
}
@media (max-width: 560px){
  .hero__products{ grid-template-columns:1fr; }
}
.plink{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "icon name"
    "icon desc";
  column-gap:.9rem;
  align-items:center;
  padding:.85rem 1rem;
  border:1px solid var(--hairline);
  background:rgba(232,228,220,.02);
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease;
}
.plink:hover{ border-color:var(--ember); background:rgba(255,107,53,.06); }
.plink__icon{
  grid-area:icon;
  width:48px; height:48px;
  border-radius:22%;
  display:block;
  box-shadow:0 0 0 1px rgba(232,228,220,.13);
}
.plink__name{
  grid-area:name;
  align-self:end;
  color:var(--bone);
  font-size:.875rem;
  line-height:1.3;
}
.plink__desc{
  grid-area:desc;
  align-self:start;
  color:var(--smoke);
  font-size:.75rem;
  line-height:1.4;
}
.plink:hover .plink__name{ color:var(--ember); }

/* The logo — the one loud element on the page. It is the client's own mark,
   painted with a gradient that runs from ember into the logo's slate, which is
   where the two halves of the palette meet. */
.sigil-wrap{
  position:absolute;
  top:50%;
  right:calc(var(--gutter) * -1 + 24px);
  transform:translateY(-50%);
  width:clamp(260px, 34vw, 450px);
  z-index:0;
  pointer-events:none;
}
.sigil{
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 50%;
  filter:drop-shadow(0 24px 60px rgba(48,68,87,.55));
}
@media (max-width: 900px){
  .sigil-wrap{
    right:50%;
    transform:translate(50%,-50%);
    width:min(520px, 104vw);
    opacity:.17;
  }
  .hero__inner{ max-width:none; }
}

/* One orchestrated moment: the mark rises into place on load.
   Fill mode is `backwards` and nothing is hidden in the base rule, so if the
   animation never runs the page is simply visible. */
.sigil__art{
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:mark 1.9s cubic-bezier(.16,.86,.28,1) .25s backwards;
}
@keyframes mark{
  from{ opacity:0; transform:translateY(16px) scale(.94); }
  to  { opacity:1; transform:none; }
}

.hero__inner > *{
  animation:rise .9s cubic-bezier(.22,.68,.28,1) backwards;
}
.hero__title{ animation-delay:.15s; }
.hero__lede{ animation-delay:.3s; }
.hero__products{ animation-delay:.45s; }
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .sigil__art,
  .hero__inner > *{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   Product sections
   ============================================================ */
.product{
  padding-block:clamp(4rem, 9vw, 7rem);
  border-bottom:1px solid var(--hairline-2);
}

.product__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.25rem 2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--hairline);
  margin-bottom:clamp(2.25rem, 5vw, 3.5rem);
}
.product__name{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  line-height:1;
  letter-spacing:-.01em;
  margin:0;
}
.lockup{
  display:flex;
  align-items:center;
  gap:clamp(.9rem, 2vw, 1.35rem);
  min-width:0;
}
.lockup__icon{
  width:clamp(56px, 7vw, 72px);
  height:clamp(56px, 7vw, 72px);
  border-radius:22%;
  flex:0 0 auto;
  display:block;
  box-shadow:
    0 0 0 1px rgba(232,228,220,.13),
    0 10px 24px rgba(0,0,0,.55);
}
.product__tag{
  margin:.35rem 0 0;
  color:var(--smoke);
  font-size:.8125rem;
  line-height:1.45;
}

.cta{
  display:inline-block;
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--bone);
  text-decoration:none;
  padding:.75rem 1.3rem;
  border:1px solid var(--ember);
  white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.cta:hover{ background:var(--ember); color:var(--void); }

.product__body{
  display:grid;
  gap:clamp(2rem, 5vw, 4rem);
}
/* Grid items default to min-width:auto, which lets the no-wrap gallery wall
   push the whole page wider than the viewport. Let them shrink instead. */
.product__body > *,
.product__split > *{ min-width:0; }
.product__copy p{
  margin:0 0 1.15rem;
  max-width:var(--measure);
  color:var(--smoke);
}
.product__copy p:last-child{ margin-bottom:0; }
.product__copy strong{ color:var(--bone); font-weight:400; }

/* Key/value spec block — structural, not decorative */
.spec{
  margin:2rem 0 0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.55rem 1.5rem;
  font-size:.8125rem;
  border-top:1px solid var(--hairline);
  padding-top:1.35rem;
  max-width:34rem;
}
.spec dt{
  color:var(--smoke);
  white-space:nowrap;
}
.spec dd{ margin:0; color:var(--bone); }
.spec dd .live{ color:var(--ember); }

/* ---- Artive: gallery wall ---- */
.product--artive .product__body{
  grid-template-columns:1fr;
}
.wall{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,228,220,.045), transparent 62%),
    var(--ash);
  border:1px solid var(--hairline-2);
  padding:clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem, 4vw, 3rem);
  flex-wrap:wrap;
  overflow:hidden;
}
.frame{
  position:relative;
  flex:0 0 auto;
}
.frame__art{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.frame__slot{
  position:relative;
  overflow:hidden;
}
/* mat board */
.frame__mat{
  background:#0D0D11;
  padding:clamp(7px, 1.5vw, 13px);
  box-shadow:
    inset 0 0 0 1px rgba(232,228,220,.13),
    inset 0 2px 6px rgba(0,0,0,.5);
}

/* moulding 01 — plain wood: one flat face, softly lit */
.frame--wood{
  width:clamp(132px, 18vw, 196px);
  padding:clamp(9px, 1.7vw, 15px);
  background:linear-gradient(148deg, #6A5849 0%, #4A3E34 42%, #574839 72%, #3B3129 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 2px rgba(255,236,205,.07),
    0 16px 32px rgba(0,0,0,.55);
}
.frame--wood .frame__slot{
  aspect-ratio:4/5;
  background:#15131A;
}

/* moulding 02 — Baroque gilt: concentric ridges read as a carved profile */
.frame--gilt{
  width:clamp(172px, 24vw, 264px);
  padding:clamp(16px, 2.9vw, 27px);
  /* gilt seen in a dim room — never brighter than the ember */
  background:linear-gradient(146deg,
    #574515 0%, #7B6425 15%, #9C8340 30%, #4B3B10 46%,
    #816D2A 62%, #A08B4A 76%, #453711 100%);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.6),
    inset 0 0 0 3px rgba(226,205,142,.20),
    inset 0 0 0 9px rgba(0,0,0,.30),
    inset 0 0 0 11px rgba(226,205,142,.14),
    inset 0 0 0 21px rgba(0,0,0,.32),
    inset 0 0 0 23px rgba(226,205,142,.17),
    0 24px 48px rgba(0,0,0,.72),
    0 0 0 1px rgba(201,162,39,.16);
}
.frame--gilt .frame__slot{
  aspect-ratio:3/4;
  background:#15131A;
}

/* moulding 03 — slim black: almost nothing, on purpose */
.frame--slim{
  width:clamp(120px, 16vw, 178px);
  padding:clamp(5px, .9vw, 8px);
  background:linear-gradient(160deg, #1E1E23, #101013);
  box-shadow:
    inset 0 0 0 1px rgba(232,228,220,.14),
    0 14px 28px rgba(0,0,0,.55);
}
.frame--slim .frame__slot{
  aspect-ratio:1/1;
  background:#15131A;
}

/* Narrow screens: keep the three mouldings in one row and let the wall pan,
   rather than reflowing them into a broken second row. */
@media (max-width: 700px){
  .wall{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .wall::-webkit-scrollbar{ display:none; }
}

.wall__note{
  margin:1.1rem 0 0;
  font-size:.75rem;
  color:var(--smoke);
}

.product--artive .product__split{
  display:grid;
  gap:clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px){
  .product--artive .product__split{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .product--artive .spec{ margin-top:0; border-top:none; padding-top:0; }
}

/* ---- Bro: the product as it actually appears, on a phone ---- */
@media (min-width: 900px){
  .product--bro .product__body{
    grid-template-columns:minmax(0,370px) minmax(0,1fr);
    align-items:start;
    gap:clamp(2.5rem, 6vw, 5rem);
  }
}

.phone{
  width:100%;
  max-width:360px;
  margin-inline:auto;
  background:#05070A;
  border-radius:44px;
  padding:11px;
  box-shadow:
    0 0 0 1px rgba(147,169,193,.20),
    0 0 0 6px rgba(10,13,18,.9),
    0 40px 80px rgba(0,0,0,.65);
}
.phone__screen{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  background:var(--void);
  display:flex;
  flex-direction:column;
  min-height:620px;
}
/* the notch */
.phone__screen::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:104px; height:23px;
  background:#05070A;
  border-radius:0 0 14px 14px;
  z-index:3;
}

.phone__status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 1.35rem .15rem;
  font-size:.6875rem;
  color:var(--bone);
  letter-spacing:.02em;
}
.phone__status svg{ display:block; }
.phone__signal{ display:flex; align-items:center; gap:5px; }

.phone__nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:.35rem .9rem .65rem;
  border-bottom:1px solid var(--hairline-2);
  background:rgba(147,169,193,.05);
}
.phone__back{
  color:var(--ember);
  display:flex;
  align-items:center;
}
.phone__who{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
}
.phone__avatar{
  width:34px; height:34px;
  border-radius:50%;
  display:block;
  box-shadow:0 0 0 1px rgba(147,169,193,.2);
}
.phone__name{ font-size:.6875rem; color:var(--bone); }

.thread__log{
  padding:1rem .8rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  list-style:none;
  margin:0;
  flex:1 1 auto;
}
.msg{
  max-width:86%;
  padding:.5rem .8rem;
  font-size:.8125rem;
  line-height:1.45;
  border-radius:17px;
}
.msg--out{
  align-self:flex-end;
  background:var(--bubble);
  color:var(--bubble-ink);
  border-bottom-right-radius:6px;
}
.msg--in{
  align-self:flex-start;
  background:var(--ash-2);
  color:var(--bone);
  border-bottom-left-radius:6px;
}
.thread__stamp{
  align-self:center;
  font-size:.625rem;
  letter-spacing:.08em;
  color:var(--smoke);
  padding:.7rem 0 .35rem;
}

.phone__compose{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .8rem 1.1rem;
  border-top:1px solid var(--hairline-2);
}
.phone__field{
  flex:1 1 auto;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:.4rem .8rem;
  font-size:.75rem;
  color:var(--smoke);
}
.phone__send{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--bubble);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

/* ============================================================
   About
   ============================================================ */
.about{
  padding-block:clamp(4rem, 9vw, 7rem);
  border-bottom:1px solid var(--hairline-2);
}
.about__grid{
  display:grid;
  gap:clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 800px){
  .about__grid{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); }
}
.about__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2.25rem);
  line-height:1.1;
  margin:0;
  letter-spacing:-.01em;
}
.about__body p{
  margin:0 0 1.15rem;
  max-width:var(--measure);
  color:var(--smoke);
}
.about__body p:last-child{ margin-bottom:0; }
.about__body strong{ color:var(--bone); font-weight:400; }

/* ============================================================
   Footer
   ============================================================ */
.foot__inner{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  padding-block:2rem 2.75rem;
  font-size:.75rem;
  color:var(--smoke);
}
.foot a{
  color:var(--smoke);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.foot a:hover{ color:var(--bone); border-bottom-color:var(--hairline); }

/* ============================================================
   Interior pages (about, contact)
   ============================================================ */
.page-head{
  padding-block:clamp(3rem, 8vh, 5.5rem) clamp(2rem, 5vw, 3.25rem);
  border-bottom:1px solid var(--hairline);
}
.page-head__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(2.4rem, 6.5vw, 4.25rem);
  line-height:1;
  letter-spacing:-.015em;
  margin:0;
}
.page-head__lede{
  margin:1.5rem 0 0;
  max-width:var(--measure);
  color:var(--smoke);
  font-size:.9375rem;
  line-height:1.85;
}
.page-head__lede strong{ color:var(--bone); font-weight:400; }

.section{
  padding-block:clamp(3rem, 7vw, 5rem);
  border-bottom:1px solid var(--hairline-2);
}
.section__grid{
  display:grid;
  gap:clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 800px){
  .section__grid{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); }
}
.section__grid > *{ min-width:0; }
.section__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(1.5rem, 2.8vw, 2rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
}
.prose p{
  margin:0 0 1.15rem;
  max-width:var(--measure);
  color:var(--smoke);
}
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--bone); font-weight:400; }
.prose a{
  color:var(--bone);
  text-decoration:underline;
  text-decoration-color:var(--slate-mid);
  text-underline-offset:.3em;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.prose a:hover{ color:var(--ember); text-decoration-color:var(--ember); }

/* principle list — no numbering, because these are not a sequence */
.tenets{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:1.6rem;
  max-width:44rem;
}
.tenets h3{
  margin:0 0 .45rem;
  font-size:.875rem;
  font-weight:400;
  color:var(--bone);
  letter-spacing:.01em;
}
.tenets p{ margin:0; color:var(--smoke); max-width:var(--measure); }
.tenets li{
  border-left:2px solid var(--slate-up);
  padding-left:1.15rem;
}

/* ---- contact ---- */
.contact-grid{
  display:grid;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
@media (min-width: 880px){
  .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); }
}
.contact-grid > *{ min-width:0; }

.routes{
  margin:0;
  display:grid;
  gap:1.4rem;
}
.route{
  border:1px solid var(--hairline);
  padding:1.25rem 1.35rem;
  display:grid;
  gap:.5rem;
}
.route__who{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.route__icon{
  width:34px; height:34px;
  border-radius:22%;
  display:block;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(147,169,193,.14);
}
.route__name{ color:var(--bone); font-size:.875rem; }
.route p{ margin:0; color:var(--smoke); font-size:.8125rem; line-height:1.65; }
.route a{
  color:var(--ember);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.route a:hover{ border-bottom-color:var(--ember); }

.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.75rem; color:var(--smoke); letter-spacing:.03em; }
.field input,
.field select,
.field textarea{
  font-family:var(--mono);
  font-size:.875rem;
  font-weight:300;
  color:var(--bone);
  background:var(--ash);
  border:1px solid var(--hairline);
  border-radius:0;
  padding:.7rem .85rem;
  width:100%;
  transition:border-color .18s ease;
}
.field textarea{ resize:vertical; min-height:8rem; line-height:1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ember);
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(136,146,160,.55); }

.form button{
  font-family:var(--mono);
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--bone);
  background:transparent;
  border:1px solid var(--ember);
  border-radius:0;
  padding:.8rem 1.4rem;
  cursor:pointer;
  justify-self:start;
  transition:background .18s ease, color .18s ease;
}
.form button:hover{ background:var(--ember); color:var(--void); }
.form__note{
  margin:0;
  font-size:.75rem;
  color:var(--smoke);
  line-height:1.65;
  max-width:34rem;
}

/* ---- footer, now that there are pages to link ---- */
.foot{ border-top:1px solid var(--hairline-2); }
.foot__inner{
  display:grid;
  gap:1.75rem;
  padding-block:2.5rem 3rem;
  font-size:.75rem;
  color:var(--smoke);
}
@media (min-width: 700px){
  .foot__inner{ grid-template-columns:1fr auto; align-items:start; }
}
.foot__brand{ display:grid; gap:.6rem; }
.foot__mark{ width:26px; height:26px; display:block; opacity:.85; }
.foot__links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.6rem;
}
.foot a{
  color:var(--smoke);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.foot a:hover{ color:var(--bone); border-bottom-color:var(--hairline); }

/* ============================================================
   Legal documents (privacy, terms)
   Long-form reading: one column, a real measure, headings you can link to.
   ============================================================ */
.legal{
  max-width:46rem;
  padding-block:clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}
.legal .page-head__title{ line-height:1.12; }
.legal__updated{
  margin:1.25rem 0 0;
  font-size:.75rem;
  color:var(--smoke);
  letter-spacing:.02em;
}
.legal h2{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(1.35rem, 2.4vw, 1.7rem);
  line-height:1.15;
  letter-spacing:-.005em;
  margin:3rem 0 1rem;
  scroll-margin-top:1.5rem;
}
.legal h3{
  font-size:.9375rem;
  font-weight:400;
  color:var(--bone);
  margin:1.9rem 0 .6rem;
}
.legal p{ margin:0 0 1.1rem; color:var(--smoke); }
.legal strong{ color:var(--bone); font-weight:400; }
.legal ul{ margin:0 0 1.2rem; padding-left:1.15rem; }
.legal li{ color:var(--smoke); margin-bottom:.55rem; padding-left:.25rem; }
.legal li::marker{ color:var(--slate-up); }
.legal a{
  color:var(--bone);
  text-decoration:underline;
  text-decoration-color:var(--slate-mid);
  text-underline-offset:.3em;
}
.legal a:hover{ color:var(--ember); text-decoration-color:var(--ember); }

.legal__summary{
  margin:2.25rem 0 0;
  padding:1.3rem 1.45rem;
  border:1px solid var(--hairline);
  border-left:2px solid var(--ember);
  background:rgba(147,169,193,.035);
}
.legal__summary h2{
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:400;
  color:var(--bone);
  letter-spacing:.02em;
  margin:0 0 .85rem;
}
.legal__summary ul{ margin:0; }
.legal__summary li:last-child{ margin-bottom:0; }

.legal .legal__toc{
  margin:2rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.3rem;
  font-size:.75rem;
}
.legal .legal__toc li{ margin:0; padding:0; }
.legal__toc a{
  color:var(--smoke);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
.legal__toc a:hover{ color:var(--ember); border-bottom-color:var(--ember); }

/* wide content scrolls inside itself, never the page */
.table-wrap{ overflow-x:auto; margin:0 0 1.3rem; }
.providers{
  width:100%;
  min-width:30rem;
  border-collapse:collapse;
  font-size:.8125rem;
}
.providers th,
.providers td{
  text-align:left;
  vertical-align:top;
  padding:.65rem .8rem .65rem 0;
  border-bottom:1px solid var(--hairline-2);
}
.providers th{
  font-weight:400;
  color:var(--bone);
  border-bottom-color:var(--hairline);
}
.providers td{ color:var(--smoke); }
.providers td:first-child{ color:var(--bone); white-space:nowrap; }