/* =============================================================
   Align theme refresh, 2026
   The look and feel layer, loaded after main.css and after the
   per-page stylesheets so it wins without any !important.

   This is the theme Abigail approved on the mockup at
   Website/_planning/Align website update.html. Her layout and her
   copy are untouched: this file only changes how things look.

   Rounder everything, a lighter and smaller top menu, lighter
   headings, smaller eyebrows, and a softer shadow scale.
   No decorative diamonds are added anywhere: the only one on the
   site is the section divider that was already there.
   ============================================================= */

:root{
  /* rounder: the change she reacted to most */
  --r-sm:14px;
  --r-md:22px;
  --r-lg:30px;
  --r-xl:44px;
  --r-pill:999px;

  /* a softer, layered shadow scale in place of one flat card shadow */
  --e1:0 1px 2px rgba(58,53,48,.04), 0 2px 10px rgba(58,53,48,.035);
  --e2:0 2px 4px rgba(58,53,48,.04), 0 12px 32px rgba(58,53,48,.06);
  --e3:0 4px 8px rgba(58,53,48,.05), 0 24px 60px rgba(58,53,48,.09);
  --lift:inset 0 1px 0 rgba(255,255,255,.8);
  --ease:cubic-bezier(.22,1,.36,1);

  /* tokens the refresh needs that main.css does not define yet */
  --gold-deep:#A8864F;
  --gold-wash:#F7F0E4;
  --sage:#7D8F76;
  --sage-deep:#637358;
  --ink:#2A2520;
  --card:#FFFDFB;
  --hair:#EFE8DD;
  --sand-soft:#F6F1E8;
  --cocoa:#4A4137;
}

/* ---------- type: lighter headings ---------- */
h1, h2, h3,
.section-header h2,
.hero-content h1{
  font-weight:300;
  letter-spacing:.004em;
  text-wrap:balance;
}
.module-card h3,
.course-card-body h3,
.step-card h3{ font-weight:400; }

/* ---------- eyebrows: smaller, and a deeper gold so they actually read ---------- */
.eyebrow{
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.28em;
  margin-bottom:16px;
  color:var(--gold-deep);
}
/* the sections that deliberately recolour their eyebrow keep doing so */
.section-header .eyebrow{ color:var(--sage-deep); }
.testimonials .eyebrow,
.how-it-works .section-header .eyebrow{ color:var(--gold-deep); }
.cta-banner .eyebrow,
.adhd-section .section-header .eyebrow{ color:var(--gold-light); }

/* ---------- top menu: smaller and lighter ---------- */
.nav-links a{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.19em;
  color:var(--text-muted);
}
/* Selected tab changes colour only. The weight jump read as bold. */
.nav-links a.active{
  color:var(--gold-deep);
}
.nav-links a:hover{ color:var(--sage-deep); }

/* ---------- buttons: pills ---------- */
.btn-gold,
.btn-cream,
.btn-outline,
.btn-outline-gold,
.btn-sage-outline,
.btn-white-outline{
  border-radius:var(--r-pill);
  font-size:11.5px;
  letter-spacing:.2em;
  padding:16px 34px;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.btn-gold:hover,
.btn-outline-gold:hover,
.btn-outline-gold:visited:hover{
  box-shadow:0 12px 28px rgba(196,168,130,.3);
}

/* ---------- cards and panels ---------- */
.module-card,
.testimonial-card,
.step-card,
.shop-card,
.blog-card,
.related-card{
  border-radius:var(--r-lg);
}

/* The course card is ONE rounded panel, not two. Rounding the image half and
   the body half separately left the card's own white ground showing through at
   the four outer corners and down the seam between them. The card now carries
   the radius and clips its halves (it already has overflow:hidden). */
.course-card{ border-radius:var(--r-lg); }
.module-card{ box-shadow:var(--e1); }
.module-card:hover{ box-shadow:var(--e3); }

/* her module grid is a 2px hairline mosaic; rounded corners need real air */
.module-grid{ gap:18px; }

/* ---------- photographs ---------- */
.about-image img,
.blog-card-media img,
.related-card-media img,
.page-hero-image img{
  border-radius:var(--r-lg);
}
/* the cover shot inside the course card: the mockup's smaller radius, so it
   sits inside the card's 30px corner instead of fighting it */
.course-card-image img{ border-radius:var(--r-md); }
.about-image img{ box-shadow:var(--e3); }

/* ---------- payment-plan line ----------
   Lives here because it appears on the two course detail pages, at the point
   of enrolling, rather than on the courses index. */
.payplan{
  display:flex;align-items:flex-start;gap:9px;
  margin:14px 0 0;font-size:12.5px;font-weight:500;line-height:1.6;
  letter-spacing:.02em;color:var(--text-soft,#5C574F);
}
.payplan svg{
  width:16px;height:16px;flex:none;margin-top:2px;
  fill:none;stroke:var(--gold-deep,#A8864F);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* on the dark enrol panel the plan line is centred and takes the panel's own
   light type, like the paragraph above it */
.ac-course .final .payplan{
  justify-content:center;margin:0 auto 26px;max-width:none;color:#EAF0E6;
}
.ac-course .final .payplan svg{ stroke:#EAF0E6; }

/* ---------- credential pills ---------- */
.cred,
.qual-item,
.course-tag{
  border-radius:var(--r-pill);
}

/* ---------- form fields ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea,
.field input,
.field textarea,
.field select{
  border-radius:var(--r-sm);
}

/* ---------- panels that read as surfaces ---------- */
.faq-item,
.contact-card,
.info-card,
.bestfor,
.note-box,
.callout{
  border-radius:var(--r-md);
}
.contact-form-wrap{ border-radius:var(--r-lg); }

@media (max-width:900px){
  .module-grid{ gap:14px; }
}

/* =============================================================
   HOME: "Three programmes, one aim"
   Replaces the old six-card "Inside the flagship course" grid.
   Ported straight from the approved mockup.
   ============================================================= */
.progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);align-items:stretch}
.prog{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--e1),var(--lift);padding:32px 28px 30px;display:flex;flex-direction:column;gap:13px;
  position:relative;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
.prog,.prog:visited{text-decoration:none;color:inherit}
.prog:hover{transform:translateY(-4px);box-shadow:var(--e3),var(--lift);border-color:var(--gold-light)}
.prog:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.prog.feature{border-color:var(--gold)}
.prog-tag{display:inline-flex;align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-wash);border:1px solid var(--gold-light);padding:6px 14px;border-radius:var(--r-pill)}
.prog-tag.quiet{color:var(--text-muted);background:var(--sand-soft);border-color:var(--hair)}
.prog h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.3rem,1.9vw,1.65rem);font-weight:400;color:var(--ink);line-height:1.2}
.prog .blurb{display:block;font-size:13.8px;font-weight:300;color:var(--text-muted);line-height:1.9}
.prog-top{display:flex;flex-direction:column;gap:13px;align-items:flex-start}

/* the "who this suits" box, with its tag straddling the top edge */
.bestfor{position:relative;background:var(--sand-soft);border:1px solid var(--hair);border-radius:var(--r-md);padding:20px 18px 15px;margin-top:14px}
.bestfor .tag{
  position:absolute;top:0;left:16px;transform:translateY(-50%);
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--gold);padding:5px 13px;border-radius:var(--r-pill);
}
.bestfor p,.bestfor .bf-p{display:block;font-size:12.8px;font-weight:300;color:var(--text);line-height:1.8}
.bestfor p + p,.bestfor .bf-p + .bf-p{margin-top:7px}
.bestfor u{text-decoration:none;font-weight:600;color:var(--ink);box-shadow:inset 0 -0.42em 0 rgba(217,196,163,.45)}

.price{display:flex;flex-direction:column;gap:3px;padding-top:6px;margin-top:auto}
.price b{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.05rem;font-weight:400;color:var(--ink);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.price span{font-size:11.5px;color:var(--text-label);line-height:1.5}
.speclist{display:flex;flex-direction:column;gap:10px;padding:16px 0 6px;border-top:1px solid var(--hair);margin-top:4px}
.speclist li{display:flex;align-items:flex-start;gap:11px;list-style:none;font-size:13.2px;font-weight:300;color:var(--text);line-height:1.65}
.speclist svg{width:13px;height:13px;flex:none;margin-top:5px;stroke:var(--sage);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.prog-note{text-align:center;margin-top:30px;font-size:13.5px;font-weight:300;color:var(--text-muted);line-height:1.9;max-width:760px;margin-left:auto;margin-right:auto}
.prog-note b{font-weight:600;color:var(--ink)}

@media (max-width:900px){
  .progs{grid-template-columns:1fr;gap:16px}
}

/* =============================================================
   CONTACT: one tightened section.
   The page hero and the divider are gone, so "Get in touch" sits
   near the top and there is a lot less scrolling, which is what
   she asked for. The quiz block has been removed from this page.
   ============================================================= */
.contact-section{
  padding:clamp(28px,3.2vw,44px) 72px clamp(60px,6vw,90px);
  gap:clamp(24px,3.4vw,44px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
}
.contact-head{grid-column:1 / -1;max-width:720px;margin-bottom:clamp(20px,2.4vw,30px)}
.contact-head h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;color:var(--ink);
  font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.1;margin-bottom:18px;
}
.contact-head h1 em{font-style:italic;font-weight:400}
.contact-head p{font-size:14.5px;font-weight:300;color:var(--text-muted);line-height:2;max-width:62ch}

/* the three information boxes down the left */
.contact-info{display:flex;flex-direction:column;gap:16px}
.bubble{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--e1),var(--lift);padding:26px 28px;
}
.bubble.tint{background:var(--sand-soft);box-shadow:none;border-color:var(--hair)}
.bubble .eyebrow{margin-bottom:10px}
.bubble h3{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--ink);
  font-size:1.35rem;line-height:1.25;margin-bottom:10px;
}
.bubble h3.bubble-email{font-size:1.12rem;word-break:break-word}
.bubble h3 a{color:inherit;text-decoration:none}
.bubble h3 a:hover{color:var(--gold-deep)}
.bubble p{font-size:13.8px;font-weight:300;color:var(--text-muted);line-height:1.95;margin-bottom:0}
.bubble .btn-gold{margin-top:18px;display:inline-block;width:auto}

@media (max-width:900px){
  .contact-section{grid-template-columns:1fr;padding:28px 22px 60px;gap:26px}
  .contact-info{padding-right:0;border-right:none;border-bottom:none;padding-bottom:0}
}

/* =============================================================
   FOOTER: uses the full width of the page instead of three items
   squashed onto one line. Four columns, then a thin bottom bar.
   ============================================================= */

/* Abigail does not want the decorative gold line + diamond section divider.
   Hide the lines and the diamond everywhere, but keep the .divider element's
   padding so the spacing between sections is unchanged (no crowding). */
.divider::before,
.divider::after,
.divider-diamond{display:none}

footer.site-foot{
  display:block;
  background:linear-gradient(165deg,#564B40 0%,#423A31 100%);
  color:rgba(237,230,219,.84);
  padding:52px 72px 24px;
}
.site-foot .foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(30px,6vw,96px);
  padding-bottom:30px;
  border-bottom:1px solid rgba(237,230,219,.13);
}
.site-foot .foot-brand img{height:54px;width:auto;margin-bottom:12px;display:block}
.site-foot .foot-blurb{
  font-size:12.5px;font-weight:300;line-height:1.8;max-width:42ch;
  color:rgba(237,230,219,.80);letter-spacing:0;text-transform:none;
}
.site-foot h5{
  font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:13px;
  /* the link stack below centres itself in the column, so the heading sits
     centred over it rather than hanging off the left edge */
  text-align:center;
}
/* Reset the leakage from main.css's unscoped `nav {}` header rule (cream
   background, padding, blur, border, sticky positioning) so the footer link
   columns are a plain stack of links, not cream boxes. */
.site-foot nav{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;padding:0;border:0;position:static;z-index:auto;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-foot nav a{
  font-size:12.5px;font-weight:300;letter-spacing:0;text-transform:none;
  color:rgba(237,230,219,.84);transition:color .2s var(--ease);
}
.site-foot nav a:hover{color:#fff}
.site-foot .foot-bot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;font-size:12px;color:rgba(237,230,219,.78);
}
.site-foot .foot-bot a{
  font-size:12px;font-weight:300;letter-spacing:0;text-transform:none;
  color:rgba(237,230,219,.78);
}
.site-foot .foot-bot a:hover{color:var(--gold-light)}

@media (max-width:900px){
  footer.site-foot{padding:40px 22px 20px}
  .site-foot .foot-top{grid-template-columns:1fr 1fr;gap:28px}
  .site-foot .foot-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .site-foot .foot-top{grid-template-columns:1fr}
}

/* =============================================================
   BOOKING: pick your session length.
   Nothing is selected by default, so no one books the wrong
   length by not noticing. The calendar loads once a choice
   is made.
   ============================================================= */
.cal-choice{width:100%}
.cal-choice-lead{
  text-align:center;font-size:13.5px;font-weight:300;color:var(--text-muted);
  line-height:1.9;max-width:52ch;margin:0 auto 22px;
}
.cal-choice-btns{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;
}
.cal-choice-btn,.cal-choice-btn:visited{
  flex:0 1 268px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:20px 26px;cursor:pointer;text-align:center;
  text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--e1),var(--lift);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),
             transform .25s var(--ease),background .25s var(--ease);
}
.cal-choice-btn:hover{transform:translateY(-2px);border-color:var(--gold-light);box-shadow:var(--e2),var(--lift)}
.cal-choice-btn.on{
  border-color:var(--gold);background:var(--gold-wash);
  box-shadow:var(--e2),var(--lift);
}
.cal-choice-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.cal-choice-len{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:1.5rem;line-height:1;color:var(--ink);
}
.cal-choice-note{
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-label);line-height:1.5;
}
.cal-choice-btn.on .cal-choice-note{color:var(--gold-deep)}
.cal-choice-btn .cal-choice-len,
.cal-choice-btn .cal-choice-note{text-decoration:none}
.cal-choice-hint{text-align:center;font-size:12.5px;font-weight:300;font-style:italic;color:var(--text-label);padding:34px 0 10px}
.cal-choice .align-cal-embed{margin-top:4px}

@media (max-width:560px){
  .cal-choice-btns{flex-direction:column;gap:10px}
  .cal-choice-btn{flex:1 1 auto;padding:16px 20px}
}

/* Defensive: this site only ever uses Cal.com INLINE embeds, one per page.
   If Cal's script ever appends a stray <cal-modal-box>, it must not capture
   clicks, because an invisible one silently blocks the buttons underneath. */
cal-modal-box{pointer-events:none}
cal-modal-box[state="open"]{pointer-events:auto}


/* =============================================================
   ROUND 2-4, ported from the approved mockup  2026-10-21
   Abi's notes: no diamond dividers anywhere, a slightly larger
   and more present top menu, sections pulled in because they
   "felt dragged out", and the courses hero off the beige.
   ============================================================= */

:root{
  --gold-ink:#8A6B35;    /* 4.6:1 on cream, 4.9:1 on card. brand gold is 3.1 */
  --sage-deep:#5F7058;   /* cream on it is 4.95:1; sage-medium was 3.2 */
  --text-soft:#5C574F;
  --gold-wash:#F7F0E4;
}

/* ---------- no diamond dividers, anywhere ----------
   there are twelve of these across the templates. hidden in one
   rule rather than edited out of twelve files, so nothing else
   shifts and it is trivial to put back. sections already carry
   their own padding, so no spacing is lost. */
.divider{ display:none; }

/* the other three rotated squares: a credential bullet, the home
   page tag bullet, both become round dots */
.credential-dot{ border-radius:50%; transform:none; }
/* The retired rotated square. The original override only covered the <i>
   markup; the column tags use ::before, so the diamond survived there. */
.adhd-col-tag i,
.adhd-col-tag::before{ border-radius:50%; transform:none; }
/* The centred CTA under the two ADHD columns sits on espresso. */
.adhd-section .section-footer .eyebrow{ color:var(--gold-light); display:block; margin-bottom:16px; }

/* ---------- top menu: larger, and dark enough to read ----------
   was 10.5px at 3.15:1. size alone does not fix "too tiny". */
.nav-links a{ font-size:11.8px; letter-spacing:.17em; color:#55504A; }
.nav-links a.active,
.nav-links a.current{ color:var(--gold-ink); }

/* ---------- sections pulled in about a quarter ---------- */
.about,
.how-it-works,
.modules-section,
.adhd-section,
.testimonials,
.cta-banner{
  padding-top:clamp(50px,5.6vw,80px);
  padding-bottom:clamp(50px,5.6vw,80px);
}

/* ---------- COURSES ----------
   the hero was a beige gradient running straight into another
   beige block, and the first course card butted against it. */
/* the courses hero background lives in page-courses.css: that file
   only loads on that page, and WordPress does not give a slug-named
   template a body class to hang this off. */
.courses-section{ padding-top:clamp(30px,3.4vw,50px); }

/* the two-column feature list lives in page-courses.css, which defines
   .portal-feats and loads after this file. (It was in workbook-demo.css
   until 29.10; that sheet was conditional, so deleting the workbook demo
   would have silently unstyled the whole band.) */


/* =============================================================
   29.10 review pass: lighter small caps, calmer phone layout.
   ============================================================= */

/* Uppercase at 11px reads heavy at 600. 500 keeps it legible without shouting. */
.btn-gold, .btn-cream, .btn-outline, .btn-outline-gold,
.btn-sage-outline, .btn-white-outline{ font-weight:500; }
/* Eight page stylesheets each carry their own copy of the nav rule at 600 and
   load after main.css, so de-bolding there alone fixed the home page only.
   This sheet loads last on every page, which is why the override lives here. */
.nav-links a.active, .nav-links a.current{ font-weight:500; }
.eyebrow, .prog-tag, .course-tag, .adhd-col-tag, .t-name, .testimonial-name{ font-weight:500; }

/* Client stories: the quote was set large enough that one review filled a phone. */
.t-quote{ font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.72; }

@media (max-width:768px){
  /* "How it works" opened with a lot of empty space before the heading, and
     each step card carried desktop-sized padding. */
  .how-it-works{ padding:34px 20px 38px; }
  .how-it-works .section-header{ margin-bottom:26px; }
  /* 1px read as a hairline, so 01, 02 and 03 looked like one block. */
  .steps-grid{ gap:10px; }
  .step-card{ padding:24px 22px; }
  .step-card .step-num{ margin-bottom:10px; font-size:2.1rem; }
  .step-card h3{ margin-bottom:8px; }
  .testimonials{ padding:44px 20px; }
  .testimonials .section-header{ margin-bottom:28px; }
}

@media (max-width:560px){
  /* The footer was running a full phone screen. The brand block goes, the
     group headings go, and each group becomes one wrapped line of links. */
  footer.site-foot{ padding:24px 18px 18px; }
  .site-foot .foot-brand{ display:none; }
  .site-foot .foot-top{ display:block; padding-bottom:14px; }
  .site-foot .foot-top h5{ display:none; }
  .site-foot .foot-top > div + div{ margin-top:7px; }
  .site-foot .foot-top nav{
    display:flex; flex-direction:row; flex-wrap:wrap;
    justify-content:center; gap:3px 14px;
  }
  .site-foot .foot-top nav a{ font-size:11.5px; line-height:1.6; margin:0; }
  .site-foot .foot-bot{
    flex-direction:column; align-items:center; gap:3px;
    padding-top:12px; font-size:11px; text-align:center;
  }
}


/* =============================================================
   2.1  ANIMATED OUTCOME ICONS                       2026-10-29
   Brought back from 1.7.0, where these rules sat behind the
   align-2026 body class that 2.0 removed. Unscoped now and keyed
   on .anim-icons, which exists on the two course detail pages and
   nowhere else. They live in this file, not in the two page
   sheets, for the reason the portal icons went wrong: this is the
   one stylesheet that loads on every page and loads last, so a
   rule here cannot fail to arrive.

   Each icon RESTS in its finished state and moves ONLY while the
   cursor is on its card. Abi's call, 29.10: subtle, something you
   find rather than something playing at you. There is deliberately
   no touch fallback, so on a phone they simply sit still.

   So 0% of every keyframe set is the complete drawing, never a
   blank one: a paused animation renders its 0% frame, and a blank
   resting icon would look broken.
   ============================================================= */

/* A transform-origin of 50% has to mean the element's own box, not
   the whole 44x44 viewBox, or the needle orbits the corner. */
.anim-icons .oc svg [class]{ transform-box:fill-box; }

/* Still by default. focus-within is here so a keyboard can reach them too,
   and because both are a deliberate act by the reader, which is the point. */
.anim-icons .oc svg .anim{ animation-play-state:paused; }
.anim-icons .oc:hover svg .anim,
.anim-icons .oc:focus-within svg .anim{ animation-play-state:running; }

/* ---------- the book: three pages turn across the spine ---------- */
.ic-book .pg{ transform-origin:0% 50%; animation:pageturn 3.4s ease-in-out infinite; }
.ic-book .pg2{ animation-delay:.42s; }
.ic-book .pg3{ animation-delay:.84s; }
@keyframes pageturn{
  0%{ transform:scaleX(1); opacity:0 }
  6%{ opacity:.95 }
  34%{ opacity:.95 }
  40%{ transform:scaleX(-1); opacity:0 }
  100%{ transform:scaleX(-1); opacity:0 }
}

/* ---------- the beliefs: the gold marker steps down the stack ----------
   8px then 15px, which is the gap between this icon's three lines
   (y = 15, 23, 30). 1.7.0 moved 7.5 and 15 for a middle line at 22.5. */
.ic-lines .lead{ animation:leadmove 4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes leadmove{
  0%,10%{ transform:translateY(0) }
  26%,40%{ transform:translateY(8px) }
  56%,70%{ transform:translateY(15px) }
  86%,100%{ transform:translateY(0) }
}

/* ---------- the compass: the needle pivots on the pin and stays there ---------- */
.ic-comp .needle{ transform-origin:50% 50%; animation:clockhand 5s linear infinite; }
@keyframes clockhand{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* ---------- the seedling: the stem draws up, then each leaf opens ---------- */
.ic-grow .stem{ stroke-dasharray:13 24; animation:stemgrow 5s ease-in-out infinite; }
.ic-grow .leafR{ transform-origin:0% 100%; animation:leafR 5s cubic-bezier(.34,1.3,.5,1) infinite; }
.ic-grow .leafL{ transform-origin:100% 100%; animation:leafL 5s cubic-bezier(.34,1.3,.5,1) infinite; }
@keyframes stemgrow{
  0%{ stroke-dashoffset:0 } 4%{ stroke-dashoffset:13.6 }
  30%,100%{ stroke-dashoffset:0 }
}
@keyframes leafR{
  0%{ transform:scale(1); opacity:1 } 4%{ transform:scale(.05); opacity:0 }
  6%{ transform:scale(.05); opacity:0 } 40%,100%{ transform:scale(1); opacity:1 }
}
@keyframes leafL{
  0%{ transform:scale(1); opacity:1 } 4%{ transform:scale(.05); opacity:0 }
  6%,14%{ transform:scale(.05); opacity:0 } 50%,100%{ transform:scale(1); opacity:1 }
}

/* ---------- the magnifier: the glass zooms in and back ---------- */
.ic-mag .mag{ transform-origin:50% 50%; animation:magzoom 4.4s ease-in-out infinite; }
@keyframes magzoom{ 0%,100%{ transform:scale(1) } 44%,56%{ transform:scale(1.24) } }

/* ---------- the heart: two beats, then a rest ---------- */
.ic-heart .heart{ transform-origin:50% 50%; animation:heartbeat 2.4s ease-in-out infinite; }
@keyframes heartbeat{
  0%{ transform:scale(1) } 8%{ transform:scale(1.14) } 17%{ transform:scale(1) }
  26%{ transform:scale(1.07) } 36%,100%{ transform:scale(1) }
}

/* ---------- the checklist: the lines hold, the ticks land 1, 2, 3 ----------
   New for 2.1. 1.7.0 had a rotating arrow in this slot; this icon did not
   exist then. Each tick is drawn by pulling its own dash back, so the three
   lines never move and the ticks land in order. The tick path is 7.17 units
   long. A bare dasharray of 7.4 leaves a round-cap dot sitting where the
   hidden tick should be, because a dash boundary lands exactly on the start
   of the path. A 7.4/20 pattern pushed 8.2 along puts the whole path inside
   the gap instead, with nothing touching it, so the tick really does vanish.
   Same reason the stem above is 13/24 rather than a bare 13.

   All three clear together, then draw in sequence, then hold. Doing it with
   three keyframe sets rather than one plus animation-delay keeps the clear
   on a single beat: a delay would stagger that too and read as a wave. */
.ic-ticks .tk{ stroke-dasharray:7.4 20; }
.ic-ticks .tk1{ animation:tick1 4.5s ease-out infinite; }
.ic-ticks .tk2{ animation:tick2 4.5s ease-out infinite; }
.ic-ticks .tk3{ animation:tick3 4.5s ease-out infinite; }
@keyframes tick1{ 0%,8%{ stroke-dashoffset:0 } 11%,14%{ stroke-dashoffset:8.2 } 22%,100%{ stroke-dashoffset:0 } }
@keyframes tick2{ 0%,8%{ stroke-dashoffset:0 } 11%,26%{ stroke-dashoffset:8.2 } 34%,100%{ stroke-dashoffset:0 } }
@keyframes tick3{ 0%,8%{ stroke-dashoffset:0 } 11%,38%{ stroke-dashoffset:8.2 } 46%,100%{ stroke-dashoffset:0 } }

/* Nothing moves at all for anyone who has asked their machine for that, even
   with the cursor on the card. */
@media (prefers-reduced-motion:reduce){
  .anim-icons .oc svg *{ animation-play-state:paused !important; }
}