:root { --navy:#071a33; --ink:#0b1d33; --lime:#beff43; --paper:#fff; --line:#d8dee3; --muted:#617084; --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { overflow-x:hidden; scroll-behavior:smooth; } body { margin:0; min-width:0; overflow-x:hidden; width:100%; color:var(--ink); font-family:var(--sans); background:var(--paper); } a { color:inherit; text-decoration:none; } .site-header { align-items:center; background:var(--navy); color:#fff; display:grid; grid-template-columns:1fr auto 1fr; max-width:100%; padding:27px clamp(25px,5.3vw,82px); position:relative; z-index:3; } .brand { font-size:24px; font-weight:600; letter-spacing:-1.6px; } .brand span { color:var(--lime); } nav { display:flex; gap:32px; font-size:13px; } nav a, .header-download { border-bottom:1px solid transparent; transition:border-color .2s ease; } nav a:hover, .header-download:hover { border-color:currentColor; } .header-download { justify-self:end; font-size:13px; white-space:nowrap; } .header-download span { font-size:15px; margin-left:5px; }
.hero { background:var(--navy); color:#fff; display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(360px,.9fr); min-height:650px; overflow:hidden; padding:clamp(54px,9vw,140px) clamp(25px,11vw,170px) 94px; position:relative; } .hero-copy { align-self:center; position:relative; z-index:1; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.055em; line-height:.98; margin:0; } h1 { font-size:clamp(52px,5.1vw,80px); } h1 em,h2 em { font-weight:500; } .hero-copy > p { color:#c7d1de; font-size:18px; line-height:1.5; margin:27px 0 36px; max-width:355px; } .button { align-items:center; display:inline-flex; font-size:13px; font-weight:600; gap:23px; justify-content:space-between; padding:17px 20px; transition:transform .2s ease, background .2s ease; } .button:hover { transform:translateY(-2px); } .button-lime { background:var(--lime); color:var(--navy); min-width:208px; } .button-lime span { font-size:18px; }
.phone-scene { min-height:400px; position:relative; } .halo { background:radial-gradient(circle, rgba(190,255,67,.3) 0%, rgba(190,255,67,.08) 40%, transparent 71%); height:620px; left:50%; position:absolute; top:50%; transform:translate(-45%,-48%); width:620px; } .phone { background:#f7f7f7; border:7px solid #203148; border-radius:42px; box-shadow:25px 35px 70px rgba(0,0,0,.44), -2px 0 0 #66809e; height:566px; overflow:hidden; position:absolute; right:4%; top:50%; transform:translateY(-50%) rotate(7deg); width:280px; } .hero-app-shot { display:block; height:100%; object-fit:cover; object-position:top; width:100%; }
.experience { background:var(--navy); color:#fff; overflow:hidden; padding:clamp(78px,10vw,150px) clamp(25px,8.3vw,128px) 66px; } .experience-heading { display:grid; gap:36px; grid-template-columns:.55fr 1.25fr .7fr; } .experience-heading p:last-child { color:#b8c6d6; font-size:16px; line-height:1.55; margin:12px 0 0; max-width:275px; } .experience-gallery { align-items:center; display:grid; gap:clamp(20px,3vw,55px); grid-template-columns:1.35fr .7fr .7fr; margin:84px auto 0; max-width:1040px; } .screen-card { margin:0; } .screen-card img { background:#f5f5f5; border:8px solid #1c3048; border-radius:28px; box-shadow:0 30px 70px rgba(0,0,0,.3); display:block; height:auto; width:100%; } .screen-card-main { transform:rotate(-3deg); } .screen-card-top { transform:translateY(-27px) rotate(3deg); } .screen-card-bottom { transform:translateY(28px) rotate(-2deg); } .screen-card figcaption { display:grid; gap:5px; margin:19px 0 0; } .screen-card strong { font-size:14px; font-weight:600; } .screen-card span { color:#b8c6d6; font-size:12px; line-height:1.45; } .experience-notes { border-top:1px solid #394d65; display:grid; grid-template-columns:repeat(3,1fr); margin-top:95px; } .experience-notes p { color:#d7e0ea; font-size:14px; line-height:1.5; margin:0; padding:22px 22px 0 0; } .experience-notes span { color:var(--lime); display:block; font:10px var(--mono); letter-spacing:.12em; margin-bottom:12px; }
.plans { padding:clamp(78px,10vw,150px) clamp(25px,8.3vw,128px) 52px; } .section-index { color:#647488; font:10px var(--mono); letter-spacing:.12em; margin:0; } .section-heading { display:grid; grid-template-columns:1fr 1.35fr .85fr; gap:40px; } h2 { font-size:clamp(43px,4.2vw,66px); } .section-intro { color:var(--muted); font-size:16px; line-height:1.55; margin:12px 0 0; max-width:290px; } .plan-grid { border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); margin-top:94px; } .plan { border-right:1px solid var(--line); min-height:313px; padding:25px 25px 21px; position:relative; } .plan:first-child { border-left:1px solid var(--line); } .plan-featured { background:var(--navy); color:white; } .plan-term { font-size:15px; margin:0; } .price { font-family:var(--serif); font-size:61px; letter-spacing:-.08em; line-height:1; margin:57px 0 6px; } .price sup { font-family:var(--sans); font-size:22px; font-weight:500; letter-spacing:0; margin-right:2px; vertical-align:17px; } .price span { font-family:var(--sans); font-size:22px; font-weight:500; letter-spacing:-.05em; } .currency { color:var(--muted); font:10px var(--mono); letter-spacing:.04em; margin:0; } .plan-featured .currency { color:#b6c3d3; } .plan a { bottom:22px; font-size:12px; font-weight:600; left:25px; position:absolute; } .plan a span { color:#91b900; font-size:15px; margin-left:8px; } .plan-note { color:var(--muted); font-size:11px; margin:18px 0 0; }
.clarity { background:#edf1f2; padding:clamp(75px,9vw,133px) clamp(25px,8.3vw,128px); } .clarity-content { display:grid; gap:12%; grid-template-columns:1.35fr .65fr; margin-top:76px; } .clarity-copy { align-self:end; } .clarity-copy p { font-size:18px; line-height:1.54; margin:0 0 35px; max-width:355px; } .text-link { border-bottom:1px solid var(--ink); font-size:13px; font-weight:600; padding-bottom:6px; } .text-link span { color:#6e8f00; margin-left:12px; }
.faq { display:grid; gap:11%; grid-template-columns:.7fr 1.3fr; padding:clamp(78px,10vw,150px) clamp(25px,15vw,230px); } .faq-heading h2 { margin-top:28px; } .faq-list { border-top:1px solid var(--line); } details { border-bottom:1px solid var(--line); padding:23px 0; } summary { cursor:pointer; font-size:16px; font-weight:500; list-style:none; position:relative; } summary::-webkit-details-marker { display:none; } summary span { font-size:22px; font-weight:400; position:absolute; right:0; top:-6px; } details p { color:var(--muted); font-size:14px; line-height:1.55; margin:16px 45px 0 0; max-width:490px; }
footer { background:var(--navy); color:#fff; display:grid; grid-template-columns:1fr 1fr auto; gap:28px; padding:61px clamp(25px,8.3vw,128px) 26px; } footer > p { color:#b9c6d4; font-size:14px; margin:6px 0; } .footer-bottom { border-top:1px solid #34465d; color:#aab9ca; display:grid; font:10px var(--mono); grid-column:1/-1; grid-template-columns:1fr auto 1fr; letter-spacing:.05em; margin-top:45px; padding-top:20px; } .footer-bottom > span { justify-self:start; } .footer-links { display:flex; gap:22px; grid-column:2; } .footer-bottom a { color:#d8e2ea; } .footer-bottom a:hover { color:var(--lime); }
@media (max-width:800px) { .mobile-break::before { content:"\A"; white-space:pre; } .site-header { display:flex; justify-content:space-between; padding:22px 25px; } nav, .header-download { display:none; } .hero { grid-template-columns:minmax(0,1fr); min-height:730px; padding:68px 25px 0; } .hero-copy { align-self:start; min-width:0; } h1 { font-size:50px; } .phone-scene { margin-top:-10px; min-height:360px; } .phone { height:420px; right:10%; width:210px; } .experience-heading { display:block; } .experience-heading h2 { margin-top:34px; } .experience-heading p:last-child { margin-top:22px; } .experience-gallery { gap:26px; grid-template-columns:1fr 1fr; margin-top:58px; } .screen-card-main { grid-column:1/-1; margin:0 auto; max-width:285px; transform:rotate(-2deg); } .screen-card-top,.screen-card-bottom { transform:none; } .screen-card img { border-radius:21px; border-width:5px; } .experience-notes { display:block; margin-top:64px; } .experience-notes p { border-bottom:1px solid #394d65; padding:18px 0; } .section-heading, .clarity-content, .faq { display:block; } .section-heading h2 { margin-top:34px; } .section-intro { margin-top:22px; } .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:57px; } .plan { border-bottom:1px solid var(--line); min-height:260px; min-width:0; } .plan:nth-child(3) { border-left:1px solid var(--line); } .price { font-size:50px; margin-top:39px; } .clarity-content { margin-top:43px; } .clarity-copy { margin-top:38px; } .faq { padding-left:25px; padding-right:25px; } .faq-list { margin-top:48px; } footer { grid-template-columns:1fr; } footer .button { justify-self:start; } .footer-bottom { display:flex; flex-direction:column; gap:15px; margin-top:25px; } .footer-links { flex-wrap:wrap; gap:14px 18px; } }
@media (max-width:420px) { .plan { padding-left:17px; padding-right:17px; } .plan a { left:17px; } .plan-term { font-size:14px; } .price { font-size:44px; } .price sup { font-size:17px; } .price span { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }

/* Footer layout after removing the supporting tagline */
footer { grid-template-columns:1fr auto; }

/* Learner reviews */
.hero-store { align-items:center; display:flex; gap:16px; }
.app-icon { border-radius:19px; box-shadow:0 12px 24px rgba(0,0,0,.28); display:block; flex:0 0 auto; height:70px; width:70px; }
@media (max-width:800px) { .hero-store { gap:14px; } .app-icon { border-radius:17px; height:62px; width:62px; } }

.reviews { background:#f6f8f7; padding:clamp(78px,10vw,150px) clamp(25px,8.3vw,128px); }
.reviews-heading { display:grid; gap:40px; grid-template-columns:.6fr 1.25fr .7fr; }
.reviews-heading > p:last-child { color:var(--muted); font-size:16px; line-height:1.55; margin:10px 0 0; max-width:310px; }
.review-grid { display:grid; gap:0; grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:84px; }
.review-card { background:#fff; border-bottom:1px solid var(--line); border-right:1px solid var(--line); grid-column:span 2; min-height:340px; padding:27px 26px 30px; }
.review-card:nth-child(3n+1) { border-left:1px solid var(--line); }
.review-card:nth-child(4), .review-card:nth-child(5) { grid-column:span 3; }
.review-card h3 { font-size:18px; line-height:1.25; margin:22px 0 17px; max-width:340px; }
.review-card > p:last-child { color:var(--muted); font-size:14px; line-height:1.58; margin:0; max-width:410px; }
.review-stars { color:#7b9e11; font-size:14px; letter-spacing:.16em; margin:0; }
@media (max-width:800px) { .reviews-heading { display:block; } .reviews-heading h2 { margin-top:34px; } .reviews-heading > p:last-child { margin-top:22px; } .review-grid { grid-template-columns:1fr; margin-top:54px; } .review-card, .review-card:nth-child(4), .review-card:nth-child(5) { border-left:1px solid var(--line); grid-column:auto; min-height:0; } }

/* Certification search hub and content-guide pages */
.exam-hub { padding:clamp(78px,10vw,150px) clamp(25px,8.3vw,128px); }
.exam-hub-heading { display:grid; gap:40px; grid-template-columns:.6fr 1.25fr .7fr; }
.exam-hub-heading > p:last-child { color:var(--muted); font-size:16px; line-height:1.55; margin:10px 0 0; max-width:320px; }
.vendor-browser { border-top:1px solid var(--line); margin-top:88px; padding-top:22px; }
.vendor-browser-bar { align-items:center; display:flex; justify-content:space-between; margin-bottom:20px; }
.vendor-browser-label { color:var(--muted); font-size:13px; margin:0; }
.vendor-controls { display:flex; gap:8px; }
.vendor-arrow { align-items:center; background:transparent; border:1px solid var(--ink); border-radius:50%; color:var(--ink); cursor:pointer; display:inline-flex; height:36px; justify-content:center; padding:0; transition:background .2s ease,color .2s ease; width:36px; }
.vendor-arrow:hover { background:var(--navy); color:#fff; }
.vendor-arrow svg,.exam-browser-row svg { fill:none; height:18px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; width:18px; }
.vendor-viewport { overflow:hidden; }
.vendor-track { display:flex; gap:10px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; scroll-behavior:smooth; }
.vendor-track::-webkit-scrollbar { display:none; }
.vendor-choice { background:#f4f7fa; border:1px solid #d9e0e6; color:var(--ink); cursor:pointer; flex:0 0 auto; font:500 16px var(--serif); letter-spacing:-.025em; padding:15px 22px; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.vendor-choice:hover,.vendor-choice.is-selected { background:var(--navy); border-color:var(--navy); color:#fff; }
.exam-browser-results { border-bottom:1px solid var(--line); margin-top:34px; }
.exam-browser-results-heading { align-items:baseline; display:flex; justify-content:space-between; padding:0 0 18px; }
.exam-browser-results-heading .exam-kicker { margin:0; }
.exam-browser-results-heading > p:last-child { color:var(--muted); font:11px var(--mono); letter-spacing:.07em; margin:0; }
.exam-browser-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.exam-browser-row { align-items:center; border-bottom:1px solid var(--line); display:grid; gap:14px; grid-template-columns:auto 1fr auto; min-height:78px; padding:15px 22px 15px 0; transition:background .2s ease,color .2s ease,padding .2s ease; }
.exam-browser-row:nth-child(odd) { border-right:1px solid var(--line); padding-right:28px; }
.exam-browser-row:nth-child(even) { padding-left:28px; }
.exam-browser-row:hover { background:#f4f7fa; color:#426500; }
.exam-code { color:#6e8f00; font:11px var(--mono); letter-spacing:.06em; }
.exam-name { font-size:14px; font-weight:500; line-height:1.35; }
.exam-kicker { color:#6e8f00; font:10px var(--mono); letter-spacing:.11em; margin:0 0 46px; }
.exam-links h3 { font:500 clamp(30px,3vw,43px)/1.02 var(--serif); letter-spacing:-.05em; margin:0; max-width:430px; }
.exam-links article > p:not(.exam-kicker) { color:var(--muted); font-size:15px; line-height:1.55; margin:20px 0 46px; max-width:410px; }
.exam-links a { border-bottom:1px solid var(--ink); bottom:30px; font-size:13px; font-weight:600; padding-bottom:5px; position:absolute; }
.exam-links a span { color:#6e8f00; margin-left:12px; }
.guide-hero { background:var(--navy); color:#fff; display:grid; grid-template-columns:1.2fr .8fr; gap:50px; min-height:580px; overflow:hidden; padding:clamp(72px,9vw,132px) clamp(25px,11vw,170px) 88px; }
.guide-hero-copy { align-self:center; max-width:700px; }
.guide-hero-copy .section-index { color:#aab8c8; margin-bottom:29px; }
.guide-hero-copy h1 { font-size:clamp(49px,5.4vw,82px); }
.guide-hero-copy > p { color:#c6d1df; font-size:18px; line-height:1.55; margin:28px 0 35px; max-width:530px; }
.guide-phone { align-self:center; justify-self:center; max-width:255px; transform:rotate(5deg); }
.guide-phone img { border:7px solid #203148; border-radius:38px; box-shadow:25px 35px 70px rgba(0,0,0,.4); display:block; width:100%; }
.guide-content { display:grid; gap:clamp(48px,8vw,130px); grid-template-columns:.6fr 1.4fr; padding:clamp(76px,10vw,145px) clamp(25px,15vw,230px); }
.guide-side { color:var(--muted); font-size:14px; line-height:1.6; }
.guide-side strong { color:var(--ink); display:block; font-size:13px; margin-bottom:10px; }
.guide-body { max-width:760px; }
.guide-body h2 { font-size:clamp(40px,4.2vw,64px); }
.guide-body > p { color:var(--muted); font-size:17px; line-height:1.65; margin:28px 0 0; }
.guide-steps { border-top:1px solid var(--line); display:grid; margin-top:54px; }
.guide-steps article { border-bottom:1px solid var(--line); display:grid; gap:20px; grid-template-columns:70px 1fr; padding:24px 0; }
.guide-steps span { color:#6e8f00; font:11px var(--mono); letter-spacing:.08em; }
.guide-steps h3 { font-size:17px; margin:0; }
.guide-steps p { color:var(--muted); font-size:14px; line-height:1.55; margin:8px 0 0; }
.guide-callout { background:#edf1f2; display:grid; gap:50px; grid-template-columns:1fr 1fr; padding:clamp(65px,8vw,120px) clamp(25px,15vw,230px); }
.guide-callout h2 { font-size:clamp(40px,4vw,62px); }
.guide-callout p { color:#415269; font-size:17px; line-height:1.6; margin:0 0 28px; max-width:430px; }
.crumbs { color:#aebdcc; font-size:12px; margin:0 0 30px; }
.crumbs a { border-bottom:1px solid transparent; } .crumbs a:hover { border-color:currentColor; }
.exam-facts { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:44px 0 22px; }
.exam-facts > div { border-bottom:1px solid var(--line); padding:18px 22px 20px 0; }
.exam-facts > div:nth-child(even) { padding-left:22px; padding-right:0; }
.exam-facts dt { color:#6e8f00; font:10px var(--mono); letter-spacing:.1em; margin-bottom:9px; text-transform:uppercase; }
.exam-facts dd { font-size:15px; line-height:1.45; margin:0; }
.guide-source { color:var(--muted); font-size:13px!important; line-height:1.55!important; }
.inline-link { border-bottom:1px solid currentColor; color:var(--ink); }
@media (max-width:800px) { .exam-facts { grid-template-columns:1fr; margin-top:34px; } .exam-facts > div,.exam-facts > div:nth-child(even) { padding-left:0; padding-right:0; } }
@media (max-width:800px) { .exam-hub-heading,.guide-hero,.guide-content,.guide-callout { display:block; } .exam-hub-heading h2 { margin-top:32px; } .exam-hub-heading > p:last-child { margin-top:22px; } .vendor-browser { margin-top:55px; } .exam-browser-grid { grid-template-columns:1fr; } .exam-browser-row,.exam-browser-row:nth-child(odd),.exam-browser-row:nth-child(even) { border-right:0; padding-left:0; padding-right:0; } .exam-browser-row { min-height:74px; } .exam-kicker { margin-bottom:32px; } .guide-hero { min-height:0; padding-bottom:0; } .guide-hero-copy h1 { font-size:42px; overflow-wrap:anywhere; } .guide-hero-copy > p { font-size:17px; max-width:none; } .crumbs { line-height:1.5; overflow-wrap:anywhere; } .guide-phone { margin:55px auto -64px; max-width:190px; } .guide-content { padding-left:25px; padding-right:25px; } .guide-side { border-bottom:1px solid var(--line); margin-bottom:43px; padding-bottom:28px; } .guide-callout { padding-left:25px; padding-right:25px; } .guide-callout > div { margin-top:32px; } }