/* ============================================================
   SUNDIAL ACCOUNTING — HOMEPAGE STYLESHEET

   Loads only on the front page, after style.css.

     1.  Motion
     2.  Hero
     3.  Dial and portrait
     4.  Statement
     5.  Problem
     6.  Why Sundial
     7.  About
     8.  Getting started
     9.  FAQ
     10. Credentials
     11. Responsive

   Everything shared with other templates — tokens, section theming,
   header, footer, buttons, eyebrow, cards, the post card, the
   closing CTA band and scroll reveal — lives in style.css and is
   not repeated here.
   ============================================================ */


/* ---------- 1. MOTION ------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* The gnomon's shadow eases to a new angle rather than jumping. */
  #dialShadow{ transition:transform 1.2s cubic-bezier(.22,.9,.3,1); }

  /* Hero entrance. CSS only, no JavaScript dependency, so it cannot
     leave content hidden if the script fails. */
  .rise{ opacity:0; transform:translateY(18px); animation:rise .8s ease forwards; }
  .rise--d1{ animation-delay:.08s }
  .rise--d2{ animation-delay:.18s }
  .rise--d3{ animation-delay:.28s }
  .rise--d4{ animation-delay:.4s }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}


/* ---------- 2. HERO --------------------------------------- */
/* Dark tokens come from .section--patina in the markup. This rule only
   replaces the flat ground with the gradient and zeroes the section
   padding, because the hero pads its own inner grid. */
.hero{
  --section-pad-start:0;
  --section-pad-end:0;
  background:
    radial-gradient(1100px 640px at 82% -10%, rgba(217,164,65,.14), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, rgba(29,59,52,.9), transparent 65%),
    var(--patina);
  overflow:hidden;
}
.hero__inner{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:3.5rem; align-items:center;
  padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem) clamp(4rem,2.8rem + 4.5vw,6rem);
}
.hero__title{
  font-size:var(--step-5);
  margin:1.375rem 0 1.25rem;
  max-inline-size:14ch;
}
.hero__title em{ font-style:normal; color:var(--brass-bright); }
.hero__lede{
  font-size:var(--step-1);
  color:var(--color-text);
  max-inline-size:52ch;
  margin-bottom:2.125rem;
}
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.75rem; }
.hero__detail{
  display:flex; gap:2.125rem; flex-wrap:wrap;
  border-top:1px solid var(--patina-line);
  padding-top:1.625rem;
}
.hero__detail li{
  display:flex; align-items:baseline; gap:.625rem;
  font-family:var(--font-mono); font-size:var(--step--2);
  letter-spacing:.06em; color:rgba(251,250,244,.78);
}
.hero__detail li::before{
  content:""; flex:none; inline-size:14px; block-size:1px;
  background:var(--brass); transform:translateY(-.25em);
}


/* ---------- 3. DIAL AND PORTRAIT -------------------------- */
/* The signature. Reads the visitor's actual local time.

   The portrait sits in front of the dial. Both occupy the same grid
   cell of .hero__figure rather than being absolutely positioned, so
   the cell keeps its natural height and nothing overflows the hero. */
.hero__figure{
  position:relative;
  display:grid;
  place-items:center;
}
.hero__figure > *{ grid-area:1 / 1; }

.dial-stage{ position:relative; display:grid; place-items:center; padding:10px; }
.dial{ width:min(440px,86%); filter:drop-shadow(0 30px 60px rgba(0,0,0,.4)); }

/* Knocked back behind the portrait: at full strength the ring and
   gnomon cut across the face. */
.hero__figure .dial{ opacity:.55; }

/* Bottom-aligned, so the faded hem meets the foot of the figure. The
   fade itself is baked into the image's alpha channel, not applied
   here — a CSS mask would fade the portrait against the dial behind
   it and leave a visible band. */
.hero__portrait{
  align-self:end;
  justify-self:center;
  inline-size:min(430px, 92%);
  block-size:auto;
  display:block;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.45));
}

/* ---------- 4. STATEMENT ---------------------------------- */
/* Centred section intro: eyebrow, heading, short supporting copy,
   then the grid that follows. Symmetric, so no space is stranded, and
   the measure stays readable at any container width. */
.statement{ max-inline-size:48rem; margin-inline:auto; text-align:center; }
.statement__title{ font-size:var(--step-4); margin-top:1.25rem; }
.statement__body{ margin-top:var(--space-md); }
.statement__body p{ margin-inline:auto; max-inline-size:58ch; }
.statement__lead{ font-size:var(--step-2); line-height:1.5; color:var(--color-heading); }
.statement__lead + p{
  margin-top:var(--space-sm);
  font-size:var(--step-1); color:var(--color-muted);
}


/* ---------- 5. PROBLEM ------------------------------------ */
/* Split argument closing on a full-width statement bar. */
.problem{ display:grid; gap:var(--space-lg); }
.problem__title{ font-size:var(--step-4); margin-top:1.125rem; max-inline-size:18ch; }
.problem__body{ color:var(--color-muted); font-size:var(--step-1); max-inline-size:56ch; }

/* Brand copy, never attributed to a client. Deliberately not a
   blockquote: no quote mark, no attribution. */
.statement-bar{
  margin:var(--space-xl) auto 0;
  max-inline-size:36ch;
  padding-block:var(--space-md);
  border-block:1px solid var(--color-accent-text);
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--step-3);
  line-height:1.3;
  color:var(--color-heading);
}


/* ---------- 6. WHY SUNDIAL -------------------------------- */
/* Sticky argument, scrolling list. */
.why{ display:grid; gap:var(--space-lg); }
.why__title{ font-size:var(--step-4); margin-top:1.125rem; }
.why__intro p{ margin-top:var(--space-md); color:var(--color-muted); font-size:var(--step-1); }
.why__item{
  display:grid; grid-template-columns:auto 1fr; gap:.25rem 1.125rem;
  padding-block:var(--space-md);
  border-top:1px solid var(--color-rule);
}
.why__item:last-child{ border-bottom:1px solid var(--color-rule); }
.why__tick{
  grid-row:1 / span 2; inline-size:3px; block-size:1.5rem;
  margin-top:.5rem; background:var(--color-accent-text);
}
.why__item-title{ font-size:var(--step-2); }
.why__item-text{ color:var(--color-muted); font-size:var(--step--1); }


/* ---------- 7. ABOUT -------------------------------------- */
.about{ display:grid; gap:var(--space-lg); align-items:center; }
.about__title{ font-size:var(--step-4); margin-top:1.125rem; max-inline-size:18ch; }
.about__body{
  margin-top:var(--space-md);
  color:var(--color-muted); font-size:var(--step-1); max-inline-size:54ch;
}
.about__actions{ margin-top:var(--space-lg); }
.about__figure{ justify-self:center; inline-size:min(360px, 82%); }


/* ---------- 8. GETTING STARTED ---------------------------- */
/* A real sequence, so the numerals earn their place. No connector and
   no rings: the numeral alone carries the order. */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-lg) var(--space-xl);
}
.step__num{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 1.4rem + 1.35vw, 2.5rem);
  line-height:1; letter-spacing:.1em;
  color:var(--color-accent-text);
}
.step__title{ font-size:var(--step-2); margin:var(--space-md) 0 .5rem; }
.step__text{ font-size:var(--step--1); color:var(--color-muted); max-inline-size:32ch; }


/* ---------- 9. FAQ ---------------------------------------- */
.faq-layout{ display:grid; gap:var(--space-lg); }
.faq-layout__title{ font-size:var(--step-4); margin-top:1.125rem; max-inline-size:14ch; }
.faq-list{ max-inline-size:47.5rem; }
.faq{ border-top:1px solid var(--color-rule); padding:6px 0; }
.faq:last-child{ border-bottom:1px solid var(--color-rule); }
.faq__q{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--font-display); font-size:var(--step-2);
  color:var(--color-heading);
  padding:1.25rem .25rem;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+"; flex:none;
  font-family:var(--font-mono); font-size:1.375rem;
  color:var(--color-accent-text);
  transition:transform .25s ease;
}
.faq[open] .faq__q::after{ transform:rotate(45deg); }
.faq__a{ padding:0 .25rem 1.375rem; color:var(--color-muted); max-inline-size:62ch; }


/* ---------- 10. CREDENTIALS ------------------------------- */
/* Self-hosted badge artwork, not the Credly iframe embed: no
   third-party script, and the transparent PNGs sit on the section
   ground directly.

   No card panels and no text labels — each badge already contains its
   own name and border, so a frame around it only competes.

   Four badges, so the wide layout puts them in a 2x2 block beside the
   text rather than a single row. Four across would squeeze the text
   column and force the badges down to about 100px; 2x2 keeps them at
   full size and balances the two columns. */

.creds{ display:grid; gap:var(--space-lg); }

.creds__intro{ text-align:center; }
.creds__intro .eyebrow{ justify-content:center; }
.creds__intro .section__lede{ margin-inline:auto; }

/* Stacked: a centred row that wraps to 2x2 on its own when the
   viewport cannot hold four. */
.creds__list{
  display:flex; justify-content:center; align-items:flex-start;
  flex-wrap:wrap; gap:var(--space-lg);
  list-style:none; margin:0; padding:0;
}

.creds__item{
  display:block; line-height:0;
  border-radius:var(--radius-sm);
  transition:transform .2s ease;
}
.creds__item:hover{ transform:translateY(-4px); }
.creds__item img{ inline-size:132px; block-size:auto; }

.creds__disclaimer{
  /* No margin-top: the grid gap already separates it. */
  font-size:var(--step--2);
  line-height:1.7;
  color:var(--color-muted);
  text-align:center;
  max-inline-size:82ch;
  margin-inline:auto;
}

/* Two columns: text left, badges 2x2 right.

   Proportional columns, matching .about, rather than "1fr auto". With
   auto the badge column shrinks to its content and 1fr absorbs every
   spare pixel, so on a wide container the badges get pinned to the far
   right with a large dead gap beside the text. Two proportional tracks
   with the badges centred in theirs keeps the pair balanced at any
   container width. */
@media (min-width:64rem){
  .creds{
    grid-template-columns:1.05fr .95fr;
    gap:var(--space-xl);
    align-items:center;
  }
  .creds__intro{ text-align:start; }
  .creds__intro .eyebrow{ justify-content:flex-start; }
  .creds__intro .section__lede{ margin-inline:0; max-inline-size:44ch; }

  .creds__list{
    display:grid;
    grid-template-columns:repeat(2, auto);
    justify-content:center;
    gap:var(--space-md) var(--space-lg);
  }

  .creds__disclaimer{
    grid-column:1 / -1;
    text-align:start;
    margin-inline:0;
    padding-top:var(--space-md);
    border-top:1px solid var(--color-rule);
    max-inline-size:none;
  }
}

/* Between phone and the two-column breakpoint, hold four in one row
   for as long as they fit, then let flex wrap them to 2x2. */
@media (max-width:47.5rem){
  .creds__list{ gap:var(--space-md); }
  .creds__item img{ inline-size:120px; }
}

/* Phone: a deliberate 2x2 grid rather than leaving it to flex wrap,
   so the two rows align in columns instead of centring independently. */
@media (max-width:35rem){
  .creds__list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    justify-items:center;
    gap:var(--space-md);
    max-inline-size:19rem;
    margin-inline:auto;
  }
  .creds__item img{ inline-size:min(132px, 100%); }
}


/* ---------- 11. RESPONSIVE -------------------------------- */
@media (max-width:59.999rem){
  .hero__inner{ grid-template-columns:1fr; gap:2.5rem; }
  /* .hero__figure now wraps the dial, so the order moves to it. */
  .hero__figure{ order:-1; }
  .dial{ width:min(340px,74%); }
  .hero__portrait{ inline-size:min(320px,76%); }
  .steps{ grid-template-columns:1fr; }
}

@media (max-width:35rem){
  .hero__detail{ gap:.875rem; flex-direction:column; }
}

@media (min-width:60rem){
  .problem{ grid-template-columns:1.05fr 1fr; gap:var(--space-xl); align-items:start; }
  .why{ grid-template-columns:.85fr 1.15fr; gap:var(--space-xl); align-items:start; }
  .why__intro{ position:sticky; top:7rem; }
  .about{ grid-template-columns:1.05fr .95fr; gap:var(--space-xl); }
  .faq-layout{ grid-template-columns:.8fr 1.2fr; gap:var(--space-xl); align-items:start; }
  .faq-layout__head{ position:sticky; top:7rem; }
}