/* Yoga With Ishwarya. Tokens from brand.md */
:root{
  --canvas:#E9E7DF;--paper:#F5F3ED;--sunken:#E2E0D7;--ink:#171A17;--ink-soft:#3F433D;--muted:#5C6058;
  --lime:#DDEE3A;--lime-tint:#E4EC98;--sage:#CBD2B4;--blush:#E7CBC5;--on-ink:#F5F3ED;--on-ink-muted:#B9BCB1;
  --ink-dim:#62665F;--line:rgba(23,26,23,.14);--line-strong:#7C8076;
  --glass-light:rgba(245,243,237,.76);--glass-dark:rgba(23,26,23,.82);--glass-border:rgba(255,255,255,.5);
  --serif:'Newsreader',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --r-md:16px;--r-lg:24px;--r-xl:32px;--gap:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/22px var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;color:var(--ink)}
h1{font-size:clamp(40px,8vw,64px);line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.015em}
h3{font-size:24px;line-height:28px;letter-spacing:-.005em}
h4{font:500 16px/22px var(--sans)}
p{margin:0}
em{font-style:italic}
.mark{background:linear-gradient(#DDEE3A,#DDEE3A) no-repeat 0 94%/100% .2em}
.lead{font-size:17px;line-height:26px;color:var(--ink-soft)}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:19px}
.eyebrow{font:400 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.sec{padding:28px 0}
.sec-head{display:grid;gap:10px;margin-bottom:24px;max-width:720px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--on-ink);padding:8px 16px;border-radius:999px;z-index:100}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card-ink :focus-visible,.photo :focus-visible,.on-ink :focus-visible{outline-color:var(--lime)}
.tk{background:var(--lime-tint);color:var(--ink);font:400 12px/16px var(--mono);padding:1px 6px;border-radius:6px;white-space:normal}

/* header */
.site-header{position:sticky;top:12px;z-index:50;padding:12px 16px 0}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass-light);border:1px solid var(--glass-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 2px rgba(23,26,23,.06),0 8px 24px rgba(23,26,23,.08);position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 20px/1 var(--serif);white-space:nowrap}
.brand-disc{width:24px;height:24px;border-radius:50%;background:var(--ink);display:inline-block}
.nav-links{display:none;list-style:none;margin:0 auto;padding:0;gap:2px}
.nav-links a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font:500 14px/20px var(--sans);color:var(--ink-soft);transition:background .16s ease,color .16s ease}
.nav-links a:hover{background:var(--sunken)}
.nav-links a[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.nav .nav-cta{display:none}
.menu-btn{margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--sunken);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.menu-panel{display:none;position:absolute;left:0;right:0;top:64px;background:var(--paper);border-radius:var(--r-lg);padding:12px;box-shadow:0 8px 24px rgba(23,26,23,.12)}
.nav.open .menu-panel{display:grid;gap:2px}
.menu-panel a{padding:12px 16px;border-radius:999px;text-decoration:none;font:500 16px/22px var(--sans)}
.menu-panel a[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.menu-panel .btn{margin-top:8px;justify-content:center}
@media(min-width:1100px){.nav-links{display:flex}.nav .nav-cta{display:inline-flex}.menu-btn{display:none}.menu-panel{display:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;border:1px solid transparent;font:500 15px/20px var(--sans);text-decoration:none;cursor:pointer;transition:background .16s ease,transform .16s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-lg{height:56px;padding:0 32px;font-size:17px}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-lime{background:var(--lime);color:var(--ink)}.btn-lime:hover{background:#d2e32f}
.btn-ink{background:var(--ink);color:var(--on-ink)}.btn-ink:hover{background:#2c312c}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}.btn-outline:hover{background:var(--paper)}
.btn svg{width:16px;height:16px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);flex:none}
.icon-btn svg{width:20px;height:20px}
svg.i{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* chips */
.chip{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;font:500 13px/16px var(--sans)}
.chip-lime{background:var(--lime);color:var(--ink)}
.chip-outline{border:1px solid var(--line-strong)}
.chip-ink{background:rgba(255,255,255,.1);color:var(--on-ink)}
.chip-glass{background:var(--glass-light);border:1px solid var(--glass-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* cards */
.grid{display:grid;gap:var(--gap)}
.card{background:var(--paper);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px}
.card-xl{border-radius:var(--r-xl);padding:28px}
.card-sunken{background:var(--sunken)}
.card-ink{background:var(--ink);color:var(--on-ink)}
.card-ink h2,.card-ink h3,.card-ink h4{color:var(--on-ink)}
.card-ink .lead,.card-ink p{color:var(--on-ink-muted)}
.card-ink .eyebrow{color:var(--on-ink-muted)}
.card-lime{background:var(--lime-tint)}
.card-sage{background:var(--sage)}.card-sage .eyebrow,.card-blush .eyebrow{color:var(--ink-soft)}
.card-blush{background:var(--blush)}
.card .btns{margin-top:auto;padding-top:12px}
.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
@media(min-width:800px){.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cols-4{grid-template-columns:repeat(4,1fr)}}
.split{grid-template-columns:1fr}
@media(min-width:800px){.split{grid-template-columns:7fr 5fr}.split-r{grid-template-columns:5fr 7fr}}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:7px}
.card-ink .ticks li::before{background:var(--lime)}
.tile{min-height:136px;justify-content:space-between}
.num{font:400 40px/40px var(--serif);letter-spacing:-.01em}
.num-xl{font:400 clamp(48px,9vw,64px)/60px var(--serif);letter-spacing:-.02em}
.num-xl small{font:400 17px/22px var(--sans);color:var(--on-ink-muted);letter-spacing:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.label{font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card-lime .label{color:var(--ink-soft)}
.pillar-label{font:italic 400 24px/28px var(--serif);color:var(--lime)}
.quote{font:400 24px/30px var(--serif);letter-spacing:-.005em}
.quote-by{font:500 14px/20px var(--sans);color:var(--ink-soft)}
.rows{display:grid;gap:8px}
.rowitem{background:var(--sunken);border-radius:var(--r-lg);padding:16px 20px;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;align-items:baseline}
.notice{display:flex;gap:12px;align-items:flex-start;background:var(--lime-tint);border-radius:var(--r-lg);padding:20px}
.notice .icon-btn{width:44px;height:44px}

/* photos */
.photo{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--sunken);min-height:380px;isolation:isolate}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-tall{min-height:520px}
.photo-sm{border-radius:var(--r-md);min-height:0;aspect-ratio:4/3}
.photo-sm.sq{aspect-ratio:1/1}
.scrim-edge{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(23,26,23,0) 55%,rgba(23,26,23,.28) 100%)}
.scrim-top{position:absolute;left:0;right:0;top:0;height:25%;background:linear-gradient(0deg,rgba(23,26,23,0) 0%,rgba(23,26,23,.40) 100%)}
.scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(180deg,rgba(23,26,23,0) 0%,rgba(23,26,23,.55) 35%,rgba(23,26,23,.72) 55%,rgba(23,26,23,.88) 100%)}
.on-photo{position:absolute;left:24px;right:24px;bottom:24px;color:var(--on-ink);display:grid;gap:8px}
.on-photo h2,.on-photo h3,.on-photo p{color:var(--on-ink)}
.chip-tl{position:absolute;top:16px;left:16px}
.glass-card{position:absolute;left:12px;right:12px;bottom:12px;background:var(--glass-light);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 2px rgba(23,26,23,.06),0 8px 24px rgba(23,26,23,.08)}
.glass-card strong{display:block;font:500 16px/22px var(--sans)}
.glass-card span.m{display:block;font:400 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glass-card span.s{display:block;font-size:13px;line-height:19px;color:var(--ink-soft)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pair figure{margin:0;display:grid;gap:6px}
.pair img{border-radius:var(--r-md);aspect-ratio:4/3;object-fit:cover;width:100%}
.pair figcaption{font:400 12px/16px var(--sans);color:var(--muted)}
.card-ink .pair figcaption{color:var(--on-ink-muted)}
.hero-grid{grid-template-columns:1fr}
.hero-grid .photo{min-height:480px}
@media(min-width:800px){.hero-grid{grid-template-columns:7fr 5fr}.hero-grid .photo{min-height:620px}}
.hero-side{display:grid;gap:var(--gap);align-content:start}
.page-hero{padding-top:20px}
.page-hero .card-xl{padding:32px 28px}
@media(min-width:800px){.page-hero .card-xl{padding:48px 40px}}


/* class times in the visitor's timezone */
[hidden]{display:none!important}
.tz{margin-bottom:var(--gap)}
.tz-bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--paper);border-radius:999px;padding:8px 8px 8px 24px}
.tz-pick{display:flex;align-items:center;gap:12px}
.tz-lab{font:400 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tz select{font:500 15px/20px var(--sans);color:var(--ink);background:var(--canvas);border:1px solid var(--line-strong);border-radius:999px;padding:10px 40px 10px 16px;width:auto;max-width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171A17' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
@media(max-width:560px){.tz-bar{border-radius:var(--r-lg);padding:16px}.tz-pick{flex-direction:column;align-items:flex-start;width:100%;gap:6px}.tz select{width:100%}}
.class-card{gap:8px;min-height:230px}
.class-card h3{margin-top:4px}
.class-when{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:6px;justify-items:start}
.tz-time{font:400 22px/28px var(--serif);letter-spacing:-.01em}
.tz-shift{background:var(--lime-tint);border-radius:999px;padding:2px 10px;font:500 12px/18px var(--sans)}

/* lean home */
.facts{list-style:none;margin:0;padding:0;display:grid}
.facts li{display:grid;gap:2px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.facts li:first-child{border-top:0}
.facts strong{font:400 26px/30px var(--serif);color:var(--on-ink);letter-spacing:-.005em}
.facts span{color:var(--on-ink-muted)}
.card-ink .btn-outline{color:var(--on-ink);border-color:var(--ink-dim)}
.card-ink .btn-outline:hover{background:rgba(255,255,255,.08)}
.ba{gap:10px;padding:16px}
.ba .pair{gap:6px}
.ba .pair img{aspect-ratio:4/3;border-radius:var(--r-md);object-fit:cover;width:100%}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--gap)}
.strip .photo{min-height:0;aspect-ratio:1/1;border-radius:var(--r-lg)}
.hero-grid>.hero-side{display:flex;flex-direction:column}
.hero-grid>.hero-side>.card{flex:1}
.hero-grid .card .btns{margin-top:24px;padding-top:0}

/* faq */
details{background:var(--paper);border-radius:var(--r-lg);padding:0}
details+details{margin-top:8px}
summary{list-style:none;cursor:pointer;padding:20px 24px;font:500 17px/24px var(--sans);display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 28px/1 var(--serif);flex:none;transition:transform .16s ease}
details[open] summary::after{transform:rotate(45deg)}
details .ans{padding:0 24px 20px;color:var(--ink-soft);display:grid;gap:8px}

/* form */
form{display:grid;gap:14px}
label{display:grid;gap:6px;font:500 14px/20px var(--sans)}
input,textarea{font:400 16px/24px var(--sans);color:var(--ink);background:var(--canvas);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:12px 16px;width:100%}
.form-msg{font-size:14px;line-height:20px;min-height:20px}

/* footer */
.site-footer{margin-top:28px;padding:0 16px 96px}
.footer-card{max-width:1200px;margin:0 auto;background:var(--sunken);border-radius:var(--r-xl);padding:32px 28px;display:grid;gap:28px}
@media(min-width:800px){.footer-card{grid-template-columns:1.3fr 1fr 1fr;padding:40px}}
.footer-card h4{margin-bottom:8px;font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.footer-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-card a{text-decoration:none}.footer-card a:hover{text-decoration:underline}
.footer-logo{width:150px}
.footer-base{max-width:1200px;margin:12px auto 0;padding:0 8px;color:var(--muted);font-size:12px;line-height:16px}
.wa{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;box-shadow:0 8px 32px rgba(23,26,23,.14);z-index:60;transition:transform .16s ease}
.wa:hover{transform:scale(1.05)}.wa:focus-visible{outline-color:var(--lime)}
.wa svg{width:24px;height:24px}

/* motion: only when the visitor has not asked for reduced motion */
@media(prefers-reduced-motion:no-preference){
  .anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .anim .reveal.in{opacity:1;transform:none}
  .anim .reveal.d1{transition-delay:.08s}.anim .reveal.d2{transition-delay:.16s}
  .photo>img{animation:settle 1.4s ease-out both}
  @keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
  .card{transition:transform .2s ease}
  a.card:hover{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* one page, each section fits one phone screen */
.nav-soon{display:flex;align-items:center;gap:6px;padding:8px 12px;font:500 14px/20px var(--sans);color:var(--muted);cursor:default}
.nav-soon small{font:400 10px/14px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--sunken);border-radius:999px;padding:1px 8px}
.menu-panel .nav-soon{padding:12px 16px;font-size:16px;line-height:22px}
.sec-tight{padding:20px 0}
.mini{padding:16px;gap:6px;border-radius:var(--r-lg)}
.mini h3{font-size:20px;line-height:24px}
.mini p{font-size:14px;line-height:20px}
.mini .label{margin-bottom:2px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media(min-width:800px){.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
.g4,.g3{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.hero-copy h1{font-size:clamp(36px,9vw,64px)}
.swipe{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{flex:0 0 82%;scroll-snap-align:start;margin:0}
@media(min-width:800px){.swipe{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.swipe>*{flex:none}}
.swipe .quote{font-size:20px;line-height:26px}
.hint{font:400 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media(min-width:800px){.hint{display:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-line{background:var(--sunken)}
.cta-pair{display:grid;gap:var(--gap)}
@media(min-width:800px){.cta-pair{grid-template-columns:1fr 1fr}}
.contact-grid{display:grid;gap:var(--gap)}
@media(min-width:800px){.contact-grid{grid-template-columns:7fr 5fr}}
.links-row{display:flex;flex-wrap:wrap;gap:8px}
/* pricing */
.plans{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:800px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:20px;gap:8px}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.plan h2{font:500 20px/24px var(--sans)}
.plan .price{font:400 40px/40px var(--serif);letter-spacing:-.01em}
.plan .price small{font:400 15px/20px var(--sans);color:var(--muted);letter-spacing:0}
.card-ink .plan .price small,.plan.card-ink .price small{color:var(--on-ink-muted)}
.plan .total{color:var(--ink-soft)}
.plan.card-ink .total{color:var(--on-ink-muted)}
.plan .btn{align-self:flex-start;margin-top:4px}
.seg{display:inline-flex;background:var(--sunken);border-radius:999px;padding:4px;gap:2px}
.seg button{border:0;background:transparent;font:500 14px/20px var(--sans);padding:8px 16px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.meta-line{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;color:var(--ink-soft)}
/* phone: tighter so each section fits one screen */
@media(max-width:799px){
  .sec{padding:16px 0}
  .sec-head{gap:6px;margin-bottom:14px}
  h2{font-size:30px}
  .lead{font-size:16px;line-height:24px}
  .card-xl{padding:20px}
  .hero-grid .photo{min-height:0;height:34svh}
  .hero-grid{gap:var(--gap)}
  .photo-about{min-height:0;height:26svh}
  .class-card{min-height:0;padding:14px;gap:4px}
  .class-card h3{font-size:18px;line-height:22px}
  .class-card .muted{font-size:13px;line-height:18px}
  .tz-time{font-size:17px;line-height:22px}
  .class-when{padding-top:8px}
  .tz{margin-bottom:8px}
  .tz-bar{padding:12px}
  #class-grid{grid-template-columns:1fr 1fr}
  .btns{margin-top:16px}
  .page-hero .card-xl{padding:20px}
}

.card-ink .price,.plan.card-ink .price{color:var(--on-ink)}
@media(max-width:799px){
  summary{padding:14px 18px;font-size:16px;line-height:22px}
  details .ans{padding:0 18px 14px}
  form{gap:10px}
  input,textarea{padding:10px 14px}
  label{gap:4px}
  #contact .btn-lg{height:52px}
  #how-we-do-it .sec-head .lead{font-size:15px;line-height:22px}
}

/* icons */
.mini-h{display:flex;align-items:center;gap:10px}
.ico{flex:none;width:36px;height:36px;border-radius:50%;background:var(--lime-tint);color:var(--ink);display:grid;place-items:center}
.ico svg{width:20px;height:20px}
.ico-sm{width:30px;height:30px}.ico-sm svg{width:17px;height:17px}
.cc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mini h3{margin:0}
@media(max-width:799px){.mini-h{gap:8px}.ico{width:32px;height:32px}.ico svg{width:18px;height:18px}.mini h3{font-size:19px;line-height:22px}}
@media(max-width:799px){.tz-time{font-size:15px;line-height:20px;white-space:nowrap}.class-card .label{letter-spacing:.08em;font-size:11px}}
@media(max-width:799px){.photo-about{height:20svh}#about .card-xl{gap:8px}#about p{font-size:15px;line-height:22px}}
@media(max-width:799px){.photo-about{height:15svh}#about .chips{gap:6px}#about .chip{height:28px;padding:0 12px;font-size:12px}}

/* testimonials: image cards big, text cards small */
.swipe{align-items:stretch}
.swipe .ba{flex:0 0 92%;padding:14px}
.swipe .ba .pair{gap:6px}
.swipe .ba .pair img{aspect-ratio:1/1}
.swipe .qcard{flex:0 0 58%;padding:14px;gap:6px;justify-content:center}
.swipe .qcard .quote{font-size:16px;line-height:22px}
.swipe .qcard .quote-by{font-size:13px}
@media(min-width:800px){
  .swipe{grid-template-columns:repeat(3,1fr)}
  .swipe .ba{order:1;flex:none;padding:16px}
  .swipe .qcard{order:2;flex:none;padding:16px}
  .swipe .qcard .quote{font-size:17px;line-height:24px}
}
@media(max-width:799px){.mini-h{flex-direction:column;align-items:flex-start;gap:8px}.mini h3{font-size:18px;line-height:22px}}

/* logo lockup: lotus mark + Newsreader wordmark */
.mark-svg{flex:none;width:40px;height:40px;display:block}
.brand{font-size:21px;letter-spacing:-.02em;gap:10px}
.brand em{font-style:italic}
.brand-foot{font-size:24px}
@media(max-width:379px){.brand{font-size:18px}.mark-svg{width:34px;height:34px}}

/* colour roles from the brand: blush problems, ink solution, sage about, lime-tint offers */
.card-blush h3,.card-sage h2{color:var(--ink)}
.card-blush p,.card-blush .muted,.card-sage p,.card-sage .muted{color:var(--ink-soft)}
.card-blush .ico{background:var(--paper)}
.card-sage .chip-line{background:var(--paper)}
.card-sage .btns .btn-outline{border-color:var(--ink-soft)}
.solve-card{padding:16px;gap:0}
.solve-card .g2{gap:10px}
.mini-ink{background:rgba(255,255,255,.07);border-radius:var(--r-lg)}
.mini-ink h3{color:var(--on-ink)}
.mini-ink p,.mini-ink .muted{color:var(--on-ink-muted)}
.mini-ink .ico{background:var(--lime);color:var(--ink)}
.card-ink .lead{color:var(--on-ink-muted)}
.card-ink .btn-lime{color:var(--ink)}
details[open]{background:var(--lime-tint)}
details[open] .ans{color:var(--ink-soft)}
.card-lime p.lead{color:var(--ink-soft)}
/* why cards: simple motion, off for reduced motion */
.why-grid .mini{transition:transform .2s ease}
@media(prefers-reduced-motion:no-preference){
  .anim .why-grid .mini.reveal:nth-child(1){transition-delay:0s}
  .anim .why-grid .mini.reveal:nth-child(2){transition-delay:.12s}
  .anim .why-grid .mini.reveal:nth-child(3){transition-delay:.24s}
  .anim .why-grid .mini.reveal:nth-child(4){transition-delay:.36s}
  .anim .why-grid .ico{transform:scale(.4) rotate(-25deg);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s ease}
  .anim .why-grid .reveal.in .ico{transform:none;opacity:1}
  .anim .why-grid .reveal:nth-child(1).in .ico{transition-delay:.25s}
  .anim .why-grid .reveal:nth-child(2).in .ico{transition-delay:.37s}
  .anim .why-grid .reveal:nth-child(3).in .ico{transition-delay:.49s}
  .anim .why-grid .reveal:nth-child(4).in .ico{transition-delay:.61s}
  .why-grid .mini:hover,.why-grid .mini:active{transform:translateY(-4px)}
  .why-grid .mini:hover .ico,.why-grid .mini:active .ico{animation:ico-nudge .6s ease}
  @keyframes ico-nudge{0%{transform:none}30%{transform:rotate(-14deg) scale(1.1)}60%{transform:rotate(8deg) scale(1.05)}100%{transform:none}}
}