/* The Gran Life — Ages & Stages + Gifts & Toys
   Loaded after gran-life.css on the /stages/ pages only (body.st-page).
   The site stylesheet supplies the header, footer and base styles. The rules
   below restore the stage pages' own reading size and spacing inside <main>,
   wrapped in :where() so they carry no extra specificity and every component
   rule further down still wins. */

/* Names the stage components use, mapped to the same brand colors */
:root{
  --gl-peri:#8BA7C9; --gl-gray:#D1D8E4; --gl-off:#F6F7F9; --gl-slate:#2A3340;
}

body.st-page{font-size:19px;line-height:1.65}
.st-page main{
  --gl-radius:16px; --gl-shadow:0 2px 10px rgba(44,62,107,.08); --gl-shadow-lg:0 10px 30px rgba(44,62,107,.14);
  background:var(--gl-off);color:var(--gl-slate);
}
:where(.st-page main) :is(h1,h2,h3,h4){font-family:var(--gl-font-head);color:var(--gl-navy);line-height:1.2;margin:0 0 .5em;font-weight:800}
:where(.st-page main) h1{font-size:clamp(2.1rem,5vw,3rem)}
:where(.st-page main) h2{font-size:clamp(1.6rem,3.6vw,2.2rem)}
:where(.st-page main) h3{font-size:1.3rem}
:where(.st-page main) h4{font-size:1.1rem}
:where(.st-page main) p{margin:0 0 1em}
:where(.st-page main) a:hover{color:var(--gl-navy)}
:where(.st-page main) .gl-container{max-width:1100px;padding:0 20px}
:where(.st-page main) .gl-section{padding:3.2rem 0}
:where(.st-page main) .gl-section--tint{background:var(--gl-white)}
:where(.st-page main) .gl-eyebrow{font-family:var(--gl-font-head);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;color:var(--gl-blue);margin-bottom:.6rem}
:where(.st-page main) .gl-lead{font-size:1.18rem;line-height:1.6}
:where(.st-page main) .gl-script{font-family:var(--gl-font-script);font-weight:600;color:var(--gl-gold);font-size:1em;line-height:inherit}
:where(.st-page main) .gl-btn{font-size:1.05rem;padding:.9rem 1.5rem}
:where(.st-page main) .gl-btn--sm{font-size:.95rem;padding:.65rem 1.1rem}
:where(.st-page main) .gl-btnrow{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}

/* Breadcrumb + hero */
:where(.st-page main) .gl-crumb{font-family:var(--gl-font-head);font-size:.95rem;margin:1.2rem 0 0;color:var(--gl-slate)}
:where(.st-page main) .gl-crumb a{color:var(--gl-blue);text-decoration:none}
.st-hero{padding:2rem 0 2.6rem}
.st-hero__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center}
.st-hero__badge{background:var(--gl-navy);color:var(--gl-off);border-radius:var(--gl-radius);padding:1.6rem;text-align:center;box-shadow:var(--gl-shadow-lg)}
.st-hero__badge .age{font-family:var(--gl-font-head);font-weight:800;font-size:2.4rem;color:var(--gl-gold);line-height:1}
.st-hero__badge .lbl{font-family:var(--gl-font-head);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;margin-top:.4rem}
.st-hero__badge p{margin:.9rem 0 0;color:var(--gl-pale);font-size:1rem}

/* Stage timeline (hub + stage pages) */
.st-timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin:1.6rem 0 0;list-style:none;padding:0}
.st-timeline a{display:block;text-decoration:none;background:var(--gl-white);border:2px solid var(--gl-gray);border-radius:12px;padding:.7rem .4rem;text-align:center;font-family:var(--gl-font-head);font-weight:700;font-size:.85rem;color:var(--gl-navy);line-height:1.2}
.st-timeline a span{display:block;font-size:1.05rem;font-weight:800;color:var(--gl-blue)}
.st-timeline a:hover,.st-timeline a[aria-current]{border-color:var(--gl-gold);background:var(--gl-pale)}

/* Overview */
.st-domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem;margin-top:1.4rem}
.st-domain{background:var(--gl-white);border-radius:var(--gl-radius);padding:1.3rem 1.3rem 1rem;box-shadow:var(--gl-shadow);border-top:5px solid var(--gl-blue)}
.st-domain__icon{width:46px;height:46px;border-radius:50%;background:var(--gl-pale);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.st-domain__icon svg{width:26px;height:26px;stroke:var(--gl-navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-domain h3{font-size:1.15rem;margin-bottom:.4rem}
.st-domain p{font-size:1.02rem;margin-bottom:.5em}
.st-domain ul{padding-left:1.1rem;margin:0 0 .4em;font-size:1.02rem} .st-domain li{margin:.25rem 0}
.st-when{display:inline-block;font-family:var(--gl-font-head);font-weight:700;font-size:.8rem;color:var(--gl-blue);background:var(--gl-pale);border-radius:999px;padding:.1rem .6rem;margin-right:.3rem}

/* Did you know */
.st-dyk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.2rem;margin-top:1.4rem}
.st-dyk__card{background:var(--gl-white);border-left:6px solid var(--gl-gold);border-radius:12px;padding:1.3rem 1.4rem;box-shadow:var(--gl-shadow)}
.st-dyk__card h3{font-size:1.15rem;margin-bottom:.5rem}
.st-dyk__card p{font-size:1.02rem;margin-bottom:.5em}
.st-dyk__src{font-family:var(--gl-font-head);font-size:.85rem;color:var(--gl-blue)}
.st-dyk__src a{text-decoration:none}

/* Connect box + checkpoint note */
.st-connect{background:var(--gl-navy);color:var(--gl-off);border-radius:var(--gl-radius);padding:1.8rem 2rem;margin-top:2rem;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.st-connect h3{color:var(--gl-gold);margin-bottom:.5rem}
.st-connect a{color:var(--gl-pale)}
.st-connect ul{margin:0;padding-left:1.1rem;font-size:1.05rem;color:var(--gl-pale)} .st-connect li{margin:.35rem 0}
.st-connect__icon{width:52px;height:52px;border-radius:50%;background:var(--gl-gold);display:flex;align-items:center;justify-content:center}
.st-connect__icon svg{width:30px;height:30px;stroke:var(--gl-navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-note{background:var(--gl-pale);border-radius:12px;padding:1rem 1.3rem;font-size:1rem;margin-top:1.4rem}
.st-bridge{font-family:var(--gl-font-head);font-weight:800;font-size:1.35rem;color:var(--gl-navy);text-align:center;max-width:760px;margin:2.4rem auto 0}

/* Products */
.st-disclosure{background:var(--gl-white);border:1px solid var(--gl-gray);border-radius:12px;padding:.9rem 1.2rem;font-size:.98rem;margin:1.2rem 0 1.8rem}
.st-disclosure strong{font-family:var(--gl-font-head)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem}
.pcard{background:var(--gl-white);border-radius:var(--gl-radius);box-shadow:var(--gl-shadow);display:flex;flex-direction:column;overflow:hidden;position:relative;border:2px solid transparent}
.pcard--gl{border-color:var(--gl-gold)}
.pcard__img{margin:0;aspect-ratio:4/3;background:var(--gl-off);display:flex;align-items:center;justify-content:center;padding:1rem;position:relative}
.pcard__img img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pcard__ph{text-align:center;font-family:var(--gl-font-head);font-size:.85rem;color:var(--gl-peri);border:2px dashed var(--gl-gray);border-radius:10px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.6rem}
.pcard__ph strong{color:var(--gl-blue)}
.pcard__ribbon{position:absolute;z-index:2;top:12px;left:12px;background:var(--gl-gold);color:var(--gl-navy);font-family:var(--gl-font-head);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;box-shadow:var(--gl-shadow)}
.pcard__body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard__brand{font-family:var(--gl-font-head);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-blue);font-weight:700}
.pcard h3{font-size:1.15rem;margin:0;line-height:1.25}
.pcard__focus{display:inline-block;align-self:flex-start;font-family:var(--gl-font-head);font-weight:700;font-size:.8rem;color:var(--gl-navy);background:var(--gl-pale);border-radius:999px;padding:.15rem .7rem}
.pcard__award{font-size:.95rem;color:var(--gl-navy);font-style:italic;margin:0}
.pcard__why{font-size:.98rem;margin:0;color:var(--gl-slate)}
.pcard__gl{font-size:.98rem;margin:0;background:var(--gl-off);border-left:4px solid var(--gl-gold);padding:.5rem .8rem;border-radius:0 8px 8px 0}
.pcard__foot{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.pcard__price{font-family:var(--gl-font-head);font-weight:800;color:var(--gl-navy);font-size:1.05rem}
.pcard__price small{display:block;font-weight:400;font-size:.75rem;color:var(--gl-blue)}
.pcard__na{font-family:var(--gl-font-head);font-size:.78rem;color:var(--gl-blue);margin:0;width:100%}

/* Shared sections */
.sh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:1.2rem}
.sh-card{background:var(--gl-white);border-radius:var(--gl-radius);padding:1.4rem 1.5rem;box-shadow:var(--gl-shadow)}
.sh-card h3{font-size:1.15rem} .sh-card p,.sh-card li{font-size:1rem}
.sh-card ul{padding-left:1.1rem;margin:.4em 0}
.sh-vision{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;background:var(--gl-white);border-radius:var(--gl-radius);padding:1.6rem 1.8rem;box-shadow:var(--gl-shadow);margin-top:1.2rem}
.sh-vision img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--gl-gold)}
.sh-vision .sig{font-family:var(--gl-font-script);font-weight:600;font-size:1.5rem;color:var(--gl-navy);margin:0}
.refs{font-size:.95rem;columns:2;column-gap:2.4rem}
.refs li{break-inside:avoid;margin:0 0 .6rem}
.refs ul{padding-left:1.1rem;margin:0}
.refs a{word-break:break-word}
.st-nextprev{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}

@media (max-width:820px){
  body.st-page{font-size:18px}
  .st-hero__grid{grid-template-columns:1fr}
  .st-timeline{grid-template-columns:repeat(4,1fr)}
  .st-connect{grid-template-columns:1fr}
  .sh-vision{grid-template-columns:1fr;text-align:center} .sh-vision img{margin:0 auto}
  .refs{columns:1}
}
@media (max-width:480px){ .st-timeline{grid-template-columns:repeat(2,1fr)} :where(.st-page main) .gl-section{padding:2.4rem 0} }
@media print{ .st-page .gl-header,.st-page .gl-footer,.st-timeline,.st-nextprev{display:none} }

/* Hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.3rem;margin-top:1.2rem}
.hub-card{display:flex;flex-direction:column;gap:.4rem;background:var(--gl-off);border:2px solid var(--gl-gray);border-radius:var(--gl-radius);padding:1.4rem 1.5rem;text-decoration:none;color:var(--gl-slate);transition:transform .15s,box-shadow .15s,border-color .15s}
.hub-card:hover{transform:translateY(-2px);box-shadow:var(--gl-shadow-lg);border-color:var(--gl-gold);color:var(--gl-slate)}
.hub-card__age{font-family:var(--gl-font-head);font-weight:800;font-size:1.3rem;color:var(--gl-blue)}
.hub-card h3{margin:0;font-size:1.35rem} .hub-card p{font-size:1rem;margin:0}
.hub-card__meta{margin-top:auto;padding-top:.5rem;font-family:var(--gl-font-head);font-weight:700;font-size:.9rem;color:var(--gl-navy)}

/* Focus icon tile (shown until a product photo is added) */
.pcard__tile{width:100%;height:100%;background:linear-gradient(160deg,var(--gl-pale) 0%,#DCE6F6 100%);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:.8rem;position:relative}
.pcard__tile::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:var(--gl-white);opacity:.9;top:50%;left:50%;transform:translate(-50%,-62%)}
.pcard__icon{position:relative;width:68%;max-width:190px;height:auto}
.pcard__tile-lbl{position:relative;font-family:var(--gl-font-head);font-weight:800;font-size:.9rem;color:var(--gl-navy);text-align:center;letter-spacing:.02em}

/* Illustrated scene tile */
.pcard__tile--scene{padding:0;gap:0;background:#FBFAF7;overflow:hidden;justify-content:flex-start}
.pcard__tile--scene::before{display:none}
.pcard__tile--scene img{width:100%;height:calc(100% - 2.2rem);object-fit:contain;object-position:center top;max-height:none;mix-blend-mode:normal;background:#FBFAF7}
.pcard__tile--scene .pcard__tile-lbl{position:absolute;left:0;right:0;bottom:0;padding:.45rem .6rem;background:rgba(255,255,255,.88);border-top:1px solid var(--gl-gray);font-size:.9rem}

/* The question block sits inside the hero (October 2026). Give it room
   before the hero's own lead paragraphs, as in Alison's preview. */
.st-page .gl-stageq{margin:0 0 1.8rem}