/* matasb.com — marble direction (2026-09-20)
   Layout: luxury editorial · Nav: dark bar, centred wordmark, outlined CTA
   Hero: cream field between two bands of gold agate, centred serif display
   Type: Playfair Display (display + italic) with Jost (UI and body)
   Palette: cream / dark brown / gold

   Contrast, measured against --paper #F7F2E9:
     --ink       12.3:1   --ink-soft 5.8:1   --gold-deep 4.8:1
   --gold #B8894E is 2.8:1 and is therefore decoration only: veins, hairline
   rules, the pin. It must never carry text. Links use --gold-deep. */

:root{
  --paper:#F7F2E9;
  --paper-2:#FDFBF6;
  --ink:#3A2A21;
  --ink-deep:#2E211A;
  --ink-soft:#6F5A48;
  --gold:#B8894E;
  --gold-deep:#8C6239;
  --gold-pale:#E6D5BA;
  --gold-warm:#D9BE8E;
  --rule:#E2D6C3;
  --measure:36rem;
  --pad:clamp(1.25rem, 5vw, 2.5rem);
  --caps:.14em;
}

*{box-sizing:border-box;margin:0;padding:0}

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

body{
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.72;
  font-size:1.0625rem;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{flex:1}

.wrap{max-width:66rem;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:50rem}

a{color:var(--gold-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:400}

h1{
  font-size:clamp(2.35rem,7vw,4.9rem);
  line-height:1.02;
  letter-spacing:.015em;
  text-transform:uppercase;
  max-width:18ch;
}
h1 em{
  display:block;font-style:italic;text-transform:none;letter-spacing:0;
  font-size:.82em;line-height:1.05;margin-top:.12em;color:var(--gold-deep);
}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.15;letter-spacing:.01em;margin-bottom:.85rem}
h3{
  font-family:'Jost',sans-serif;font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--caps);line-height:1.35;color:var(--ink);
}
p{max-width:var(--measure)}
p + p{margin-top:1rem}

section{padding-block:clamp(3rem,7vw,5.5rem)}
.section-intro{color:var(--ink-soft);margin-bottom:2.5rem}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink-deep);color:var(--paper);
  padding:.75rem 1.25rem;z-index:100;
}
.skip:focus{left:0}

/* ---------- Header: dark bar, centred wordmark ---------- */
.site-head{background:var(--ink);color:var(--paper);padding-block:1.125rem;position:relative;z-index:5}
.site-head .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
}
.wordmark{
  grid-column:2;justify-self:center;text-align:center;
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  color:var(--paper);text-transform:uppercase;letter-spacing:.11em;
  font-size:clamp(1.0625rem,2.1vw,1.5rem);line-height:1.12;
}
.wordmark span{display:block}
.wordmark:hover{text-decoration:none;color:var(--gold-warm)}

.nav{grid-column:1}
.nav ul{display:flex;gap:1.75rem;list-style:none;flex-wrap:wrap;align-items:center}
.nav a{
  color:var(--gold-pale);font-size:.75rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--caps);
  padding-block:.375rem;border-bottom:1px solid transparent;
}
.nav a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}

.head-cta{grid-column:3;justify-self:end}
.head-cta a{
  display:inline-block;color:var(--paper);border:1px solid rgba(230,213,186,.55);
  font-size:.75rem;text-transform:uppercase;letter-spacing:var(--caps);
  padding:.8125rem 1.625rem;white-space:nowrap;
}
.head-cta a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);text-decoration:none}
.head-cta a[aria-current="page"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- Breadcrumbs ---------- */
.crumbs{padding-block:1.125rem;border-bottom:1px solid var(--rule)}
.crumbs ol{
  display:flex;gap:.5rem;list-style:none;flex-wrap:wrap;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:var(--caps);color:var(--ink-soft);
}
.crumbs li+li::before{content:"\2022";margin-right:.5rem;color:var(--gold)}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:'Jost',sans-serif;font-size:.8125rem;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--caps);line-height:1.2;
  padding:1.125rem 2.5rem;border:1px solid var(--ink);border-radius:0;cursor:pointer;
}
.btn:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff;text-decoration:none}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--gold)}
.btn-quiet:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-wide{padding-inline:clamp(2.5rem,8vw,5rem)}
.actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.25rem;align-items:center}

/* ---------- Hero: cream between two bands of agate ---------- */
/* The marble is two background layers, one pinned to each edge, over the
   cream. Both are transparent WebPs of the same vein field, so the page
   colour shows through them and the middle of the band stays clean enough
   to take the headline. */
.hero{
  position:relative;
  background-color:var(--paper);
  background-image:url('/assets/img/marmuras-virsus.webp'),url('/assets/img/marmuras-apacia.webp');
  background-repeat:no-repeat,no-repeat;
  background-position:center top,center bottom;
  background-size:100% auto,100% auto;
  padding-block:clamp(3.25rem,7vw,5rem);
  text-align:center;
  overflow:hidden;
}
/* The home hero is the tall one. The inner pages carry a headline and a line
   of text, and at the same height they left a screen of empty stone. */
.hero:has(.hero-text){padding-block:clamp(4.5rem,11vw,8.5rem)}
.hero .wrap{position:relative;max-width:60rem}
.hero-text{max-width:48rem;margin:0 auto}
/* The home hero is the only one with .hero-text around it, and the only one
   that gets the full display size. On the inner pages the same setting at
   4.9rem ran a three-line headline down most of the screen. */
.hero h1{margin:0 auto;max-width:none;font-size:clamp(2.1rem,5vw,3.5rem)}
.hero .hero-text h1{font-size:clamp(2.35rem,7vw,4.9rem)}
.hero .hero-sub{
  margin:1.75rem auto 0;color:var(--ink-soft);max-width:34rem;
  font-size:clamp(1rem,1.7vw,1.125rem);
}
.hero .actions{justify-content:center;margin-top:2.5rem}
.hero a:not(.btn){color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}

/* the price as a pinned note */
.pricetag{
  max-width:none;display:block;width:12.5rem;margin:2.75rem auto 0;
  background:var(--paper-2);color:var(--ink);
  padding:2rem 1.25rem 1.5rem;text-align:center;
  transform:rotate(3deg);
  box-shadow:0 16px 34px rgba(58,42,33,.16);
  border:1px solid rgba(226,214,195,.9);
}
/* the pin */
.pricetag::before{
  content:"";position:absolute;top:-.5rem;left:50%;translate:-50% 0;
  width:1.125rem;height:1.125rem;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F0DCBC 0 18%,var(--gold) 45%,#7A5330 100%);
  box-shadow:0 3px 6px rgba(58,42,33,.35);
}
.pricetag{position:relative}
.pricetag .num{
  display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:3.25rem;line-height:1;color:var(--ink);
}
.pricetag .per{
  display:block;margin-top:.5rem;font-size:.625rem;line-height:1.7;
  text-transform:uppercase;letter-spacing:var(--caps);color:var(--ink-soft);
}
.pricetag .per b{font-weight:400;color:var(--gold-deep)}
@media(min-width:62rem){
  .hero .wrap:has(.pricetag) .pricetag{
    position:absolute;right:-1rem;top:38%;margin:0;transform:rotate(5deg);
  }
}

/* ---------- Closing call to action ---------- */
.cta-band{
  text-align:center;border-top:1px solid var(--rule);
  background-color:var(--paper);
  background-image:url('/assets/img/marmuras-apacia.webp');
  background-repeat:no-repeat;background-position:center bottom;background-size:100% auto;
  padding-block:clamp(3.5rem,8vw,5.5rem);
}
.cta-band p{margin-inline:auto}
.cta-band .actions{justify-content:center}
.cta-band h2::after{
  content:"";display:block;width:3rem;height:1px;background:var(--gold);
  margin:1.25rem auto 1.5rem;
}

/* ---------- Receipt ---------- */
.receipt-band{background:var(--ink);color:var(--gold-pale);padding-block:clamp(3.5rem,8vw,5.5rem)}
.receipt-band .wrap{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr}
@media(min-width:56rem){.receipt-band .wrap{grid-template-columns:1fr 25rem;align-items:start}}

.band-copy h2{color:var(--paper)}
.band-copy p{color:var(--gold-pale);max-width:38ch}
.band-copy a{color:var(--gold-warm);text-decoration:underline;text-underline-offset:3px}
.band-note{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(230,213,186,.25);
  font-size:.9375rem;max-width:40ch;
}

.receipt{background:var(--paper-2);color:var(--ink);padding:2.25rem 2rem;position:relative}
.receipt-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--gold);
}
.receipt-head strong{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:1.25rem;
}
.receipt-head span{
  font-size:.625rem;text-transform:uppercase;letter-spacing:var(--caps);color:var(--ink-soft);
}

.receipt ul{list-style:none;margin:1.25rem 0 0}
.receipt li{display:flex;align-items:baseline;gap:.5rem;padding:.5rem 0;font-size:.9375rem}
.receipt li .lead{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-.2em);min-width:1rem}
.receipt li .tick{
  color:var(--gold-deep);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.1em;white-space:nowrap;
}

.receipt-total{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--gold);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
}
.receipt-total .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:var(--caps)}
.receipt-total .lbl small{
  display:block;letter-spacing:.08em;color:var(--ink-soft);font-size:.625rem;margin-top:.25rem;
}
.receipt-total .amt{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:clamp(2.5rem,7vw,3.25rem);line-height:.95;white-space:nowrap;
}
.receipt-total .amt sup{
  font-family:'Jost',sans-serif;font-style:normal;font-size:.22em;
  text-transform:uppercase;letter-spacing:.1em;vertical-align:super;color:var(--ink-soft);
  margin-left:.45em;
}

.stamp{
  margin-top:1.5rem;border:1px solid var(--gold);color:var(--gold-deep);
  padding:.625rem .75rem;text-align:center;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:var(--caps);
}

/* ---------- Steps ---------- */
.steps{counter-reset:step;list-style:none;display:grid;gap:2.5rem;margin-top:.5rem}
@media(min-width:48rem){.steps{grid-auto-flow:column;grid-auto-columns:1fr;gap:2.75rem}}
.steps li{position:relative;padding-top:2.75rem}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:1.75rem;line-height:1;color:var(--gold);
}
.steps li::after{
  content:"";position:absolute;top:2.375rem;left:0;width:2.25rem;height:1px;background:var(--gold);
}
.steps h3{margin-bottom:.5rem}
.steps p{font-size:.9375rem;color:var(--ink-soft)}

/* ---------- Tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.5rem;list-style:none}
.tags li{
  border:1px solid var(--rule);background:var(--paper-2);padding:.6875rem 1.25rem;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);
}

/* ---------- Prose lists ---------- */
.plain{list-style:none;display:grid;gap:2rem;margin-top:1.75rem;max-width:46rem}
.plain li{padding-left:1.5rem;border-left:1px solid var(--gold)}
.plain h3{margin-bottom:.5rem}
.plain p{font-size:.9375rem;color:var(--ink-soft);max-width:54ch}

/* ---------- Plain bullet list (legal pages) ---------- */
.bullets{margin:1rem 0 0 1.125rem;display:grid;gap:.5rem;max-width:var(--measure)}
.bullets li{padding-left:.25rem}
.bullets li::marker{color:var(--gold)}

/* ---------- Compare table ---------- */
.compare{width:100%;border-collapse:collapse;margin-top:1.75rem;font-size:.9375rem}
.compare caption{text-align:left;color:var(--ink-soft);font-size:.9375rem;margin-bottom:1rem}
.compare th,.compare td{text-align:left;padding:1rem .75rem;border-bottom:1px solid var(--rule);vertical-align:top}
.compare thead th{
  border-bottom:1px solid var(--gold);font-weight:400;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:var(--caps);color:var(--ink-soft);
}
.compare tbody th{font-weight:400;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--gold);max-width:48rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  padding:1.375rem 2.5rem 1.375rem 0;cursor:pointer;list-style:none;position:relative;
  font-family:'Playfair Display',Georgia,serif;font-size:1.1875rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.25rem;top:1.375rem;
  font-family:'Jost',sans-serif;font-size:1.25rem;color:var(--gold);line-height:1.2;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 1.5rem;color:var(--ink-soft);max-width:56ch}

/* ---------- Portrait ---------- */
.about-grid{display:block}
.about-grid::after{content:"";display:table;clear:both}
.about-grid > div:first-child{float:left;width:44%;margin:.35rem 1.25rem .75rem 0}
@media(min-width:52rem){
  .about-grid{display:grid;grid-template-columns:17rem 1fr;gap:3.5rem;align-items:start}
  .about-grid > div:first-child{float:none;width:auto;margin:0}
}
.portrait{border:1px solid var(--rule);background:var(--paper-2);padding:.5rem}

/* ---------- Contact ---------- */
.contact{background:var(--paper-2);border-top:1px solid var(--rule)}
.contact-grid{display:grid;gap:3rem}
@media(min-width:52rem){.contact-grid{grid-template-columns:1fr 1fr;gap:4.5rem}}

.direct{display:grid;gap:1.125rem;margin-top:1.75rem;list-style:none}
.direct li{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.direct .k{
  color:var(--ink-soft);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:var(--caps);min-width:6.5rem;
}
.direct a{color:var(--gold-deep)}

form{display:grid;gap:1.25rem}
label{
  display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:var(--caps);
  color:var(--ink-soft);margin-bottom:.5rem;
}
input,textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  padding:.875rem 1rem;border:1px solid var(--rule);border-radius:0;background:#fff;
}
input:focus,textarea:focus{border-color:var(--gold);outline-offset:1px}
textarea{min-height:8rem;resize:vertical}
.form-note{font-size:.8125rem;color:var(--ink-soft);max-width:44ch}

/* honeypot: off-screen rather than display:none, which many bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 404 ---------- */
.oops{padding-block:clamp(3.5rem,10vw,7rem)}
.oops .code{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:var(--caps);
  color:var(--gold-deep);margin-bottom:1.25rem;
}
.oops ul{list-style:none;display:grid;gap:.75rem;margin-top:2.25rem}
.oops ul a{color:var(--gold-deep)}
.oops .hero-sub{color:var(--ink-soft);margin-top:1.5rem}

/* ---------- Footer ----------
   Three registers rather than one: the name is set like the wordmark in the
   header, the two column headings are small gold caps, and the links sit
   below them at reading size. The muted tones are measured on --ink:
   --gold-warm 7.6:1 for the headings, #BBAA94 6.1:1 for the quiet lines,
   --gold-pale 9.5:1 for the links. --gold itself is 4.4:1 here and so is
   used for rules and separators, never for the text. */
.site-foot{
  background:var(--ink);color:var(--gold-pale);padding-block:clamp(3rem,6vw,4.5rem);
  font-size:.9375rem;
}
.foot-grid{display:grid;gap:2.5rem}
@media(min-width:48rem){
  .foot-grid{grid-template-columns:1.4fr 1fr 1.1fr;gap:clamp(2rem,4.5vw,3.5rem)}
  /* a hairline between the columns, so the three blocks read as three */
  .foot-links,.foot-contact{
    border-left:1px solid rgba(230,213,186,.16);
    padding-left:clamp(1.5rem,3.5vw,3rem);
  }
}

.foot-brand h2{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:1.0625rem;color:var(--paper);
  text-transform:uppercase;letter-spacing:.16em;line-height:1.3;
  margin-bottom:1.375rem;padding-bottom:1.125rem;position:relative;
}
.foot-brand h2::after{
  content:"";position:absolute;left:0;bottom:0;width:2.5rem;height:1px;background:var(--gold);
}
.foot-brand p{color:#BBAA94;font-size:.875rem;line-height:1.75;max-width:30ch}

.foot-links h2,.foot-contact h2{
  font-family:'Jost',sans-serif;font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--gold-warm);
  margin-bottom:1.25rem;
}

.site-foot ul{list-style:none;display:grid;gap:.75rem}
.site-foot a{color:var(--gold-pale)}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* the address is the one thing in here worth setting large */
.foot-mail{margin-bottom:1rem;max-width:none}
.foot-mail a{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.1875rem;
  color:var(--paper);
}
.foot-mail a:hover{color:var(--gold-warm)}
.foot-contact ul{font-size:.875rem}

/* On a phone the columns stack, so the hairline moves above each block and
   does the separating that the vertical rule does on a wide screen. */
@media(max-width:48rem){
  .foot-links,.foot-contact{
    border-top:1px solid rgba(230,213,186,.16);padding-top:1.75rem;
  }
}

.foot-legal{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid rgba(184,137,78,.35);
  display:flex;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap;
  font-size:.625rem;text-transform:uppercase;letter-spacing:.16em;color:#BBAA94;
}
.foot-legal a{color:#BBAA94}
.foot-legal a:hover{color:var(--paper)}
@media(max-width:48rem){
  .foot-legal{flex-direction:column;align-items:flex-start;gap:.625rem}
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{display:none}
@media(max-width:44rem){
  .mobile-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--paper);border-top:1px solid var(--rule);
    padding:.625rem var(--pad) calc(.625rem + env(safe-area-inset-bottom));
  }
  .mobile-cta .btn{display:block;text-align:center;width:100%;padding:.9375rem 1rem}
  body{padding-bottom:4.75rem}
}

/* ---------- Narrow screens ---------- */
@media(max-width:52rem){
  .site-head .wrap{grid-template-columns:1fr;justify-items:center;gap:.875rem;text-align:center}
  .wordmark{grid-column:1;grid-row:1;font-size:1.1875rem}
  .nav{grid-column:1;grid-row:2;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav ul{gap:1.25rem;flex-wrap:nowrap;width:max-content;min-width:100%;justify-content:center}
  .nav a{white-space:nowrap}
  .head-cta{grid-column:1;grid-row:3;justify-self:center}
  .head-cta a{padding:.6875rem 1.5rem}
}
@media(max-width:44rem){
  .site-head{padding-block:.875rem}
  .head-cta{display:none}
  .hero{padding-block:3.25rem 3.5rem}
  h1{font-size:clamp(2.1rem,9vw,3rem)}
}

/* Wide table stays readable on narrow phones */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.75rem}
.table-scroll .compare{margin-top:0;min-width:32rem}
.table-scroll:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

/* Receipt rows must be able to shrink on very narrow phones */
.receipt li > span:first-child{min-width:0;overflow-wrap:break-word}
.receipt-band .wrap > *{min-width:0}
@media(max-width:24rem){
  .receipt{padding:1.75rem 1.375rem}
  .receipt li{font-size:.875rem}
  .receipt-head strong{font-size:1.125rem}
}

/* ---------- Motion ----------
   All CSS, no library and no JS. Scroll reveals sit behind @supports, so a
   browser without scroll-driven animations simply shows a static page, and
   the prefers-reduced-motion rule at the top of this file turns everything
   here off with !important. */

@keyframes rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes note-settle{
  from{opacity:0;transform:rotate(-4deg) translateY(-18px) scale(.95)}
  to{opacity:1;transform:rotate(3deg)}
}
@keyframes note-settle-wide{
  from{opacity:0;transform:rotate(-4deg) translateY(-18px) scale(.95)}
  to{opacity:1;transform:rotate(5deg)}
}

.hero h1,
.hero .hero-sub,
.hero .actions{animation:rise .5s cubic-bezier(.22,.68,.32,1) backwards}
.hero h1{animation-delay:.02s}
.hero .hero-sub{animation-delay:.09s}
.hero .actions{animation-delay:.16s}
.pricetag{animation:note-settle .5s cubic-bezier(.22,.8,.3,1) .18s backwards}
@media(min-width:62rem){
  .hero .wrap:has(.pricetag) .pricetag{animation-name:note-settle-wide}
}

.btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.nav a,.head-cta a,.site-foot a,.crumbs a,.wordmark{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.tags li{transition:border-color .2s ease,color .2s ease}
.tags li:hover{border-color:var(--gold);color:var(--ink)}
.faq summary,.faq summary::after{transition:color .2s ease}
.pricetag{transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s ease}
.pricetag:hover{box-shadow:0 22px 44px rgba(58,42,33,.2)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band-copy,
    .receipt,
    .steps li,
    .plain li,
    .faq details,
    .table-scroll,
    .about-grid > div,
    .tags li,
    main section:not(.hero) > .wrap > h2,
    main section:not(.hero) > .wrap > .section-intro{
      animation:rise .01s linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
    .steps li:nth-child(2){animation-range:entry 0% cover 27%}
    .steps li:nth-child(3){animation-range:entry 0% cover 32%}
    .steps li:nth-child(4){animation-range:entry 0% cover 37%}
    .tags li:nth-child(even){animation-range:entry 0% cover 26%}
  }
}