/* =========================================================================
   Identium - Plant Identifier  -  identium.app
   Shared stylesheet for every page.

   The palette is the app's own, not an interpretation of it. Every value
   below appears in the iOS source:
     #DDDEDF -> #F4EBE6   the LinearGradient behind every screen
     #FFFFFF              card fill
     #EFF0F7              1px card stroke
     Color.black          text, icons and every primary button
   Nothing else is introduced. Depth comes from black at low opacity, which
   is how the app does it too (.black.opacity(0.7 / 0.55 / 0.35)).
   ========================================================================= */

:root{
  /* the app's four surface colours */
  --grey:#DDDEDF;      /* screen gradient, top */
  --cream:#F4EBE6;     /* screen gradient, bottom */
  --hairline:#EFF0F7;  /* card stroke */
  --white:#FFFFFF;     /* card fill */

  /* the app's text ramp: black at the opacities the app actually uses */
  --ink:#000000;
  --ink-2:rgba(0,0,0,.72);
  --ink-3:rgba(0,0,0,.58);
  --rule:rgba(0,0,0,.09);
  --rule-2:rgba(0,0,0,.16);

  /* the app icon's own gradient, used by the logo and nothing else */
  --icon-top:#CACACA;
  --icon-bottom:#EAEAEA;

  --shell:min(1240px,92vw);
  --shell-narrow:min(760px,92vw);
  --r-lg:32px;
  --r-md:20px;
  --r-sm:12px;

  --f-display:"Fraunces",ui-serif,Georgia,serif;
  --f-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --lift:0 1px 3px rgba(0,0,0,.05);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;line-height:1.1;}
p{margin:0;}
::selection{background:var(--grey);color:var(--ink);}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}

.shell{width:var(--shell);margin-inline:auto;}
.shell-narrow{width:var(--shell-narrow);margin-inline:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.eyebrow{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-family:var(--f-body);}
.num{font-family:var(--f-display);font-size:13px;letter-spacing:.14em;color:var(--ink-3);}

/* icon sprite ------------------------------------------------------------ */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none;}
.icon-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* buttons ---------------------------------------------------------------- */
/* Primary is Color.black with a white label, exactly as in the app. */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:14px 26px;border-radius:999px;
  font-size:15px;font-weight:500;font-family:var(--f-body);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-ink{background:var(--ink);color:var(--white);box-shadow:0 8px 24px -10px rgba(0,0,0,.55);}
.btn-ink:hover{box-shadow:0 16px 34px -12px rgba(0,0,0,.7);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);}
.btn-ghost:hover{background:var(--white);border-color:var(--ink-3);}

/* App Store badge --------------------------------------------------------
   Apple's own artwork, unmodified. Nothing here touches the image itself:
   no filters, no background, no border-radius, no forced recolour. The link
   only provides the hover lift and the clear space Apple's guidelines ask
   for (a margin of at least 10% of the badge height on every side). */
.stores{display:flex;gap:12px;flex-wrap:wrap;}
.store{display:inline-flex;padding:5px;border-radius:10px;
  transition:transform .35s var(--ease),opacity .35s var(--ease);}
.store img{width:144px;height:48px;display:block;}
.store:hover{transform:translateY(-3px);}
.store:active{opacity:.85;}
@media(max-width:560px){.store img{width:126px;height:42px;}}

.rating{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);}
.rating b{color:var(--ink);font-weight:500;}

/* nav -------------------------------------------------------------------- */
.nav{position:fixed;inset:14px 0 auto;z-index:80;display:flex;justify-content:center;pointer-events:none;}
.nav-inner{
  pointer-events:auto;width:var(--shell);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:9px 11px 9px 14px;border-radius:999px;
  background:rgba(244,235,230,.72);border:1px solid var(--rule);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.nav.scrolled .nav-inner{background:rgba(244,235,230,.94);box-shadow:0 10px 34px -20px rgba(0,0,0,.5);}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-size:17px;letter-spacing:-.02em;}
/* the icon is light, so it needs its own edge against a light bar */
.brand img{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.10),0 2px 6px -2px rgba(0,0,0,.3);}
.brand b{font-weight:500;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;color:var(--ink-2);}
.nav-links a{position:relative;transition:color .3s var(--ease);}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);transition:right .4s var(--ease);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after,.nav-links a[aria-current]::after{right:0;}
.nav-links a[aria-current]{color:var(--ink);}
.nav .btn{padding:11px 22px;font-size:14px;}
@media(max-width:940px){.nav-links{display:none;}}
@media(max-width:560px){
  .nav{inset:10px 0 auto;}
  .nav-inner{padding:7px 7px 7px 11px;gap:10px;}
  .brand{font-size:14.5px;gap:8px;}
  .brand img{width:30px;height:30px;}
  .nav .btn{padding:10px 17px;font-size:13px;}
}

/* page header used by blog + legal --------------------------------------- */
/* the app's screen gradient, top to bottom, exactly as the app draws it */
.page-head{padding:clamp(140px,17vh,190px) 0 clamp(40px,6vh,64px);
  background:linear-gradient(180deg,var(--grey),var(--cream));}
.page-head h1{font-size:clamp(34px,5.4vw,64px);font-weight:300;letter-spacing:-.035em;margin-top:18px;max-width:18ch;}
.page-head .lead{margin-top:20px;max-width:56ch;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px);}

/* footer ----------------------------------------------------------------- */
footer{padding:8vh 0 40px;border-top:1px solid var(--rule);margin-top:9vh;background:var(--grey);}
.f-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;margin-bottom:56px;}
.f-top .brand{font-size:19px;}
.f-blurb{max-width:34ch;color:var(--ink-2);font-size:15px;margin-top:16px;}
.f-cols{display:flex;gap:clamp(32px,5.5vw,88px);flex-wrap:wrap;}
.f-col h2{margin:0 0 16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;font-family:var(--f-body);}
.f-col a{display:block;margin-bottom:11px;font-size:15px;color:var(--ink-2);transition:color .3s var(--ease);}
.f-col a:hover{color:var(--ink);}
.f-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3);}

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

/* =========================================================================
   HOME
   ========================================================================= */
.hero-wrap{position:relative;height:260vh;background:var(--cream);}
/* the sticky hero is one app screen: the same gradient, edge to edge */
.hero{position:sticky;top:0;height:100vh;min-height:660px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--grey),var(--cream));}
.hero::after{content:"";position:absolute;left:50%;bottom:-42%;translate:-50% 0;width:120vw;height:70vh;
  pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.055),rgba(0,0,0,0) 70%);}
.hero-copy{position:relative;z-index:3;max-width:min(880px,88vw);isolation:isolate;}
.hero-copy::before,.hero-cta::before{content:"";position:absolute;inset:-18% -26%;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 66% at 50% 50%,var(--cream) 0%,rgba(244,235,230,.96) 52%,rgba(244,235,230,0) 84%);}
.hero h1{font-size:clamp(38px,6.6vw,84px);font-weight:300;letter-spacing:-.035em;margin:20px 0 0;color:rgba(0,0,0,.86);}
/* emphasis is carried by the italic, not by a second colour */
.hero h1 em{font-style:italic;color:var(--ink);font-weight:400;}
.hero .sub{margin:22px auto 0;max-width:600px;font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);}
.hero-cta{position:relative;z-index:3;isolation:isolate;margin-top:34px;display:flex;align-items:center;
  gap:26px;flex-wrap:wrap;justify-content:center;}
.hero-store{display:flex;flex-direction:column;align-items:center;gap:12px;}

.qr{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border-radius:18px;
  background:var(--white);border:1px solid var(--hairline);box-shadow:var(--lift);}
.qr img{width:66px;height:66px;border-radius:10px;flex:none;}
.qr p{font-size:13px;color:var(--ink-2);text-align:left;max-width:132px;line-height:1.35;}
@media(max-width:720px){.qr{display:none;}}

/* fanned identification cards --------------------------------------------
   Built from the app's own card treatment and nothing else: a fill drawn
   from the four surfaces, a 1px #EFF0F7 stroke, black type and a shadow to
   separate them. Black is not used here; in the app it means "action". */
.deck{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.card{position:absolute;width:clamp(150px,15vw,214px);aspect-ratio:228/318;border-radius:22px;
  padding:22px 20px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  border:1px solid var(--hairline);color:var(--ink);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.42),0 2px 8px -2px rgba(0,0,0,.16);
  transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(var(--s,1));
  transition:transform 1.1s var(--ease),opacity .8s var(--ease);will-change:transform;}
/* The species drawing sits in the top two thirds; the name sits under it.
   The width MUST be explicit. An inline <svg> is a replaced element with a
   300px intrinsic width, so left+right+width:auto is over-constrained: the
   browser drops `right` and uses 300px, which anchors the drawing to the left
   edge and spills it out of the card. */
.card .art{position:absolute;left:9%;top:5%;width:82%;height:63%;}
#plant-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.card .v{position:relative;z-index:2;font-family:var(--f-display);font-size:clamp(13px,1.05vw,16px);line-height:1.3;}
.card .r{position:relative;z-index:2;margin-top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-style:italic;color:var(--ink-3);}
.c1{--x:-43vw;--y:-16vh;--rot:-18deg;--s:.82;background:linear-gradient(160deg,var(--white),var(--hairline));}
.c2{--x:-34vw;--y:6vh;--rot:-11deg;--s:.92;background:linear-gradient(155deg,var(--cream),var(--grey));}
.c3{--x:-25vw;--y:27vh;--rot:-4deg;--s:.86;background:linear-gradient(155deg,var(--white),var(--cream));}
.c4{--x:25vw;--y:27vh;--rot:4deg;--s:.86;background:linear-gradient(155deg,var(--hairline),var(--grey));}
.c5{--x:34vw;--y:6vh;--rot:11deg;--s:.92;background:linear-gradient(155deg,var(--white),var(--grey));}
.c6{--x:43vw;--y:-16vh;--rot:18deg;--s:.82;background:linear-gradient(160deg,var(--grey),var(--cream));}
.hero-wrap[data-fold="1"] .card{--x:0 !important;--y:14vh !important;--rot:0deg !important;--s:.55 !important;opacity:0;}
@media(max-width:900px){
  .c1,.c6{opacity:0;}
  .c2{--x:-36vw;--y:-28vh;--rot:-13deg;--s:.74;}
  .c5{--x:36vw;--y:-28vh;--rot:13deg;--s:.74;}
  .c3{--x:-33vw;--y:30vh;--rot:-6deg;--s:.7;}
  .c4{--x:33vw;--y:30vh;--rot:6deg;--s:.7;}
}
@media(max-width:600px){
  .c3,.c5{opacity:0;}
  .c2{--x:-30vw;--y:-35vh;--rot:-13deg;--s:.62;}
  .c4{--x:30vw;--y:-35vh;--rot:13deg;--s:.62;}
  .hero-copy::before,.hero-cta::before{inset:-10% -12%;}
}

.scroll-hint{position:absolute;bottom:30px;left:50%;translate:-50% 0;z-index:3;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(rgba(0,0,0,.45),transparent);animation:drop 2.2s var(--ease) infinite;}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* phone mockup ------------------------------------------------------------
   The screens are the app: its gradient, its white cards, its 1px #EFF0F7
   strokes, its black type. */
.phone{position:relative;width:clamp(220px,23vw,286px);aspect-ratio:9/19.3;border-radius:44px;padding:9px;flex:none;
  background:linear-gradient(160deg,#2C2C2E,#0E0E0F);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08) inset;}
.screen{position:relative;height:100%;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);}
.screen::before{content:"";position:absolute;top:9px;left:50%;translate:-50% 0;z-index:5;width:31%;height:19px;border-radius:999px;background:#0E0E0F;}
.sc-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;padding:40px 24px;text-align:center;}
.screen .sc-name{font-family:var(--f-display);font-size:22px;line-height:1.28;color:var(--ink);}
.screen .sc-latin{font-size:11px;letter-spacing:.1em;font-style:italic;color:var(--ink-3);}
.sc-bar{display:flex;justify-content:space-between;padding:0 30px 26px;color:var(--ink);}
.sc-bar .icon{width:21px;height:21px;opacity:.55;}
.sc-bar .icon:first-child{opacity:1;}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:58px 14px 18px;flex:1;align-content:space-evenly;overflow:hidden;}
.chip{border-radius:12px;padding:11px 10px;font-size:10.5px;font-weight:500;display:flex;flex-direction:column;gap:7px;
  min-height:62px;justify-content:flex-end;background:var(--white);border:1px solid var(--hairline);box-shadow:var(--lift);}
.chip .icon{width:17px;height:17px;}
/* seven care tasks in a two-column grid: let the last one run full width */
.sc-grid .chip:last-child{grid-column:1/-1;}

/* the viewfinder brackets drawn over the identify screen, in the icon's grey */
.sc-scan{position:absolute;inset:64px 26px 96px;z-index:3;pointer-events:none;}
.sc-scan span{position:absolute;width:30px;height:30px;border:2.5px solid rgba(0,0,0,.34);}
.sc-scan span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0;}
.sc-scan span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0;}
.sc-scan span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 10px;}
.sc-scan span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 10px 0;}

.sc-conf{width:78%;}
.sc-conf i{display:block;height:5px;border-radius:99px;background:rgba(0,0,0,.14);overflow:hidden;}
.sc-conf i::after{content:"";display:block;height:100%;width:96%;border-radius:99px;background:var(--ink);}
.sc-conf b{display:block;margin-top:8px;font-size:9.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}

.sc-rows{padding:56px 18px 12px;display:flex;flex-direction:column;justify-content:center;gap:9px;flex:1;}
.sc-row{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;font-size:10.5px;line-height:1.3;
  background:var(--white);border:1px solid var(--hairline);box-shadow:var(--lift);}
.sc-row .icon{width:15px;height:15px;flex:none;}
.sc-row b{font-weight:500;}
.sc-row em{font-style:normal;color:var(--ink-3);display:block;}
.sc-pill{align-self:flex-start;margin-bottom:4px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;background:var(--ink);color:var(--white);font-weight:700;}

/* sticky feature cards ---------------------------------------------------- */
.features{padding:0 0 12vh;position:relative;}
.feat{position:sticky;top:calc(102px + var(--i) * 26px);width:var(--shell);margin:0 auto 34px;
  border-radius:var(--r-lg);border:1px solid var(--hairline);min-height:min(78vh,700px);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;
  padding:56px clamp(28px,4.4vw,66px);overflow:hidden;box-shadow:0 40px 80px -60px rgba(0,0,0,.45);}
/* three combinations of the same four app surfaces */
.feat.f1{background:linear-gradient(150deg,var(--grey),var(--hairline));}
.feat.f2{background:linear-gradient(150deg,var(--hairline),var(--cream));}
.feat.f3{background:linear-gradient(150deg,var(--cream),var(--grey));}
.feat h2{font-size:clamp(28px,3.5vw,46px);font-weight:300;margin:14px 0 0;max-width:15ch;}
.feat > div > p{margin-top:18px;max-width:44ch;color:var(--ink-2);font-size:clamp(15px,1.15vw,17px);}
.feat-media{display:flex;justify-content:center;align-items:center;}
.feat .num{display:block;}
@media(max-width:960px){
  .feat{grid-template-columns:1fr;text-align:center;padding:44px 24px;min-height:auto;}
  .feat > div > p,.feat h2{margin-inline:auto;}
  .feat .phone{margin-top:32px;}
}

/* benefits --------------------------------------------------------------- */
.benefits{padding:14vh 0 10vh;background:var(--cream);}
.benefits-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:60px;flex-wrap:wrap;}
.benefits-head h2{font-size:clamp(34px,5vw,62px);font-weight:300;}
.benefits-head p{max-width:38ch;color:var(--ink-2);}
.b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,52px);}
.b-item{padding:36px 34px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--hairline);
  box-shadow:var(--lift);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.b-item:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(0,0,0,.4);}
.b-item h3{font-size:clamp(20px,1.85vw,26px);font-weight:400;margin:12px 0;}
.b-item p{color:var(--ink-2);font-size:16px;}
.b-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--hairline);color:var(--ink);}
.b-icon .icon{width:21px;height:21px;}
@media(max-width:760px){.b-grid{grid-template-columns:1fr;}}

.marquee{margin:9vh 0;padding:26px 0;overflow:hidden;color:var(--cream);background:var(--ink);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:60px;width:max-content;animation:slide 34s linear infinite;}
.marquee span{font-family:var(--f-display);font-size:clamp(22px,3.1vw,42px);font-weight:300;white-space:nowrap;font-style:italic;}
.marquee span::after{content:"\2726";font-style:normal;margin-left:60px;opacity:.45;font-size:.5em;vertical-align:middle;}
@keyframes slide{to{transform:translateX(-50%)}}

/* testimonials ----------------------------------------------------------- */
.reviews{padding:4vh 0 14vh;}
.reviews h2{font-size:clamp(30px,4vw,52px);font-weight:300;margin-bottom:14px;}
.reviews .lead{color:var(--ink-2);margin-bottom:52px;max-width:46ch;}
.r-grid{columns:3;column-gap:26px;}
@media(max-width:980px){.r-grid{columns:2;}}
@media(max-width:640px){.r-grid{columns:1;}}
.r-card{break-inside:avoid;margin-bottom:26px;padding:28px 26px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--hairline);box-shadow:var(--lift);}
.r-card .stars{color:var(--ink);font-size:13px;letter-spacing:.16em;margin-bottom:14px;}
.r-card p{font-size:16px;color:var(--ink-2);line-height:1.62;}
.r-card .who{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;}
.r-card .who i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--ink);color:var(--white);font-style:normal;font-size:12px;font-weight:700;}

/* download banner -------------------------------------------------------- */
.banner{width:var(--shell);margin:0 auto;border-radius:var(--r-lg);
  padding:clamp(46px,6vw,84px) clamp(28px,5vw,72px);text-align:center;position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream);}
.banner::before{content:"";position:absolute;inset:-40% -10% auto;height:130%;
  background:radial-gradient(45% 45% at 50% 30%,rgba(255,255,255,.14),transparent 70%);}
.banner *{position:relative;}
.banner h2{font-size:clamp(30px,4.6vw,58px);font-weight:300;}
.banner p{margin:20px auto 32px;max-width:52ch;color:rgba(255,255,255,.8);}
.banner .stores{justify-content:center;}
.banner .rating{color:rgba(255,255,255,.75);margin-top:22px;justify-content:center;display:flex;}
.banner .rating b{color:var(--white);}

/* =========================================================================
   BLOG
   ========================================================================= */
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--grey);
  border:1px solid var(--hairline);padding:5px 12px;border-radius:999px;}
.meta{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.meta i{font-style:normal;opacity:.5;}

.featured{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.5vw,56px);align-items:center;
  padding:clamp(30px,4vw,52px);border-radius:var(--r-lg);border:1px solid var(--hairline);
  background:linear-gradient(140deg,var(--hairline),var(--grey));margin-bottom:9vh;
  box-shadow:var(--lift);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.featured:hover{transform:translateY(-4px);box-shadow:0 34px 70px -50px rgba(0,0,0,.45);}
.featured h2{font-size:clamp(28px,3.6vw,46px);font-weight:300;margin:16px 0 14px;}
.featured p{color:var(--ink-2);margin-bottom:20px;max-width:46ch;}
/* the one solid-black surface on the page, the way a primary action is */
.featured .thumb{border-radius:var(--r-md);aspect-ratio:4/3;display:grid;place-items:center;padding:32px;text-align:center;
  color:var(--white);font-family:var(--f-display);font-size:clamp(17px,1.7vw,23px);line-height:1.35;
  background:var(--ink);box-shadow:0 26px 50px -30px rgba(0,0,0,.6);}
@media(max-width:860px){.featured{grid-template-columns:1fr;}.featured .thumb{order:-1;aspect-ratio:16/9;}}

.list-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap;}
.list-head h2{font-size:clamp(24px,2.8vw,36px);font-weight:400;}
.link-more{font-size:15px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:7px;}
.link-more .icon{width:15px;height:15px;transition:transform .35s var(--ease);}
.link-more:hover .icon{transform:translateX(4px);}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:940px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr;}}
.post-card{display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;border-radius:var(--r-md);
  background:var(--white);border:1px solid var(--hairline);box-shadow:var(--lift);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.post-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -36px rgba(0,0,0,.4);}
.post-card .thumb{height:120px;border-radius:var(--r-sm);display:grid;place-items:center;padding:16px;text-align:center;
  color:var(--ink);font-family:var(--f-display);font-size:15px;line-height:1.3;border:1px solid var(--hairline);}
.post-card h3{font-size:20px;font-weight:400;line-height:1.25;}
.post-card p{font-size:15px;color:var(--ink-2);flex:1;}
/* card surfaces, combinations of the app's own four and nothing else */
.t-stone{background:linear-gradient(150deg,var(--grey),var(--cream));}
.t-mist{background:linear-gradient(150deg,var(--white),var(--hairline));}
.t-cream{background:linear-gradient(150deg,var(--white),var(--cream));}
.t-grey{background:linear-gradient(150deg,var(--hairline),var(--grey));}
.t-linen{background:linear-gradient(150deg,var(--cream),var(--grey));}

/* article ---------------------------------------------------------------- */
.article{padding-bottom:8vh;}
.article-head{padding:clamp(130px,16vh,180px) 0 0;}
.article-head h1{font-size:clamp(32px,4.6vw,58px);font-weight:300;letter-spacing:-.035em;margin:18px 0 0;max-width:22ch;}
.article-head .deck{position:static;display:block;margin-top:22px;max-width:60ch;color:var(--ink-2);font-size:clamp(16px,1.3vw,19px);}
.article-head .meta{margin-top:20px;}

.cta-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:44px 0;padding:26px 28px;
  border-radius:var(--r-md);border:1px solid var(--hairline);
  background:linear-gradient(135deg,var(--white),var(--hairline));box-shadow:var(--lift);}
.cta-card img{width:62px;height:62px;border-radius:15px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.10),0 8px 20px -8px rgba(0,0,0,.35);}
.cta-card .cta-text{flex:1;min-width:210px;}
.cta-card h2{font-size:20px;font-weight:500;line-height:1.3;}
.cta-card p{font-size:14.5px;color:var(--ink-2);margin-top:5px;}
.cta-card .fine{font-size:12px;color:var(--ink-3);margin-top:9px;}

.prose{max-width:68ch;}
.prose h2{font-size:clamp(24px,2.9vw,36px);font-weight:400;margin:52px 0 18px;letter-spacing:-.025em;}
.prose h3{font-size:clamp(19px,2vw,24px);font-weight:500;margin:36px 0 14px;}
.prose p{margin-bottom:20px;color:var(--ink-2);font-size:17.5px;line-height:1.72;}
.prose strong{color:var(--ink);font-weight:500;}
.prose ul,.prose ol{margin:0 0 24px;padding-left:22px;color:var(--ink-2);}
.prose li{margin-bottom:10px;line-height:1.65;}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{text-decoration-thickness:2px;}

/* pull-out rule of thumb, the plant-care analogue of a pull quote */
.fact{margin:32px 0;padding:24px 28px;border-left:3px solid var(--ink);background:var(--hairline);
  border-radius:0 var(--r-sm) var(--r-sm) 0;}
.fact p{font-family:var(--f-display);font-size:20px;line-height:1.45;color:var(--ink);margin:0;font-style:italic;}
.fact cite{display:block;margin-top:10px;font-style:normal;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);}

.tip-list{list-style:none;padding:0;margin:0 0 28px;counter-reset:tip;}
.tip-list li{counter-increment:tip;position:relative;padding:16px 18px 16px 54px;margin-bottom:10px;
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-sm);box-shadow:var(--lift);
  font-family:var(--f-display);font-size:18px;line-height:1.45;color:var(--ink);}
.tip-list li::before{content:counter(tip);position:absolute;left:16px;top:50%;translate:0 -50%;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--white);font-family:var(--f-body);font-size:12px;font-weight:700;}
.tip-list li b{display:block;margin-top:6px;font-family:var(--f-body);font-size:13px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}

.faq{margin-top:56px;}
.faq h2{margin-bottom:22px;}
.faq details{border:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--white);
  box-shadow:var(--lift);margin-bottom:12px;overflow:hidden;}
.faq summary{padding:18px 22px;cursor:pointer;font-weight:500;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;transition:background .3s var(--ease);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{background:var(--cream);}
.faq summary::after{content:"";width:9px;height:9px;flex:none;border-right:1.6px solid var(--ink);
  border-bottom:1.6px solid var(--ink);transform:rotate(45deg);translate:0 -3px;transition:transform .3s var(--ease);}
.faq details[open] summary::after{transform:rotate(-135deg);translate:0 2px;}
.faq details p{padding:0 22px 20px;color:var(--ink-2);font-size:16px;margin:0;}

/* references, printed like a short bibliography */
.sources{margin-top:56px;padding-top:34px;border-top:1px solid var(--rule);}
.sources h2{font-size:22px;font-weight:500;margin-bottom:18px;}
.sources ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:15.5px;}
.sources li{margin-bottom:12px;line-height:1.55;}
.sources .who{color:var(--ink);font-weight:500;}
.sources a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.sources .fine{margin-top:18px;font-size:13px;color:var(--ink-3);}

.keep-reading{margin-top:56px;padding-top:34px;border-top:1px solid var(--rule);}
.keep-reading h2{font-size:22px;font-weight:500;margin-bottom:18px;}
.keep-reading a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:16.5px;transition:color .3s var(--ease),padding-left .3s var(--ease);}
.keep-reading a:hover{color:var(--ink);padding-left:6px;}
.keep-reading .icon{width:15px;height:15px;flex:none;opacity:.6;}

/* =========================================================================
   LEGAL
   ========================================================================= */
.legal{padding-bottom:9vh;}
.legal .prose{max-width:76ch;}
.legal .prose h2{font-size:clamp(21px,2.2vw,27px);font-weight:500;margin:46px 0 14px;}
.legal .updated{font-size:14px;color:var(--ink-3);margin-top:14px;}
.legal-table{width:100%;border-collapse:collapse;margin:24px 0 28px;font-size:15.5px;}
.legal-table th,.legal-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2);}
.legal-table th{font-family:var(--f-body);font-weight:500;color:var(--ink);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--hairline);}
.legal-table td:first-child{color:var(--ink);font-weight:500;white-space:nowrap;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* =========================================================================
   MOTION PREFERENCES
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
}

/* =========================================================================
   PLANT GROUPS SECTION (home)
   ========================================================================= */
.cats{padding:4vh 0 14vh;}
.cats-title{font-size:clamp(28px,4vw,52px);font-weight:300;margin:14px 0;max-width:20ch;}
.cats .lead{color:var(--ink-2);margin-bottom:56px;max-width:48ch;}
.cat-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);}
@media(max-width:940px){.cat-groups{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cat-groups{grid-template-columns:1fr;}}
.cat-group{padding:26px 24px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--hairline);
  box-shadow:var(--lift);transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.cat-group:hover{transform:translateY(-4px);box-shadow:0 26px 50px -38px rgba(0,0,0,.4);}
.cat-group h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-family:var(--f-body);font-weight:500;margin-bottom:16px;}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cat-chips span{font-size:14px;color:var(--ink-2);background:var(--cream);border:1px solid var(--hairline);
  padding:6px 13px;border-radius:999px;}

/* pricing table used on the home page ------------------------------------ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
@media(max-width:760px){.plans{grid-template-columns:1fr;}}
.plan{padding:24px 22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--hairline);
  box-shadow:var(--lift);text-align:left;}
.plan h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-body);
  font-weight:500;color:var(--ink-3);}
.plan .price{font-family:var(--f-display);font-size:34px;font-weight:300;margin-top:10px;letter-spacing:-.03em;}
.plan .price span{font-size:14px;font-family:var(--f-body);color:var(--ink-3);letter-spacing:0;}
.plan .note{margin-top:8px;font-size:14px;color:var(--ink-2);}
/* the recommended plan gets the app's primary-button treatment */
.plan.best{background:var(--ink);border-color:transparent;color:var(--white);}
.plan.best h3{color:rgba(255,255,255,.62);}
.plan.best .price span{color:rgba(255,255,255,.62);}
.plan.best .note{color:rgba(255,255,255,.8);}

@media(max-width:560px){
  .cta-card{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 22px;}
  .cta-card .btn{width:100%;justify-content:center;}
}