/* Parent guide: "Which Debate Class Is Right for My Child?" — Gutenberg-editable reference layout. Self-contained on purpose: shares the design tokens of the World Schools guide but no CSS, so either page can be restyled without touching the other. Layout: the content column keeps the guide's full 1234px measure — text and tables share it end to end — while the shell widens so the vertical sticky contents rail rides alongside it on the right instead of carving into it. */ /* Banner ------------------------------------------------------------------ */ .capstone-guide__banner .page-banner__description{max-width:760px} /* Default banner crop (object-position:top) decapitates this photo; keep the speaker in frame. */ .capstone-guide__banner .page-banner__image img{object-position:center 35%} /* Guide banner: always white type on dark overlay (beat .entry-content h1 navy) */ .page-banner.capstone-guide__banner .page-banner__title, .entry-content .page-banner.capstone-guide__banner .page-banner__title, .page__single--guide .page-banner .page-banner__title{ color:#fff!important; text-shadow:0 2px 18px rgba(0,0,0,.45); } .page-banner.capstone-guide__banner .page-banner__description, .page-banner.capstone-guide__banner .page-banner__description p, .entry-content .page-banner.capstone-guide__banner .page-banner__description, .entry-content .page-banner.capstone-guide__banner .page-banner__description p, .page__single--guide .page-banner .page-banner__description, .page__single--guide .page-banner .page-banner__description p{ color:#fff!important; text-shadow:0 1px 12px rgba(0,0,0,.4); } /* Stronger left-to-right scrim so white type always reads on light photos */ .page-banner.capstone-guide__banner .page-banner__image::before{ background:linear-gradient(270deg,rgba(10,16,40,.35) 0%,rgba(10,16,40,.72) 45%,rgba(0,0,0,.82) 100%)!important; } .page-banner.capstone-guide__banner{ position:relative; z-index:1; overflow:hidden; } .page-banner.capstone-guide__banner .page-banner__content{ position:relative; z-index:2; } /* Shell ------------------------------------------------------------------- */ .capstone-guide{padding:24px 24px 92px;background:#f6f8fb;color:#34405e} .capstone-guide a{color:#123985;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .capstone-guide a:visited{color:#6e2362} .capstone-guide a:hover{color:#ff1c9d} .capstone-guide a:focus-visible,.capstone-guide summary:focus-visible{outline:3px solid #ff1c9d;outline-offset:4px;border-radius:4px} /* 1558px = 1234px content measure + 40px gutter + 284px contents rail — the same content-plus-rail proportions as the single-post reference layout. */ .capstone-guide__byline,.capstone-guide__layout{width:100%;max-width:1558px;margin-right:auto;margin-left:auto} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* Byline ------------------------------------------------------------------ */ .capstone-guide__byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:-28px auto 46px!important;padding:14px 20px;border:1px solid rgba(23,41,62,.13);border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(23,41,62,.07);color:#4c5175;font-size:.94rem;font-weight:650;line-height:1.5} .capstone-guide__byline strong{color:#17293e;font-weight:850} .capstone-guide__byline mark{padding:3px 9px;border-radius:6px;background:#ffe8a3;color:#6b4a00;font-size:.83rem;font-weight:850;letter-spacing:.02em} /* Layout: content column + vertical contents rail on the right ------------- */ /* Modelled on the single-post reference layout: the article is a two-track grid — every block in the 1234px content track, the contents rail pinned sticky in the right track from the top of the article to the bottom, so it is visible alongside the text from the first scroll. The content track shrinks only on viewports too narrow to hold the rail beside it. */ .capstone-guide__layout{display:block!important} .capstone-guide__layout>.wp-block-group__inner-container{display:block!important;width:100%;max-width:none!important;margin:0!important} .capstone-guide__article{display:grid;grid-template-columns:minmax(0,1fr) 284px;column-gap:40px;align-items:start;min-width:0;max-width:1558px;width:100%;margin-right:auto;margin-left:auto} /* WordPress renders constrained groups with a .wp-block-group__inner-container wrapper div; display:contents promotes its children into real grid items so the TOC can actually take the right-hand track. Without this the wrapper is the grid's only child and the rail track stays empty. */ .capstone-guide__article>.wp-block-group__inner-container{display:contents} /* :not() keeps the TOC out of this blanket rule — otherwise its (0,2,0) specificity beats .capstone-guide__toc's grid-column:2 and the rail lands back in the content track. Same pattern as the reference article. */ .capstone-guide__article>.wp-block-group__inner-container>*:not(.capstone-guide__toc){grid-column:1;min-width:0} .capstone-guide__toc{grid-column:2;grid-row:1 / span 8;position:sticky;top:96px;align-self:start;box-sizing:border-box;max-height:calc(100vh - 120px);margin:0;padding:18px;overflow:auto;border:1px solid rgba(18,57,133,.14);border-radius:8px;background:#fff;box-shadow:0 14px 34px rgba(23,41,62,.08);z-index:3} .capstone-guide__toc h2{margin:0 0 12px!important;color:#123985;font-size:.75rem!important;font-weight:900!important;letter-spacing:.08em;line-height:1!important;text-transform:uppercase} .capstone-guide__toc ul{display:grid;grid-template-columns:1fr;gap:2px;margin:0!important;padding:0!important;list-style:none!important} .capstone-guide__toc li{margin:0!important} .capstone-guide__toc a{display:flex;align-items:center;min-height:34px;padding:7px 12px;border-left:3px solid rgba(18,57,133,.16);color:#34405e;font-size:.84rem;font-weight:700;line-height:1.35;text-decoration:none;transition:border-color .18s ease,background .18s ease,color .18s ease} .capstone-guide__toc a:hover{border-left-color:#ff1c9d;background:rgba(18,57,133,.055);color:#ff1c9d} /* Last contents item is the placement action — visible in the sticky rail from the first scroll. */ .capstone-guide__toc li.capstone-guide__toc-cta{margin-top:8px!important;padding-top:8px;border-top:1px solid rgba(18,57,133,.12)} .capstone-guide__toc li.capstone-guide__toc-cta a{border-left-color:#ff1c9d;color:#ff1c9d;font-weight:850} /* Sections after intro use full guide width (both columns under TOC). */ .capstone-guide__article>.wp-block-group__inner-container>.capstone-guide__section, .capstone-guide__article>.wp-block-group__inner-container>.capstone-guide__section~*{grid-column:1 / -1;max-width:none} /* Value callout — full-width highlight, not a lonely 3-up card */ .capstone-guide__value-callout{margin:8px 0 36px!important;padding:22px 26px;border:1px solid rgba(18,57,133,.14);border-left:5px solid #123985;border-radius:0 14px 14px 0;background:#fff;box-shadow:0 14px 34px rgba(23,41,62,.07);color:#34405e!important;font-size:1.05rem!important;line-height:1.68!important} .capstone-guide__value-callout strong{color:#17293e} .capstone-guide__value-callout .capstone-guide__value-label{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:6px;background:#123985;color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase} /* Guide posts: drop outer container squeeze */ .page__single--guide .page__single__content--guide{max-width:none;width:100%;padding-left:0;padding-right:0;margin:0} .page__single--guide .capstone-guide__banner{margin:0} /* single-card concerns: prefer .capstone-guide__value-callout instead of :has() */ .capstone-guide__concerns--single{grid-template-columns:1fr!important;max-width:100%} /* Typography -------------------------------------------------------------- */ .capstone-guide__lead{margin:0 0 40px!important;color:#17293e;font-size:1.22rem!important;font-weight:620;line-height:1.72!important} .capstone-guide__section{margin:0 0 64px;scroll-margin-top:112px} .capstone-guide__section:last-child{margin-bottom:0} .capstone-guide__article h2{margin:0 0 18px!important;color:#17293e;font-size:2.15rem!important;font-weight:850!important;letter-spacing:-.025em;line-height:1.16!important} .capstone-guide__article h3{margin:34px 0 12px!important;color:#17293e;font-size:1.35rem!important;font-weight:820!important;line-height:1.3!important} /* Body copy runs the full content column — the same measure as the tables. */ .capstone-guide__article p,.capstone-guide__article li{color:#34405e;font-size:1.0625rem;line-height:1.68} .capstone-guide__article p{margin:0 0 18px} .capstone-guide__article ul,.capstone-guide__article ol{margin:20px 0 24px;padding-left:24px} .capstone-guide__article li{margin-bottom:9px;padding-left:4px} /* Three parent-question cards --------------------------------------------- */ .capstone-guide__concerns{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 34px} .capstone-guide__concerns>.wp-block-group__inner-container{display:contents} .capstone-guide__concern{display:flex;flex-direction:column;gap:10px;margin:0!important;padding:22px 22px 24px;border:1px solid rgba(23,41,62,.13);border-top:4px solid #123985;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(23,41,62,.07);color:#4c5175!important;font-size:.97rem!important;line-height:1.6!important} .capstone-guide__concern:nth-child(2){border-top-color:#ff1c9d} .capstone-guide__concern:nth-child(3){border-top-color:#6b3f83} .capstone-guide__concern strong{display:block;color:#17293e;font-size:1.12rem;font-weight:880;line-height:1.3} /* Callouts ---------------------------------------------------------------- */ .capstone-guide__note,.capstone-guide__key-point,.capstone-guide__cta,.capstone-guide__figure{overflow:hidden} .capstone-guide__note{margin:24px 0 28px!important;padding:18px 22px;border:1px solid rgba(255,28,157,.2);border-left:5px solid #ff1c9d;border-radius:0 14px 14px 0;background:#fff;color:#34405e!important} .capstone-guide__note strong{color:#17293e} .capstone-guide__key-point{margin:22px 0 28px!important;padding:16px 20px;border-left:4px solid #123985;border-radius:0 12px 12px 0;background:#eef3fb;color:#34405e!important} .capstone-guide__key-point strong{color:#17293e} /* Pulls run as typographic quotes in the flow — a pink rule and a step up in weight, never a box. A pull followed by a pull reads as intro + quotation: the second one takes the larger voice. */ .capstone-guide__pull{margin:24px 0 8px;padding:2px 0 2px 22px;border-left:4px solid #ff1c9d;background:transparent;box-shadow:none;color:#17293e;font-size:1.05rem!important;font-weight:750;line-height:1.62!important} .capstone-guide__pull + .capstone-guide__pull{margin:0 0 30px;color:#17293e;font-size:1.42rem!important;font-weight:850;letter-spacing:-.012em;line-height:1.42!important} /* CTA --------------------------------------------------------------------- */ .capstone-guide__cta{margin:30px 0 34px;padding:26px 30px;border:1px solid rgba(23,41,62,.13);border-left:5px solid #ff1c9d;border-radius:16px;background:#fff;box-shadow:0 16px 38px rgba(23,41,62,.08);scroll-margin-top:112px} .capstone-guide__cta p{margin:0 0 12px!important} .capstone-guide__cta p:last-child{margin-bottom:0!important} .capstone-guide__cta-kicker{margin:0 0 10px!important;color:#ff1c9d;font-size:.72rem!important;font-weight:900;letter-spacing:.08em;line-height:1.2!important;text-transform:uppercase} .capstone-guide__cta .capstone-guide__button{display:inline-flex;align-items:center;min-height:52px;padding:13px 28px;border-radius:999px;background:#ff1c9d;color:#fff!important;font-size:1.02rem;font-weight:850;line-height:1.2;text-decoration:none;transition:background .18s ease,transform .18s ease} .capstone-guide__cta .capstone-guide__button:hover{background:#c70f76;color:#fff!important;transform:translateY(-1px)} .capstone-guide__cta .capstone-guide__meta{color:#687282;font-size:.9rem;font-weight:650} .capstone-guide__cta .capstone-guide__meta a{font-weight:750} /* Figures ----------------------------------------------------------------- */ .capstone-guide__figure{max-width:100%;margin:30px 0 34px!important} .capstone-guide__figure img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 16px 38px rgba(23,41,62,.1)} /* Tables ------------------------------------------------------------------ */ /* Tables share the content column's measure with the body copy. padding:0 overrides the theme's 20px vertical padding on .wp-block-table. */ .capstone-guide__table{width:100%;max-width:100%;margin:28px 0 34px;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(23,41,62,.13);border-radius:16px;background:#fff;box-shadow:0 16px 38px rgba(23,41,62,.08)} /* global.js wraps every table in .table__wrapper (padding:20px 0; overflow:auto). Let the figure own the padding and the scroll instead, or the rounded card gets a white band above and below the table. */ .capstone-guide__table .table__wrapper{display:block;margin:0;padding:0;overflow:visible} .capstone-guide__table table{width:100%;margin:0;border-collapse:separate;border-spacing:0;color:#34405e} .capstone-guide__table th{padding:15px 19px;border:0;border-right:1px solid rgba(255,255,255,.14);background:#17293e;color:#fff;font-size:.84rem;font-weight:850;line-height:1.35;text-align:left;vertical-align:top} .capstone-guide__table th:last-child{border-right:0} .capstone-guide__table td{padding:15px 19px;border:0;border-right:1px solid rgba(23,41,62,.08);border-bottom:1px solid rgba(23,41,62,.08);background:#fff;color:#34405e;font-size:.93rem;font-weight:520;line-height:1.55;vertical-align:top} .capstone-guide__table tbody tr:nth-child(even) td{background:#f8fafc} .capstone-guide__table td:first-child{color:#17293e;font-weight:800} .capstone-guide__table td:last-child{border-right:0} .capstone-guide__table tbody tr:last-child td{border-bottom:0} .capstone-guide__programs table{min-width:820px} .capstone-guide__questions table,.capstone-guide__match table,.capstone-guide__pathways table{min-width:720px} /* FAQ --------------------------------------------------------------------- */ .capstone-guide__faq details{margin:0 0 12px;border:1px solid rgba(23,41,62,.13);border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(23,41,62,.05)} .capstone-guide__faq summary{position:relative;display:flex;align-items:center;min-height:52px;padding:15px 50px 15px 18px;color:#17293e;font-size:1rem;font-weight:820;line-height:1.4;cursor:pointer;list-style:none;transition:color .18s ease} .capstone-guide__faq summary:hover{color:#ff1c9d} .capstone-guide__faq summary::-webkit-details-marker{display:none} .capstone-guide__faq summary::after{content:'+';position:absolute;right:18px;color:#ff1c9d;font-size:1.35rem;font-weight:700;line-height:1} .capstone-guide__faq details[open] summary::after{content:'−'} .capstone-guide__faq details p{margin:0!important;padding:0 18px 18px;color:#4c5175} /* Centers ----------------------------------------------------------------- */ .capstone-guide__centers, .capstone-guide__centres{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0 0} .capstone-guide__centers>.wp-block-group__inner-container, .capstone-guide__centres>.wp-block-group__inner-container{display:contents} .capstone-guide__centers p, .capstone-guide__centres p{margin:0!important;padding:20px 22px;border:1px solid rgba(23,41,62,.13);border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(23,41,62,.055);color:#4c5175!important;font-size:.95rem!important;line-height:1.6!important;transition:box-shadow .18s ease,transform .18s ease} .capstone-guide__centers p:hover, .capstone-guide__centres p:hover{box-shadow:0 14px 30px rgba(23,41,62,.09);transform:translateY(-1px)} .capstone-guide__centers strong, .capstone-guide__centres strong{display:block;margin-bottom:4px;color:#17293e;font-size:1.05rem;font-weight:880} /* Sources ----------------------------------------------------------------- */ .capstone-guide__sources{padding:28px 30px;border:1px solid rgba(23,41,62,.13);border-radius:16px;background:#eef3fb} .capstone-guide__sources h2{font-size:1.55rem!important} .capstone-guide__sources p,.capstone-guide__sources li{font-size:.93rem;line-height:1.65} @media screen and (max-width:1023px){ .capstone-guide{padding:56px 22px 76px} .capstone-guide__article{grid-template-columns:minmax(0,1fr);column-gap:0} .capstone-guide__toc{grid-column:1;grid-row:auto;position:static;max-height:none;margin:0 0 42px;overflow:visible} .capstone-guide__toc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px} .capstone-guide__toc li{border-top:0} .capstone-guide__section,.capstone-guide__cta{scroll-margin-top:90px} .capstone-guide__concerns{grid-template-columns:1fr} } @media screen and (max-width:640px){ .capstone-guide{padding:42px 16px 58px} .capstone-guide__byline{margin-bottom:34px!important;padding:14px 16px} .capstone-guide__toc{padding:17px} .capstone-guide__toc ul{grid-template-columns:1fr} .capstone-guide__lead{margin-bottom:32px!important;font-size:1.08rem!important} .capstone-guide__section{margin-bottom:52px} .capstone-guide__article h2{font-size:1.75rem!important} .capstone-guide__article h3{font-size:1.2rem!important} .capstone-guide__pull{padding-left:18px} .capstone-guide__pull + .capstone-guide__pull{font-size:1.2rem!important} .capstone-guide__cta{padding:20px 18px} .capstone-guide__cta .capstone-guide__button{width:100%;justify-content:center} .capstone-guide__centers,.capstone-guide__centres{grid-template-columns:1fr} .capstone-guide__sources{padding:22px 18px} .capstone-guide__figure img{border-radius:13px} /* Stacked card tables: no horizontal scrolling on a phone. */ .capstone-guide__table--cards{overflow:visible;border:0;background:transparent;box-shadow:none} .capstone-guide__table--cards table{min-width:0!important} .capstone-guide__table--cards thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0);white-space:nowrap} .capstone-guide__table--cards tbody{display:grid;gap:14px} .capstone-guide__table--cards tr{display:block;overflow:hidden;border:1px solid rgba(23,41,62,.13);border-radius:13px;background:#fff;box-shadow:0 10px 24px rgba(23,41,62,.055)} .capstone-guide__table--cards td{display:block!important;width:100%;padding:12px 14px!important;border:0!important;border-bottom:1px solid rgba(23,41,62,.08)!important;background:#fff!important} .capstone-guide__table--cards td::before{display:block;margin-bottom:4px;color:#687282;font-size:.68rem;font-weight:850;letter-spacing:.06em;line-height:1.4;text-transform:uppercase} .capstone-guide__table--cards td:first-child{padding:14px 16px!important;background:#17293e!important;color:#fff!important;font-size:1rem} .capstone-guide__table--cards td:first-child::before{content:none} .capstone-guide__table--cards td:last-child{border-bottom:0!important} .capstone-guide__match td:nth-child(2)::before{content:'What they need next'} .capstone-guide__match td:nth-child(3)::before{content:'Likely starting point'} .capstone-guide__questions td:nth-child(2)::before{content:'A good answer sounds like'} .capstone-guide__questions td:nth-child(3)::before{content:'Walk away if'} .capstone-guide__pathways td:nth-child(2)::before{content:'What it is'} .capstone-guide__pathways td:nth-child(3)::before{content:"Who it's for"} .capstone-guide__programs td:nth-child(2)::before{content:'Grades'} .capstone-guide__programs td:nth-child(3)::before{content:'Suits a child who'} .capstone-guide__programs td:nth-child(4)::before{content:'What they work on'} .capstone-guide__fit td:nth-child(2)::before{content:'Why'} } /* Confidence ladder — "the shy child" seven steps -------------------------- A horizontal flow on wide screens (all seven steps in one run), a 4+3 wrap on tablets, and a vertical rail on phones. The accent colour escalates blue → purple → pink across the run and lands on the navy destination card. Connectors shimmer to suggest progression; cards stagger in on scroll and lift on hover. */ .capstone-guide__steps{margin:30px 0 34px} .capstone-guide__steps-track{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:34px;margin:0!important;padding:0!important;list-style:none!important} .capstone-guide__step{--a:#123985;position:relative;margin:0!important;padding:0!important} .capstone-guide__step:nth-child(3),.capstone-guide__step:nth-child(4){--a:#6b3f83} .capstone-guide__step:nth-child(5),.capstone-guide__step:nth-child(6){--a:#c70f76} .capstone-guide__step-card{display:flex;flex-direction:column;gap:12px;height:100%;padding:18px 14px 20px;border:1px solid rgba(23,41,62,.13);border-top:3px solid var(--a);border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(23,41,62,.07);transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease,border-color .22s ease} .capstone-guide__step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--a);color:#fff;font-size:.9rem;font-weight:900;line-height:1;transition:transform .25s cubic-bezier(.34,1.56,.64,1)} .capstone-guide__step-text{color:#17293e;font-size:.95rem;font-weight:750;line-height:1.42;letter-spacing:-.005em} /* Connectors: a shimmering line and arrowhead sitting inside the grid gap */ .capstone-guide__step::after{content:'';position:absolute;top:50%;right:-27px;width:20px;height:2px;transform:translateY(-1px);background:linear-gradient(90deg,rgba(18,57,133,.14),rgba(199,15,118,.55),rgba(18,57,133,.14));background-size:230% 100%;animation:capstone-step-flow 2.6s linear infinite;animation-delay:calc(var(--i,0)*-.45s)} .capstone-guide__step::before{content:'';position:absolute;top:50%;right:-33px;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(107,63,131,.55);transition:transform .2s ease,border-left-color .2s ease} .capstone-guide__step:last-child::after,.capstone-guide__step:last-child::before{content:none} .capstone-guide__step:hover .capstone-guide__step-card{transform:translateY(-5px);box-shadow:0 20px 44px rgba(23,41,62,.13);border-color:var(--a)} .capstone-guide__step:hover .capstone-guide__step-num{transform:scale(1.14)} .capstone-guide__step:hover::before{transform:translate(3px,-50%);border-left-color:#ff1c9d} @keyframes capstone-step-flow{from{background-position:130% 0}to{background-position:-130% 0}} /* Destination card: the run lands on navy with a pink badge */ .capstone-guide__step--final .capstone-guide__step-card{background:#17293e;border-color:#17293e;border-top-color:#ff1c9d;box-shadow:0 16px 38px rgba(23,41,62,.18)} .capstone-guide__step--final .capstone-guide__step-num{background:#ff1c9d} .capstone-guide__step--final .capstone-guide__step-text{color:#fff} .capstone-guide__step--final:hover .capstone-guide__step-card{box-shadow:0 22px 48px rgba(23,41,62,.26);border-color:#ff1c9d} .capstone-guide__steps-caption{margin:16px 2px 0!important;color:#687282;font-size:.86rem!important;font-weight:650;letter-spacing:.01em} /* Staggered scroll reveal (armed by the inline observer in the block) */ .capstone-guide__steps--anim .capstone-guide__step{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*75ms)} .capstone-guide__steps--anim .capstone-guide__step.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .capstone-guide__step::after{animation:none} } /* Tablets: four steps per line, step 4's connector wraps the run down */ @media screen and (min-width:641px) and (max-width:1099px){ .capstone-guide__steps-track{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:46px} .capstone-guide__step:nth-child(4)::after{top:auto;bottom:-32px;left:50%;right:auto;width:2px;height:20px;transform:translateX(-1px);background:linear-gradient(180deg,rgba(18,57,133,.14),rgba(199,15,118,.55));animation:none} .capstone-guide__step:nth-child(4)::before{top:auto;bottom:-38px;left:50%;right:auto;transform:translateX(-50%);border:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid rgba(107,63,131,.55)} } /* Phones: vertical rail with numbered checkpoints */ @media screen and (max-width:640px){ .capstone-guide__steps-track{display:block} .capstone-guide__step{padding:0 0 22px 52px!important} .capstone-guide__step:last-child{padding-bottom:0!important} .capstone-guide__step-num{position:absolute;left:0;top:16px} .capstone-guide__step::after{top:52px;bottom:-4px;left:14px;right:auto;width:2px;height:auto;transform:none;background:rgba(18,57,133,.16);animation:none} .capstone-guide__step::before{content:none} } @media print{ .capstone-guide__toc,.capstone-guide__cta{display:none!important} .capstone-guide{padding:0;background:#fff} .capstone-guide__layout{display:block!important} .capstone-guide__article{grid-template-columns:minmax(0,1fr)} .capstone-guide__section{break-inside:avoid} .capstone-guide__table,.capstone-guide__concern,.capstone-guide__faq details,.capstone-guide__figure img{box-shadow:none} .capstone-guide__faq details{break-inside:avoid} .capstone-guide__faq details>*{display:block!important} .capstone-guide__steps--anim .capstone-guide__step{opacity:1!important;transform:none!important} }