/* ============================================================
   ROOMIFY · NOIR
   One stylesheet for the whole site:
   - the marketing landing (index.html)
   - the shared legal/support shell (.site / .legal classes)
   A stark gallery: gallery white ground, ink, hairline rules.
   The room photographs supply the only color.
   ============================================================ */

:root{
  --gallery:#FBFBF9;
  --ink:#0C0C0C;
  --hairline:#DADAD6;
  --ink-70:rgba(12,12,12,.66);
  --ink-50:rgba(12,12,12,.48);
  --ink-35:rgba(12,12,12,.34);
  --serif:'Bodoni Moda', serif;
  --sans:'Archivo', system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-curtain:cubic-bezier(.65,0,.35,1);
}

@property --pos{ syntax:'<percentage>'; inherits:true; initial-value:50%; }

*{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--gallery);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  background-image:radial-gradient(120% 60% at 50% -10%, rgba(12,12,12,.035), transparent 60%);
  background-attachment:fixed;
}

a{ color:var(--ink); text-decoration:none; }

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

:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

::selection{ background:var(--ink); color:var(--gallery); }

/* anchored sections land below the sticky header */
section[id]{ scroll-margin-top:80px; }

/* ---------- type scale ---------- */
.t-display{ font-family:var(--serif); font-weight:700; line-height:.9; letter-spacing:-.015em; }
.t-title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.02; letter-spacing:-.005em; }
.t-heading{ font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2.4vw,1.35rem); line-height:1.1; }
.t-body{ font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.5; color:var(--ink-70); }
.t-label{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; }
.t-caption{ font-family:var(--sans); font-weight:400; font-size:12px; line-height:1.45; letter-spacing:.01em; color:var(--ink-70); }
.ital{ font-style:italic; }

.ico{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; display:block; }

.dot{ width:3px; height:3px; background:var(--ink-35); border-radius:50%; display:inline-block; margin:0 8px; vertical-align:middle; }

/* ---------- container ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,40px); }

/* ---------- scroll reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* staggered variant: children of a grid rise one after another */
.js .reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal-stagger.in > *{ opacity:1; transform:none; }
.js .reveal-stagger > *:nth-child(2){ transition-delay:.07s; }
.js .reveal-stagger > *:nth-child(3){ transition-delay:.14s; }
.js .reveal-stagger > *:nth-child(4){ transition-delay:.21s; }
.js .reveal-stagger > *:nth-child(5){ transition-delay:.28s; }
.js .reveal-stagger > *:nth-child(6){ transition-delay:.35s; }
.js .reveal-stagger > *:nth-child(7){ transition-delay:.42s; }
.js .reveal-stagger > *:nth-child(8){ transition-delay:.49s; }

/* hero entrance — page-load choreography, gated on .js so no-JS renders instantly */
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.js .hero .eyebrow{ animation:riseIn .8s var(--ease) both; }
.js .hero .eyebrow-rule{ animation:riseIn .8s var(--ease) .08s both; }
.js .hero h1{ animation:riseIn .9s var(--ease) .16s both; }
.js .hero .hero-sub{ animation:riseIn .9s var(--ease) .3s both; }
.js .hero .hero-art{ animation:riseIn 1s var(--ease) .22s both; }
.js .hero .hero-cta{ animation:riseIn .9s var(--ease) .42s both; }
.js .hero .index-strip{ animation:riseIn .9s var(--ease) .55s both; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.appstore-badge{
  display:inline-flex; align-items:center; gap:13px;
  min-height:58px; padding:0 22px; border-radius:0;
  background:var(--ink); color:var(--gallery);
  transition:transform .35s var(--ease), opacity .3s ease;
}
.appstore-badge[aria-disabled="true"]{ cursor:default; }
.appstore-badge:active{ transform:scale(.978); opacity:.94; }
.appstore-badge .glyph{ width:24px; height:24px; stroke:var(--gallery); stroke-width:1.5; fill:none; flex:0 0 auto; }
.appstore-badge .bt-lines{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.appstore-badge .bt-small{ font-family:var(--sans); font-weight:600; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,251,249,.8); }
.appstore-badge .bt-big{ font-family:var(--serif); font-weight:600; font-size:18px; margin-top:3px; }
.appstore-badge:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.linkbtn{
  display:inline-flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); padding:8px 0;
}
.linkbtn .ico{ width:16px; height:16px; transition:transform .4s var(--ease); }
.linkbtn:hover .ico, .linkbtn:focus-visible .ico{ transform:translateX(4px); }

/* wall-label section header */
.wall{ border-top:1px solid var(--ink); padding-top:16px; margin-bottom:clamp(32px,5vh,56px); }
.wall .kick{ display:block; color:var(--ink-70); margin-bottom:14px; }
.wall .wall-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.wall h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,4.4vw,2.6rem); line-height:1.02; letter-spacing:-.01em; max-width:18ch; }
.wall .aside{ color:var(--ink-70); }

/* ============================================================
   COMPARE (before / after)
   ============================================================ */
.compare{ --pos:50%; position:relative; overflow:hidden; background:var(--hairline); user-select:none; touch-action:pan-y; }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.cmp-after{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:1.5px; background:var(--gallery); transform:translateX(-50%); box-shadow:0 0 0 .5px rgba(12,12,12,.28); z-index:6; }
.cmp-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 10px rgba(12,12,12,.35)); }
.compare{ cursor:ew-resize; }
.compare.grab{ cursor:grabbing; }
.cmp-tag{ position:absolute; top:14px; z-index:7; font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:.24em; color:var(--gallery); background:rgba(12,12,12,.5); padding:6px 9px; backdrop-filter:blur(7px); }
.cmp-tag--after{ left:14px; }
.cmp-tag--before{ right:14px; }

@keyframes heroWipe{
  0%, 7%   { --pos:18%; }
  46%, 56% { --pos:82%; }
  93%,100% { --pos:18%; }
}
.compare--auto{ animation:heroWipe 8.5s var(--ease-curtain) infinite; }
/* invite interaction: the auto-wipe yields the moment the cursor arrives */
.compare--auto:hover, .compare--auto:focus-visible{ animation-play-state:paused; }

/* ============================================================
   LANDING · HEADER
   ============================================================ */
.gallery-head{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,249,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.gallery-head .head-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.wordmark{ font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:.34em; color:var(--ink); padding-right:.34em; }
.gallery-head nav{ display:flex; align-items:center; gap:28px; }
.gallery-head nav a{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-70); }
.gallery-head nav a:hover{ color:var(--ink); }
.gallery-head nav a:focus-visible{ text-decoration:underline; text-underline-offset:4px; }
.gallery-head nav a.active{ color:var(--ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }

/* ============================================================
   LANDING · HERO
   ============================================================ */
.hero{ padding-top:clamp(72px,12vh,140px); padding-bottom:clamp(40px,6vh,64px); }
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"copy art" "cta art";
  column-gap:clamp(28px,4vw,64px);
  align-items:start;
}
.hero-copy{ grid-area:copy; position:relative; z-index:2; }
.hero-cta{ grid-area:cta; margin-top:clamp(24px,4vh,36px); }
.hero-art{ grid-area:art; position:relative; z-index:1; margin-top:clamp(8px,4vh,40px); }

.eyebrow{ color:var(--ink-70); display:block; }
.eyebrow-rule{ width:56px; height:1px; background:var(--ink); margin:14px 0 22px; }
.hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,8vw,5rem); line-height:.9; letter-spacing:-.015em; min-height:calc(clamp(2.4rem,8vw,5rem) * 1.8); }
.hero h1 .ital{ font-weight:500; }
.hero-sub{ font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.5; color:var(--ink-70); max-width:34ch; margin-top:clamp(20px,3vh,28px); }

.hero-cta .appstore-badge{ display:inline-flex; }
.hero-cta .linkbtn{ display:flex; margin-top:14px; }

.hero-art .compare{ aspect-ratio:3/2; box-shadow:0 24px 40px -28px rgba(12,12,12,.5); }
.hero-art .cmp-handle .hk{ width:44px; height:44px; }
.hero-cap{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--hairline); margin-top:14px; padding-top:12px; }
.hero-cap .plate{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:14px; color:var(--ink-70); }

/* tool index strip — an editorial ledger line closing the hero */
.index-strip{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px 28px; flex-wrap:wrap;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--hairline);
  margin-top:clamp(40px,6vh,64px); padding-block:14px;
}
.index-strip .strip-lead{ color:var(--ink); }
.index-strip .strip-items{ color:var(--ink-70); font-weight:600; letter-spacing:.2em; line-height:2; }
.index-strip .dot{ margin:0 6px; }

/* ============================================================
   LANDING · HOW IT WORKS
   ============================================================ */
.section{ padding-block:clamp(64px,9vh,110px); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); }
.step{ }
.step:not(:first-child){ border-left:1px solid var(--hairline); padding-left:clamp(20px,3vw,40px); }
.step:not(:last-child){ padding-right:clamp(20px,3vw,40px); }
.step .ico{ width:22px; height:22px; color:var(--ink); }
.step .num{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.6rem,3vw,2.2rem); margin:18px 0 10px; }
.step .lbl{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:8px; }
.step p{ font-family:var(--sans); font-weight:400; font-size:14px; line-height:1.5; color:var(--ink-70); }
.how-foot{ margin-top:clamp(28px,4vh,40px); }

/* ============================================================
   LANDING · THE STUDIO (SIX TOOLS)
   ============================================================ */
.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px); }
.tool-card{
  display:flex; flex-direction:column;
  border:1px solid var(--hairline); background:var(--gallery);
  padding:clamp(18px,2.4vw,26px);
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tool-card:hover{
  border-color:var(--ink);
  transform:translateY(-4px);
  box-shadow:0 20px 32px -26px rgba(12,12,12,.45);
}
.tool-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tool-card .ico{ width:22px; height:22px; color:var(--ink); }
.tool-index{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink-35); line-height:1; }
.tool-name{ font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.4rem); line-height:1.08; margin-top:clamp(14px,2vh,20px); }
.tool-tag{ font-family:var(--sans); font-weight:400; font-size:14px; line-height:1.55; color:var(--ink-70); margin-top:8px; flex:1; }
.tool-foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--hairline); margin-top:16px; padding-top:12px;
  color:var(--ink-70);
}
.swatches{ display:inline-flex; gap:5px; }
.swatch{ width:13px; height:13px; box-shadow:inset 0 0 0 1px rgba(12,12,12,.14); }
.studio-foot{ margin-top:clamp(24px,4vh,36px); }

/* ============================================================
   LANDING · STYLES GRID
   ============================================================ */
.style-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,20px); }
.style-card{ position:relative; background:var(--hairline); overflow:hidden; }
.style-card .ph{ position:relative; aspect-ratio:1/1.04; overflow:hidden; background:var(--hairline); }
.style-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.style-card:hover img, .style-card:focus-within img{ transform:scale(1.04); }
.style-grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 38%, rgba(12,12,12,.78)); }
.style-index{ position:absolute; top:11px; left:11px; z-index:3; font-family:var(--serif); font-style:italic; font-weight:500; font-size:13px; color:var(--gallery); background:rgba(12,12,12,.5); backdrop-filter:blur(6px); padding:3px 8px; }
.style-meta{ position:absolute; left:13px; right:13px; bottom:12px; z-index:2; }
.style-meta .nm{ font-family:var(--serif); font-weight:600; font-size:clamp(1rem,2vw,1.25rem); color:var(--gallery); line-height:1.05; }
.style-meta .tg{ font-family:var(--sans); font-weight:600; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gallery); display:block; margin-top:6px; }

/* ============================================================
   LANDING · PRICING
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); }
.plan-entry{ position:relative; }
.plan-entry:not(:first-child){ border-left:1px solid var(--hairline); padding-left:clamp(20px,3vw,40px); }
.plan-entry:not(:last-child){ padding-right:clamp(20px,3vw,40px); }
.plan-entry .pname{ font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2.4vw,1.35rem); line-height:1.1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.plan-figure{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; margin:14px 0 8px; }
.plan-unit{ font-family:var(--sans); font-weight:400; font-size:14px; color:var(--ink-70); }
.plan-note{ margin-top:6px; }
.plan-marker{ font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70); margin-top:12px; display:block; }
.tag-ink{ display:inline-block; background:var(--ink); color:var(--gallery); font-family:var(--sans); font-weight:600; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; padding:5px 9px; }
.pricing-foot{ margin-top:clamp(32px,5vh,48px); max-width:64ch; }
.pricing-foot .appstore-badge{ margin-top:22px; }

/* ============================================================
   LANDING · PRIVACY STRIP
   ============================================================ */
.privacy{ border-top:1px solid var(--hairline); padding-block:clamp(40px,6vh,72px); }
.privacy .privacy-inner{ display:flex; align-items:flex-start; gap:18px; }
.privacy .ico{ width:20px; height:20px; color:var(--ink); flex:0 0 auto; margin-top:2px; }
.privacy .kick{ display:block; color:var(--ink-70); margin-bottom:8px; }
.privacy p{ font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.5; color:var(--ink-70); max-width:62ch; }
.privacy p a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ============================================================
   LANDING · CLOSING PLATE
   ============================================================ */
.closing{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding-block:clamp(80px,14vh,150px); text-align:center; }
.closing-inner{ max-width:640px; margin:0 auto; }
.closing h2{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,6vw,3.6rem); line-height:.95; letter-spacing:-.01em; }
.closing h2 .ital{ font-weight:500; }
.closing-sub{ font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.5; color:var(--ink-70); margin:clamp(20px,3vh,28px) auto 0; max-width:46ch; }
.closing .appstore-badge{ margin-top:clamp(28px,4vh,36px); }
.closing-cap{ margin-top:18px; }

/* ============================================================
   SHARED LEGAL / SUPPORT SHELL (header.site, .brand, nav.site,
   main.legal, footer.site) — restyled into Noir. Do NOT remove.
   ============================================================ */
header.site{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:18px clamp(20px,5vw,40px);
  border-bottom:1px solid var(--hairline);
}
a.brand, .brand{
  font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:.28em;
  color:var(--ink); text-transform:uppercase;
}
.brand span{ color:inherit; }
nav.site{ display:flex; align-items:center; gap:24px; }
nav.site a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-70); margin:0;
}
nav.site a:hover{ color:var(--ink); }
nav.site a:focus-visible{ text-decoration:underline; text-underline-offset:4px; }

main.legal{ padding:clamp(40px,7vh,72px) 0 clamp(64px,10vh,96px); }
main.legal .wrap{ max-width:760px; }
main.legal h1{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.02; letter-spacing:-.01em; }
main.legal h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.2rem,2.6vw,1.45rem); line-height:1.1; margin-top:clamp(32px,5vh,44px); padding-top:18px; border-top:1px solid var(--hairline); }
main.legal p{ font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.6; color:var(--ink-70); margin-top:14px; }
main.legal .updated{ font-family:var(--sans); font-size:12px; color:var(--ink-70); letter-spacing:.01em; margin-top:8px; }
main.legal ul{ padding-left:20px; margin-top:14px; }
main.legal li{ font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink-70); margin:6px 0; }
main.legal em{ font-family:var(--serif); font-style:italic; color:var(--ink); }
main.legal strong{ font-family:var(--sans); font-weight:600; color:var(--ink); }
main.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

footer.site{ border-top:1px solid var(--hairline); padding:28px 0; margin-top:auto; }
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center; }
footer.site span, footer.site{ font-family:var(--sans); font-weight:400; font-size:13px; color:var(--ink-70); letter-spacing:.01em; }
footer.site a{ color:var(--ink); }
footer.site a:hover{ text-decoration:underline; text-underline-offset:3px; }
.foot-mark{ font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-70); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; grid-template-areas:"copy" "art" "cta"; }
  .hero-cta{ margin-top:clamp(20px,4vh,32px); }
  .hero-art{ margin-top:clamp(20px,4vh,32px); }
  .hero-art .compare{ aspect-ratio:auto; height:clamp(360px,72vw,520px); }
}

@media (max-width:900px){
  .style-grid{ grid-template-columns:repeat(2,1fr); }
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
  .tools-grid{ grid-template-columns:1fr; }
  .tool-card{ min-height:0; }
  .index-strip .strip-items{ letter-spacing:.14em; }
  .index-strip .dot{ margin:0 8px; }
}

@media (max-width:780px){
  .plans{ grid-template-columns:1fr; }
  .plan-entry:not(:first-child){ border-left:none; padding-left:0; border-top:1px solid var(--hairline); padding-top:24px; margin-top:24px; }
  .plan-entry:not(:last-child){ padding-right:0; }
}

@media (max-width:720px){
  .steps{ grid-template-columns:1fr; }
  .step:not(:first-child){ border-left:none; padding-left:0; border-top:1px solid var(--hairline); padding-top:24px; margin-top:24px; }
  .step:not(:last-child){ padding-right:0; }
}

@media (max-width:560px){
  .gallery-head nav a.hide-sm{ display:none; }
  .gallery-head nav{ gap:20px; }
  nav.site{ gap:16px; }
}

@media (max-width:480px){
  .eyebrow{ font-size:9.5px; letter-spacing:.16em; }
}

@media (max-width:380px){
  .wordmark{ letter-spacing:.22em; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .compare--auto{ animation:none; --pos:50%; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .hero .eyebrow, .js .hero .eyebrow-rule, .js .hero h1, .js .hero .hero-sub,
  .js .hero .hero-art, .js .hero .hero-cta, .js .hero .index-strip{ animation:none; }
  .style-card:hover img, .style-card:focus-within img{ transform:none; }
  .tool-card, .tool-card:hover{ transition:none; transform:none; }
  .linkbtn .ico, .appstore-badge{ transition:none; }
}