/* home.css. The personal-brand front door, 2026-08-27.
   Layers on ai2020.css; defines only what the events page never needed.
   Every spacing value is a multiple of 4, per the brand's grid rule. */

.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;
}

/* ---------- topbar nav ---------- */
.topnav{display:flex;gap:32px;margin-left:auto;margin-right:20px}
.topnav a{
  font:600 13px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:8px 0;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.topnav a:hover{color:var(--paper);border-bottom-color:var(--orange)}
@media (max-width:860px){ .topnav{display:none} }

/* ---------- 01 hero ---------- */
.home-hero{padding:80px 0 96px;overflow:hidden}
.home-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:64px;align-items:center;
}
.home-hero-copy h1{
  /* px, not a clamp with a unitless ratio: the display face at fluid sizes
     produces fractional line-heights and breaks the 4px baseline */
  font:400 88px/80px var(--display);
  letter-spacing:.01em;text-transform:uppercase;
  color:var(--paper);margin:8px 0 20px;
}
.home-hero-copy h1 .accent{color:var(--orange)}
.home-hero-copy .lede{
  font:400 19px/32px var(--sans);color:var(--dim);
  max-width:52ch;margin:0 0 24px;
}
.hero-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 16px}
.hero-form input[type=email]{
  flex:1 1 280px;min-width:0;
  background:var(--black-2);border:1px solid var(--line-strong);
  border-radius:4px;padding:16px 20px;
  font:400 16px/1 var(--sans);color:var(--paper);
}
.hero-form input[type=email]::placeholder{color:var(--graphite)}
.hero-form input[type=email]:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,90,31,.16);
}
.hero-form .form-note{flex:1 0 100%;margin:0}
.hero-sub{font:400 14px/20px var(--sans);color:var(--graphite);margin:0;max-width:46ch}

.home-hero-art{position:relative;justify-self:end;width:100%;max-width:520px}
.home-hero-art img{
  display:block;width:100%;height:auto;border-radius:8px;
  /* the portrait is a photograph on a dark page: grade it toward the
     palette rather than letting a bright studio background punch a hole */
  filter:saturate(.92) contrast(1.04);
}
/* accent edge, the same slash logic as the wordmark */
.home-hero-art::after{
  content:"";position:absolute;left:-12px;top:24px;bottom:24px;width:4px;
  background:var(--orange);border-radius:4px;
}
@media (max-width:960px){
  .home-hero{padding:88px 0 64px}
  .home-hero-copy h1{font-size:64px;line-height:60px}
  .home-hero-grid{grid-template-columns:1fr;gap:40px}
  .home-hero-art{order:-1;max-width:320px;justify-self:start}
  .home-hero-art::after{display:none}
}

/* ---------- shared section furniture ---------- */
.sec-lede{
  font:400 18px/28px var(--sans);color:var(--dim);
  max-width:60ch;margin:0 0 48px;
}

/* ---------- 02 about ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:64px;align-items:start;margin-top:24px;
}
.about-grid p{font:400 17px/28px var(--sans);color:var(--dim);margin:0 0 20px;max-width:62ch}
.about-grid .pull{
  font:500 20px/32px var(--sans);color:var(--paper);
  border-left:4px solid var(--orange);padding-left:24px;margin-top:32px;
}
.about-card{
  background:var(--black-2);border:1px solid var(--line);
  border-radius:8px;padding:32px;
}
.about-card h3{
  font:600 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--graphite);margin:0 0 20px;
}
.ticks{list-style:none;margin:0 0 20px;padding:0}
.ticks li{
  position:relative;padding-left:24px;margin-bottom:16px;
  font:400 15px/24px var(--sans);color:var(--dim);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:2px;background:var(--orange);
}
.about-card .note{
  font:400 14px/24px var(--sans);color:var(--graphite);
  border-top:1px solid var(--line);padding-top:20px;margin:0;
}
@media (max-width:960px){ .about-grid{grid-template-columns:1fr;gap:40px} }

/* ---------- 03 learn ---------- */
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.learn-card{
  background:var(--black-2);border:1px solid var(--line);
  border-radius:8px;padding:32px;transition:border-color .18s,transform .18s;
}
.learn-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.learn-card .num{
  display:block;font:700 12px/1 var(--mono);letter-spacing:.1em;
  color:var(--orange);margin-bottom:16px;
}
.learn-card h3{font:600 20px/28px var(--sans);color:var(--paper);margin:0 0 12px}
.learn-card p{font:400 15px/24px var(--sans);color:var(--dim);margin:0}
@media (max-width:760px){ .learn-grid{grid-template-columns:1fr} }

/* ---------- 04 writing ---------- */
.write-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1080px){ .write-grid{grid-template-columns:1fr 1fr} }
.write-card{
  display:block;text-decoration:none;
  background:var(--black-2);border:1px solid var(--line);
  border-radius:8px;padding:32px;transition:border-color .18s,transform .18s;
}
.write-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.write-card .kicker{
  display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.12em;
  color:var(--graphite);margin-bottom:16px;
}
.write-card h3{font:600 22px/28px var(--sans);color:var(--paper);margin:0 0 12px}
.write-card p{font:400 15px/24px var(--sans);color:var(--dim);margin:0 0 20px}
.write-card .go{
  font:600 14px/20px var(--sans);color:var(--orange);
  display:inline-flex;align-items:center;gap:8px;
}
.write-card:hover .arw{transform:translateX(4px)}
.write-card .arw{display:inline-block;transition:transform .18s}
@media (max-width:760px){ .write-grid{grid-template-columns:1fr} }
.more-link{margin:24px 0 0;text-align:right}
.more-link a{font:600 14px/20px var(--sans);color:var(--dim);text-decoration:none}
.more-link a:hover{color:var(--orange)}

/* ---------- 05 join ---------- */
.join-mark .mascot{width:96px;height:96px}
.rung-strip{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  padding:28px 32px;margin:32px 0 0;
}
.rung-copy h3{font:600 16px/24px var(--sans);color:var(--paper);margin:0 0 8px}
.rung-copy p{font:400 15px/24px var(--sans);color:var(--dim);margin:0;max-width:64ch}
.rung-strip .btn{flex:0 0 auto}
/* btn--ghost was never defined anywhere, so inside .join the strip's button
   inherited the ink-on-orange rules and rendered ink on the ink panel.
   Paper on panel with a strong hairline: 14.9:1 measured against --black-2. */
.join .rung-strip .btn--ghost{color:var(--paper);border-color:var(--line-strong);background:transparent}
.join .rung-strip .btn--ghost:hover{background:var(--paper);color:var(--black);border-color:var(--paper)}
@media (max-width:760px){ .rung-strip{flex-direction:column;align-items:flex-start} }
.next-rung{
  font:400 15px/24px var(--sans);color:var(--graphite);
  margin:32px 0 0;text-align:center;
}
.next-rung a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--orange)}
.next-rung a:hover{color:var(--orange)}

@media (max-width:560px){
  .home-hero-copy h1{font-size:48px;line-height:44px}
  .home-hero-copy .lede{font-size:17px;line-height:28px}
}

/* ---------- line-break discipline (Lisa, 2026-08-27) ----------
   Same rule as the video captions: no orphan words, keep phrases together.
   balance evens heading lines ("Enterprise AI: What / Shipped" becomes
   "Enterprise AI: / What Shipped"); pretty stops paragraphs stranding a
   short last line. Both degrade to normal wrapping in older engines. */
.home-hero-copy h1,
.sec h2, .join-copy h2,
.learn-card h3, .write-card h3, .rung-copy h3, .about-card h3{
  text-wrap:balance;
}
.home-hero-copy .lede, .hero-sub, .sec-lede,
.about-grid p, .learn-card p, .write-card p,
.join-copy p, .rung-copy p, .ticks li, .about-card .note{
  text-wrap:pretty;
}

/* ---------- card mascots (Lisa, 2026-08-27) ----------
   Flat paper mascots per the brand rule: the lit treatment stays reserved
   for the accent instances; card mascots are the --paper face, one
   expression per card, cast to match the card's argument. */
.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.card-top .num,.card-top .kicker{margin-bottom:0}
.card-mascot{width:32px;height:32px;flex:0 0 auto;opacity:.92}
.learn-card:hover .card-mascot,.write-card:hover .card-mascot{opacity:1}

/* ---------- mascot hover: the eyes wake (Lisa, 2026-08-27) ----------
   Rest state on data-x, hover state on data-hx; hovering the CARD (the
   whole logo is the hit area) transitions the eyes between the two
   expression-sheet geometries. Reduced-motion users get the rest state. */
.card-mascot .cl,.card-mascot .cr{
  transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .22s ease;
}
.card-mascot .cl{transform:rotate(-7deg)}
.card-mascot .cr{transform:rotate(7deg)}
.card-mascot[data-x="blink"] .cl{transform:rotate(-7deg) scale(1,.12)}
.card-mascot[data-x="blink"] .cr{transform:rotate(7deg) scale(1,.12)}
.card-mascot[data-x="squint"] .cl{transform:rotate(-7deg) scale(1,.45)}
.card-mascot[data-x="squint"] .cr{transform:rotate(7deg) scale(1,.45)}
.card-mascot[data-x="glance"] .cl{transform:rotate(-7deg) translate(2.4px,0)}
.card-mascot[data-x="glance"] .cr{transform:rotate(7deg) translate(2.4px,0)}
.card-mascot[data-x="wide"] .cl{transform:rotate(-7deg) translate(0,-1px) scale(1,1.2)}
.card-mascot[data-x="wide"] .cr{transform:rotate(7deg) translate(0,-1px) scale(1,1.2)}

.learn-card:hover .card-mascot[data-hx="neutral"] .cl{transform:rotate(-7deg)}
.learn-card:hover .card-mascot[data-hx="neutral"] .cr{transform:rotate(7deg)}
:is(.learn-card,.write-card):hover .card-mascot[data-hx="wide"] .cl{transform:rotate(-7deg) translate(0,-1px) scale(1,1.2)}
:is(.learn-card,.write-card):hover .card-mascot[data-hx="wide"] .cr{transform:rotate(7deg) translate(0,-1px) scale(1,1.2)}
.write-card:hover .card-mascot[data-hx="glance"] .cl{transform:rotate(-7deg) translate(2.4px,0)}
.write-card:hover .card-mascot[data-hx="glance"] .cr{transform:rotate(7deg) translate(2.4px,0)}
.write-card:hover .card-mascot[data-hx="squint"] .cl{transform:rotate(-7deg) scale(1,.45)}
.write-card:hover .card-mascot[data-hx="squint"] .cr{transform:rotate(7deg) scale(1,.45)}
.write-card:hover .card-mascot[data-hx="wink"] .cl{transform:rotate(-7deg) scale(1,.12)}
.write-card:hover .card-mascot[data-hx="wink"] .cr{transform:rotate(7deg)}

/* the wordmark lockups wake too: topbar opens wide, footer blinks awake */
.topbar .lockup .eye,.topbar .lockup .track,
footer .lockup .eye,footer .lockup .track{transition:transform .22s ease}
.topbar .lockup:hover .eye-l{transform:translate(0,-1px) scale(1,1.2)}
.topbar .lockup:hover .eye-r{transform:translate(0,-1px) scale(1,1.2)}
footer .lockup:hover .eye-l{transform:scale(1,.12)}
footer .lockup:hover .eye-r{transform:none}

@media (prefers-reduced-motion:reduce){
  .card-mascot .cl,.card-mascot .cr,
  .topbar .lockup .eye,footer .lockup .eye{transition:none}
}

/* ---------- pillar page capture (2026-08-27) ----------
   The two guides had no subscribe form at all: 2,000 words of the site's
   best work with nowhere to convert, and the behavioral enrichment branch
   keyed to those pages could never fire. */
.pillar-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 0;max-width:560px}
.pillar-form input[type=email]{
  flex:1 1 260px;min-width:0;background:var(--black-2);
  border:1px solid var(--line-strong);border-radius:4px;padding:16px 20px;
  font:400 16px/20px var(--sans);color:var(--paper);
}
.pillar-form input[type=email]::placeholder{color:var(--graphite)}
.pillar-form input[type=email]:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.16)}
.pillar-form .form-note{flex:1 0 100%;margin:0}

/* ============================================================
   THE LAYERS (2026-09-02). Nate Herk's premium-site pass, done in
   the brand's own materials: the grid, the slash, the panel, the
   portrait, the mono label, the mascot. Behaviour in home.js;
   record in docs/superpowers/specs/2026-09-02-homepage-layers-design.md.
   Every entry state hangs off html.js so a visitor without script
   sees the finished page. Every spacing value stays a multiple of 4.
   ============================================================ */

html:not(.js) .reveal{opacity:1;transform:none}
.reveal{transition-delay:calc(var(--i,0) * 100ms)}

/* ---------- the top bar knows where you are ---------- */
.topnav a.is-on{color:var(--paper);border-bottom-color:var(--orange)}

/* ---------- hero copy: blur to sharp, one line at a time ----------
   The brand's own eye-chart expression (brand-guide section 9). */
.home-hero-copy h1 .ln{display:block}
.home-hero-copy h1 .ln-in{display:inline-block}
.js .home-hero-copy .rise,
.js .home-hero-copy .ln-in{
  opacity:0;transform:translateY(14px);filter:blur(10px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
.home-hero.ready .rise,
.home-hero.ready .ln-in{opacity:1;transform:none;filter:none}

/* ---------- hero art: six planes ---------- */
.home-hero .grid-bg{will-change:transform}
.home-hero-art{
  position:relative;justify-self:end;width:100%;max-width:520px;
  aspect-ratio:4 / 5;
}
.home-hero-art::after{display:none}          /* the accent edge now lives on the panel */
.home-hero-art > [data-depth]{position:absolute;will-change:transform}
.home-hero-art .l-in{display:block}
/* the copy always paints above the art planes: on a phone the art sits
   first visually but second in the DOM, so its overhangs would cover the
   eyebrow without this */
.home-hero-copy{position:relative;z-index:2}

/* back: the slash, drawn in on arrival */
/* drawn as a diagonal band inside an edge-aligned box, not a skewed
   element: a skew's bounding box lands off-grid at some width or other.
   The draw-in is a clip, so no geometry ever changes. */
.art-slash{left:0;right:-80px;top:-12%;bottom:-12%;pointer-events:none}   /* bleeds right so the band exits through the top, not a vertical cut */
.art-slash .l-in{
  width:100%;height:100%;
  background:linear-gradient(102deg,
    transparent calc(72% - 40px),var(--black-3) calc(72% - 40px),
    var(--black-3) calc(72% + 40px),transparent calc(72% + 40px));
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s cubic-bezier(.16,1,.3,1) .1s;
}
.home-hero.ready .art-slash .l-in{clip-path:inset(0)}

/* mid: the panel she is too big for */
.art-plate{inset:26% 0 0 0}
.art-plate .l-in{
  position:relative;height:100%;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  /* a 1px edge light sells a raised surface better than blur; the shadow
     carries offset and blur, tinted to the ground, never a halo */
  box-shadow:inset 0 1px 0 rgba(243,241,234,.06),0 32px 64px -32px rgba(0,0,0,.72);
  opacity:0;transform:scale(.96);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.art-plate .l-in::after{
  content:"";position:absolute;left:-12px;top:24px;bottom:24px;width:4px;
  background:var(--orange);border-radius:4px;
}
.home-hero.ready .art-plate .l-in{opacity:1;transform:none}

/* subject: the cutout, bottom edge married to the panel's, corners clipped
   to the panel's radius so the sweater never overhangs them */
.art-subject{inset:0;clip-path:inset(0 0 0 0 round 0 0 8px 8px)}
.art-subject .l-in{
  position:absolute;left:0;right:0;bottom:0;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease .15s,transform .9s cubic-bezier(.16,1,.3,1) .15s;
}
.art-subject img{display:block;width:100%;height:auto;filter:saturate(.92) contrast(1.04)}
.home-hero.ready .art-subject .l-in{opacity:1;transform:none}

/* front: the label on the panel, and the face that watches the cursor */
.art-label{
  right:20px;top:calc(26% + 20px);
  font:700 11px/16px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--graphite);white-space:nowrap;
  opacity:0;transition:opacity .5s ease .7s;
}
.art-label .tick{color:var(--orange)}
.home-hero.ready .art-label{opacity:1}

.art-mark{right:-24px;bottom:-24px;width:80px;height:80px}
.art-mark .l-in{
  width:100%;height:100%;
  opacity:0;transform:scale(.6);
  transition:opacity .4s ease .55s,transform .7s cubic-bezier(.34,1.56,.64,1) .55s;
}
.home-hero.ready .art-mark .l-in{opacity:1;transform:none}
.art-mark .mascot{width:100%;height:100%;filter:drop-shadow(0 12px 20px rgba(0,0,0,.5))}
.art-mark .mascot .m-body{fill:var(--paper)}
.art-mark .mascot .m-rim{stroke:rgba(11,14,17,.18)}
.art-mark .mascot .eye{fill:var(--black)}

@media (max-width:960px){
  .home-hero-art{max-width:320px;justify-self:start}
  .art-slash{bottom:0;right:-40px}   /* ends at the art's bottom edge, never over the copy */
  .art-slash .l-in{background:linear-gradient(102deg,transparent calc(70% - 28px),var(--black-3) calc(70% - 28px),var(--black-3) calc(70% + 28px),transparent calc(70% + 28px))}
  .art-plate .l-in::after{display:none}
  .art-mark{width:64px;height:64px;right:-16px;bottom:-16px}
  .art-label{right:16px;top:calc(26% + 16px)}
}

/* ---------- about: the words come in as you read ---------- */
.words-live .w{color:var(--graphite);transition:color .35s ease}
.words-live .w.on{color:var(--dim)}

/* ---------- section headings sharpen on arrival ---------- */
.js .sharpen{
  opacity:0;filter:blur(12px);transform:translateY(10px);
  transition:opacity .6s ease,filter .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.js .sharpen.in{opacity:1;filter:none;transform:none}

/* ---------- learn: the stack ----------
   Four wide cards, one per deliverable. With script they go sticky at a
   per-card offset and pile up under the scroll; a covered card dims and
   scales back by --cover, which home.js writes. Without script, or under
   reduced motion, they are a plain list. */
.learn-stack{display:flex;flex-direction:column;gap:24px}
.learn-card{
  position:relative;
  display:grid;grid-template-columns:152px minmax(0,1fr);gap:32px;align-items:start;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  padding:40px;
  box-shadow:inset 0 1px 0 rgba(243,241,234,.05);
  transition:border-color .18s;
}
.learn-card:hover{border-color:var(--line-strong);transform:none}
.learn-card .lc-side{display:flex;flex-direction:column;gap:20px}
.learn-card .num{
  display:block;font:400 72px/64px var(--display);letter-spacing:.02em;
  color:var(--orange);margin:0;
}
.learn-card .card-mascot{width:40px;height:40px}
.learn-card h3{font:600 26px/32px var(--sans);color:var(--paper);margin:0 0 12px;max-width:24ch}
.learn-card p{font:400 17px/28px var(--sans);color:var(--dim);margin:0;max-width:58ch}
@media (min-width:761px){ .learn-card{min-height:280px} }
@media (max-width:760px){
  .learn-card{grid-template-columns:1fr;gap:20px;padding:32px}
  .learn-card .lc-side{flex-direction:row;align-items:center;justify-content:space-between}
  .learn-card .num{font-size:56px;line-height:48px}
  .learn-card h3{font-size:22px;line-height:28px}
  .learn-card p{font-size:15px;line-height:24px}
}

.js .learn-stack{gap:0;padding-bottom:64px}
.js .learn-stack .learn-card{
  position:sticky;position:-webkit-sticky;
  top:calc(96px + var(--i,0) * 20px);
  margin-bottom:240px;
  transform:scale(calc(1 - var(--cover,0) * .05));transform-origin:50% 0;
  box-shadow:inset 0 1px 0 rgba(243,241,234,.05),0 24px 48px -24px rgba(0,0,0,.8);
}
.js .learn-stack .learn-card:last-child{margin-bottom:0}
.js .learn-stack .learn-card::after{
  content:"";position:absolute;inset:-1px;border-radius:8px;
  background:var(--black);opacity:calc(var(--cover,0) * .55);
  pointer-events:none;
}
/* the outgoing card's copy fades ahead of the scrim, so the incoming
   card's edge never crosses a sentence at full contrast */
.js .learn-stack .learn-card .lc-body,
.js .learn-stack .learn-card .lc-side{opacity:max(0, calc(1 - var(--cover,0) * 1.6))}
@media (max-width:760px){
  .js .learn-stack{padding-bottom:64px}
  .js .learn-stack .learn-card{top:calc(80px + var(--i,0) * 12px);margin-bottom:160px}
  /* smaller offsets on a phone mean the cut lands sooner: darken harder */
  .js .learn-stack .learn-card::after{opacity:min(.92, calc(var(--cover,0) * 1.6))}
  .js .learn-stack .learn-card .lc-body,
  .js .learn-stack .learn-card .lc-side{opacity:max(0, calc(1 - var(--cover,0) * 2.2))}
}

/* ---------- join: the layering comes back ---------- */
/* same construction as the hero slash: a band painted inside a box that
   bleeds 48px past the section (which clips it) so the scroll travel
   never exposes an edge */
.join-slash{
  position:absolute;left:0;right:0;top:-48px;bottom:-48px;
  background:linear-gradient(102deg,
    transparent calc(30% - 56px),rgba(11,14,17,.10) calc(30% - 56px),
    rgba(11,14,17,.10) calc(30% + 56px),transparent calc(30% + 56px));
  pointer-events:none;z-index:1;will-change:transform;
}
.join-mark{position:relative;z-index:3;will-change:transform}

/* ---------- reduced motion: everything static, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .js .home-hero-copy .rise,.js .home-hero-copy .ln-in,.js .sharpen,
  .art-plate .l-in,.art-subject .l-in,.art-mark .l-in,.art-label{
    opacity:1;transform:none;filter:none;transition:none;
  }
  .art-slash .l-in{clip-path:inset(0);transition:none}
  .words-live .w{color:inherit;transition:none}
  .js .learn-stack{gap:24px;padding-bottom:0}
  .js .learn-stack .learn-card{position:static;margin-bottom:0;transform:none;box-shadow:inset 0 1px 0 rgba(243,241,234,.05)}
  .js .learn-stack .learn-card::after{display:none}
}