/* ============ tokens ============ */
:root{
  --paper:#FAF6EE; --paper-2:#F1EADC; --ink:#2A1B12; --ink-2:#6B5A4E;
  --line:rgba(42,27,18,.14); --dark:#2A1B12; --olive:#41411F;
  --gold:#B48438; --gold-tx:#8A6420; --gold-lt:#D2AC68;
  --clay:#E8D5C8; --pink:#EDD3D6; --olive-lt:#D8D8BE; --sky:#D3DCE4;

  /* Decorative hairlines use --line (1.29:1). Interactive control borders
     must use --line-strong: WCAG 1.4.11 wants 3:1 for UI boundaries, and
     .5 is the lowest alpha clearing it on every ground (worst: sage 3.29:1). */
  --line-strong:rgba(42,27,18,.5);

  /* Built-in CSS easings are too weak to read as intentional. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);

  --f-display:'Instrument Serif',Georgia,serif;
  --f-ui:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  --display-xl:clamp(56px,9vw,132px);
  --display-l:clamp(38px,5.5vw,76px);
  --display-m:clamp(28px,3.5vw,44px);

  /* UI scale: six steps. Nothing outside these plus the three clamps. */
  --t-micro:11px; --t-fine:13px; --t-small:15px;
  --t-body:17px;  --t-lede:19px; --t-h3:22px;

  --gut:24px; --maxw:1440px;
  --sect-y:clamp(72px,11vw,180px);
}

/* ============ reset ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t-body)/1.6 var(--f-ui);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

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

/* ============ type ============ */
.display-xl,.display-l,.display-m{
  font-family:var(--f-display); font-weight:400; letter-spacing:-.015em;
}
.display-xl{font-size:var(--display-xl); line-height:.88}
.display-l {font-size:var(--display-l);  line-height:.92}
.display-m {font-size:var(--display-m);  line-height:1.05; letter-spacing:-.01em}
/* Italic accent word inside a display heading. The single move that separates
   "editorial" from "a big serif". Used sparingly, one phrase per heading. */
.accent{font-style:italic; letter-spacing:0}

.eyebrow{
  font:500 var(--t-micro)/1 var(--f-ui); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.mono{font:400 var(--t-micro)/1.4 var(--f-mono); letter-spacing:.06em; color:var(--ink-2)}
.lede{font-size:var(--t-lede); color:var(--ink-2); max-width:60ch}
.muted{color:var(--ink-2)}
.gold{color:var(--gold-tx)}          /* text-safe gold on paper */

/* ============ layout ============ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
@media (min-width:900px){ :root{--gut:48px} }

.section{padding:var(--sect-y) 0; border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}

.grid{display:grid; gap:clamp(24px,4vw,64px); grid-template-columns:repeat(12,1fr)}
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5}
.col-6{grid-column:span 6} .col-7{grid-column:span 7}
.col-8{grid-column:span 8} .col-12{grid-column:span 12}
@media (max-width:900px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12}
}

/* ============ dark sections ============ */
.dark{background:var(--dark); color:var(--paper); border-top-color:transparent}
.dark .muted,.dark .eyebrow,.dark .mono,.dark .lede{color:rgba(250,248,244,.66)}
.dark .gold{color:var(--gold)}       /* 5.79:1 on dark, text-safe here */

/* ============ tinted sections ============ */
/* Tinted grounds. --ink-2 and --gold-tx are redefined locally so all
   descendant text clears WCAG AA without touching the base rules.
   Verified: ink-2 5.35–5.62:1, gold-tx 4.59–4.82:1 across all three. */
.tint-clay,.tint-pink,.tint-olive,.tint-sky{--ink-2:#55504C; --gold-tx:#75551B; border-top-color:transparent}
.tint-clay {background:var(--clay)}
.tint-pink {background:var(--pink)}
.tint-olive{background:var(--olive-lt)}
.tint-sky  {background:var(--sky)}
/* Olive dark ground, from the Clique Media reference. paper on olive = 9.74:1 */
.dark-olive{background:var(--olive); color:var(--paper); border-top-color:transparent}
.dark-olive .muted,.dark-olive .eyebrow,.dark-olive .mono,.dark-olive .lede{color:rgba(250,246,238,.72)}
/* Olive sits too close to --gold in luminance (3.15:1). --gold-lt
   clears 4.92:1 on it. */
.dark-olive .gold{color:var(--gold-lt)}

/* ============ buttons ============ */
.btn{
  display:inline-block; padding:15px 28px; background:var(--ink); color:var(--paper);
  font:500 var(--t-small)/1 var(--f-ui); letter-spacing:.02em; border-radius:2px;
  transition:background 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn-ghost{
  display:inline-block; padding:14px 27px; border:1px solid var(--line-strong);
  font:500 var(--t-small)/1 var(--f-ui); border-radius:2px;
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out),
             transform 160ms var(--ease-out);
}
.dark .btn{background:var(--paper); color:var(--ink)}
.dark .btn-ghost{border-color:rgba(250,248,244,.38)}

/* Press feedback is not a hover. It must fire on touch too. */
.btn:active,.btn-ghost:active{transform:scale(0.97)}

/* Touch devices fire :hover on tap and leave the state stuck. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--gold-tx)}
  .btn-ghost:hover{border-color:var(--gold); color:var(--gold-tx)}
  .dark .btn:hover{background:var(--gold)}
  .dark .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
}

/* ============ motion ============ */
.reveal{transition:opacity 400ms var(--ease-out), transform 400ms var(--ease-out)}
.reveal-hidden{opacity:0; transform:translateY(8px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal-hidden{opacity:1 !important; transform:none !important}
  .btn:active,.btn-ghost:active,.currency-btn:active,.gal-btn:active{transform:none !important}
  .hero-glow i{animation:none !important}
  html{scroll-behavior:auto !important}
}

/* Anchor links glide rather than jump. Suppressed above under reduced motion. */
html{scroll-behavior:smooth}

/* ============ nav ============ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-nav{position:sticky;top:0;z-index:50;background:transparent;transition:background 250ms var(--ease-out),border-color 250ms var(--ease-out);border-bottom:1px solid transparent}
.site-nav.is-solid{background:rgba(250,248,244,.92);backdrop-filter:blur(8px);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font:600 var(--t-small)/1 var(--f-ui);letter-spacing:.12em;text-decoration:none}
.logo-dot{color:var(--gold-tx)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font:500 var(--t-small)/1 var(--f-ui);text-decoration:none;color:var(--ink-2);transition:color 200ms var(--ease-out);position:relative}
/* Underline wipes in from the left. scaleX only. No layout, no paint. */
.nav-links a:not(.btn-ghost)::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out);
}
.nav-links .btn-ghost{color:var(--ink)}
.nav-toggle{display:none;font-size:20px}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:0 var(--gut) 24px;background:var(--paper);border-bottom:1px solid var(--line)}
.mobile-menu.is-open{display:flex}
.mobile-menu a{padding:12px 0;text-decoration:none;border-bottom:1px solid var(--line);font:500 var(--t-body)/1 var(--f-ui)}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:not(.btn-ghost):hover::after{transform:scaleX(1)}
}
@media (max-width:900px){
  .nav-links{flex-wrap:wrap}
  html.js .nav-links{display:none}
  html.js .nav-toggle{display:block}
}

/* ============ availability ============ */
.avail{background:var(--paper-2);border-bottom:1px solid var(--line)}
.avail p{margin:0;padding:11px var(--gut);text-align:center;font-size:var(--t-small);color:var(--ink-2)}
.avail strong{color:var(--ink);font-weight:600}
.avail a{color:var(--gold-tx);text-underline-offset:3px}

/* ============ hero ============ */
.hero{padding-top:clamp(36px,5vw,72px);border-top:0;position:relative;overflow:hidden;isolation:isolate}

/* Ambient drift behind the hero type.
   Deliberately NOT a GIF or video: three radial gradients animated on
   transform only. No filter, no background-position , both would force
   repaints every frame. This stays on the GPU compositor, so it costs
   almost nothing on a low-end phone. */
.hero-glow{position:absolute;inset:-25% -15%;z-index:-1;pointer-events:none;contain:strict}
.hero-glow i{
  position:absolute;display:block;width:46vw;height:46vw;border-radius:50%;
  will-change:transform;
  animation:drift 44s var(--ease-in-out) infinite alternate;
}
.hero-glow i:nth-child(1){
  top:-6%; left:-4%;
  background:radial-gradient(circle,rgba(232,213,200,.75),rgba(232,213,200,0) 68%);
}
.hero-glow i:nth-child(2){
  top:18%; right:-6%; animation-duration:58s; animation-delay:-12s;
  background:radial-gradient(circle,rgba(205,214,206,.62),rgba(205,214,206,0) 68%);
}
.hero-glow i:nth-child(3){
  bottom:-18%; left:26%; animation-duration:70s; animation-delay:-30s;
  background:radial-gradient(circle,rgba(227,213,220,.58),rgba(227,213,220,0) 68%);
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(6%,-4%,0) scale(1.12)}
}
/* Static on small screens , saves battery, and there is little room for it. */
@media (max-width:700px){
  .hero-glow i{animation:none;opacity:.7}
}

/* ============ inline CTA ============ */
.cta-inline{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid var(--line)}
.cta-inline p{margin:0;font-size:var(--t-lede);max-width:52ch}

/* ============ problem ============ */
.pain-list li{padding:22px 0;border-top:1px solid var(--line)}
.pain-list li:first-child{border-top:0;padding-top:0}
.pain-list h3{font:500 var(--t-lede)/1.3 var(--f-ui);margin-bottom:6px}

/* ============ footer ============ */
.footer{border-top:0}
.foot-links li{padding:5px 0}
.foot-links a{font-size:var(--t-small);text-decoration:none;color:rgba(250,248,244,.66);transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .foot-links a:hover{color:var(--paper)}
}

/* ============ services ============ */
.svc-head{margin-bottom:clamp(40px,6vw,80px);align-items:end}
.currency-row{display:flex;gap:6px;margin:10px 0 8px}
.currency-btn{
  padding:7px 13px;border:1px solid var(--line-strong);border-radius:2px;
  font:500 var(--t-fine)/1 var(--f-ui);color:var(--ink-2);
  transition:background 180ms var(--ease-out), border-color 180ms var(--ease-out),
             color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.currency-btn:active{transform:scale(0.97)}
.currency-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .currency-btn:hover{border-color:var(--gold)}
}

.track{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.track h3{margin:10px 0 12px}
.pkgs li{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.pkgs li:first-child{border-top:0}
.pkgs li div{flex:1}
.pkgs h4{font:500 var(--t-lede)/1.3 var(--f-ui);margin-bottom:4px}
.pkgs .muted{font-size:var(--t-small)}
.price-val{font:400 var(--t-h3)/1 var(--f-display);white-space:nowrap}
.per{font-size:var(--t-small);color:var(--ink-2)}
.pkgs li.flat .price-val{font-size:var(--t-lede)}

.anchor-pkg{margin-top:28px;padding:28px;background:var(--paper-2);border-left:2px solid var(--gold)}
.anchor-pkg h4{margin:8px 0 10px}
.price-lg{margin-top:14px}
.price-lg .price-val{font-size:var(--display-m)}

@media (max-width:600px){
  .pkgs li{flex-wrap:wrap;gap:8px}
  .price-val{font-size:var(--t-lede)}
}

.steps{margin-top:clamp(32px,5vw,56px)}
.steps li{padding-top:18px;border-top:1px solid rgba(250,248,244,.18)}
.steps h3{font:500 var(--t-lede)/1.3 var(--f-ui);margin:10px 0 8px}
@media (min-width:901px){ .steps .col-3{grid-column:span 3} }
@media (max-width:900px){ .steps li{grid-column:span 12} }

.stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
.stats dt{margin-bottom:4px}
.stats dd{margin:0;font-size:var(--t-small)}

.tools{margin-top:clamp(28px,4vw,48px);row-gap:26px}
.tools .mono{margin-top:7px;line-height:1.8;color:var(--ink)}

.creds{padding-block:var(--sect-y)}
.cred-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:12px}
.cred-row li{font-size:var(--t-small);color:var(--ink-2)}
.cred-row a{color:var(--ink-2);text-underline-offset:3px;transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .cred-row a:hover{color:var(--gold-tx)}
}

/* Arch frame, straight from the Clique Media reference. Softens a page
   otherwise built entirely from rectangles. */
.about-photo{border-radius:50% 50% 4px 4px / 28% 28% 4px 4px}

/* Small editorial star. Decorative only, so it is aria-hidden in markup. */
.mark{display:inline-block;color:var(--gold);font-size:.7em;vertical-align:.35em;margin:0 .15em}
.about-meta{margin-top:26px;display:grid;gap:14px}
.about-meta dd{margin:3px 0 0;font-size:var(--t-body)}

.faq-item{border-top:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;gap:18px;width:100%;padding:20px 0;text-align:left;font:500 var(--t-lede)/1.4 var(--f-ui)}
.faq-q[aria-expanded="true"] span{transform:rotate(45deg)}
.faq-q span{transition:transform 200ms var(--ease-out);color:var(--gold-tx);font-size:var(--t-h3)}
.faq-a{padding-bottom:20px;max-width:62ch}

/* ============ portfolio gate + gallery + lightbox ============ */
.gate-form{display:flex;gap:8px;margin:26px 0 12px;max-width:420px}
.gate-form input{flex:1;padding:14px 16px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper);font:400 var(--t-body) var(--f-ui)}
.gate-form input:focus-visible{border-color:var(--gold)}
.gate-err{color:#8A2B20;font-size:var(--t-small);margin-bottom:10px}

.gal-group{margin-top:clamp(36px,5vw,64px)}
.gal-group h2{margin-bottom:20px}
.gal{columns:2;column-gap:14px}
@media (min-width:700px){ .gal{columns:3} }
@media (min-width:1100px){ .gal{columns:4} }
.gal-item{margin:0 0 14px;break-inside:avoid}
.gal-btn{
  display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:2px;
  overflow:hidden;background:var(--paper-2);
  transition:border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.gal-btn:active{transform:scale(0.97)}
/* Images fade in on load so a 780KB first paint does not pop. */
.gal-btn img{opacity:0; transition:opacity 300ms var(--ease-out)}
.gal-btn img.is-loaded{opacity:1}
@media (hover:hover) and (pointer:fine){
  .gal-btn:hover{border-color:var(--gold)}
}
.gal-item figcaption{margin-top:6px}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(22,19,15,.94);display:flex;align-items:center;justify-content:center;padding:5vh 6vw}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain}
.lb-close{position:absolute;top:18px;right:22px;font-size:34px;line-height:1;color:var(--paper)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:46px;line-height:1;color:var(--paper);padding:16px}
.lb-prev{left:6px} .lb-next{right:6px}
.lb-cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(250,248,244,.72)}

/* ============================================================
   Editorial layout. Follows the Tiara Coaching and Serrina
   references: portrait beside the display type, taped polaroid
   stack, and service cards with real weight.
   ============================================================ */

/* ---- hero: centred type, cut-out figure standing in a colour ground ----
   Replaces the earlier type-left / portrait-right split. The photo is a
   transparent WebP with the studio backdrop lifted out (tools/cutout.swift),
   so the ground behind her is a palette token rather than a grey seamless. */
.hero{padding-bottom:0}
.hero-lead{text-align:center}
/* The headline breaks are authored in the markup, not left to the wrapper.
   At 132px a single reflowed word changes the whole silhouette, so no
   max-width and no text-wrap:balance here — the <br>s are the design. */
.hero-lead .lede{max-width:58ch;margin:clamp(18px,2.4vw,30px) auto 0;text-wrap:pretty}
.hero-ctas{margin-top:clamp(20px,2.2vw,28px)}
.hero-ctas .btn{margin-right:10px}

/* The stage is full-bleed: it sits outside .wrap so the colour runs edge to
   edge and hands off directly to the clay section below. */
.hero-stage{
  position:relative;display:flex;justify-content:center;align-items:flex-end;
  margin-top:clamp(20px,2.6vw,36px);
}
/* The ground starts BELOW the top of the figure, which is what makes her break
   out of it. Padding on .hero-stage cannot do this — it moves the ground and
   the figure down by the same amount, and she ends up flush with the edge. */
.hero-stage::before{
  content:'';position:absolute;left:0;right:0;bottom:0;
  top:clamp(56px,9vw,120px);
  background:var(--pink);
  border-radius:clamp(140px,26vw,320px) clamp(140px,26vw,320px) 0 0;
}
/* Decorative wordmark behind her, sized to run wider than she is so it still
   reads with her standing in front of it. Ink at 8% rather than a new palette
   entry: it tints with the ground instead of fighting it. Clipped by the
   hero's own overflow:hidden, which is intended. aria-hidden in markup. */
.hero-mark{
  position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
  z-index:1;pointer-events:none;user-select:none;white-space:nowrap;
  font:400 clamp(110px,28vw,400px)/1 var(--f-display);font-style:italic;
  letter-spacing:-.03em;color:rgba(42,27,18,.08);
}
/* Sized by height, not width: the source is cropped tight to the subject, so
   its width depends on the pose and cannot be relied on for layout. */
.hero-cut{
  position:relative;z-index:2;
  height:clamp(340px,54vw,660px);width:auto;display:block;
}
@media (max-width:640px){
  /* The authored breaks are tuned for a two-line desktop headline. Left in
     place at this width they collide with natural wrapping and strand
     "brand." and "rest." on lines of their own. The markup keeps a real space
     before the <br> — hiding the break alone runs the sentences together as
     "brand.Let", since the break was the only thing separating them. */
  .hero-lead h1 br{display:none}
  .hero-lead h1{text-wrap:balance}
  /* Sized so she is roughly half the viewport wide. At the desktop clamp she
     comes out about 127px across on a 375px screen, which reads as a sticker
     rather than a portrait. */
  .hero-cut{height:clamp(320px,126vw,470px)}
}

/* ---- full-bleed photo band with a colour wash over it ---- */
/* Plain dark ground. This used to be a full-bleed photo under a gradient
   wash; the photo showed through as a giant half-lit face behind the
   polaroids, which read as an accident rather than a layer. Kaella asked for
   it blank. --dark against --paper text is 14.6:1, so nothing else moves. */
.band{position:relative;overflow:hidden;border-top-color:transparent;background:var(--dark)}
.band > .wrap{position:relative;z-index:2}
.band, .band .display-l, .band h2, .band h3{color:var(--paper)}
.band .muted,.band .eyebrow,.band .lede{color:rgba(250,246,238,.78)}

/* ---- taped polaroid stack ---- */
.strip{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,20px);justify-content:center;margin-top:clamp(28px,4vw,44px)}
.polaroid{background:var(--paper);padding:10px 10px 34px;border-radius:2px;
  box-shadow:0 8px 24px rgba(42,27,18,.18);width:clamp(120px,20vw,190px);
  transition:transform 260ms var(--ease-out)}
.polaroid img{width:100%;height:auto;display:block;border-radius:1px}
.polaroid:nth-child(1){transform:rotate(-5deg)}
.polaroid:nth-child(2){transform:rotate(3deg) translateY(-8px)}
.polaroid:nth-child(3){transform:rotate(-2deg) translateY(6px)}
.polaroid:nth-child(4){transform:rotate(6deg)}
@media (hover:hover) and (pointer:fine){
  .polaroid:hover{transform:rotate(0deg) translateY(-6px) scale(1.03)}
}
@media (prefers-reduced-motion: reduce){ .polaroid{transition:none} }

/* ---- bold service cards ---- */
.svc-cards{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr;margin-top:clamp(28px,4vw,48px)}
@media (min-width:820px){ .svc-cards{grid-template-columns:repeat(3,1fr)} }
.svc-card{padding:clamp(24px,3vw,34px);border-radius:4px;background:var(--paper);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.svc-card .num{font:400 var(--display-m)/1 var(--f-display);color:var(--gold-tx);letter-spacing:-.02em}
.svc-card h3{font:500 var(--t-h3)/1.25 var(--f-ui)}
.svc-card ul{display:grid;gap:7px;margin-top:2px}
.svc-card li{font-size:var(--t-small);color:var(--ink-2);padding-left:16px;position:relative}
.svc-card li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.svc-card .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font:400 var(--display-m)/1 var(--f-display)}
/* Middle card carries the weight, like the reference pricing rows. */
.svc-card.feature{background:var(--ink);border-color:var(--ink)}
.svc-card.feature,.svc-card.feature h3,.svc-card.feature .price{color:var(--paper)}
.svc-card.feature li{color:rgba(250,246,238,.78)}
.svc-card.feature .num{color:var(--gold-lt)}
.svc-card.feature li::before{background:var(--gold-lt)}
.svc-card.feature .price{border-top-color:rgba(250,246,238,.24)}