/* ==================================================================
   Pass the MSRA — homepage (page-ptm-home.php)
   Homepage-specific sections. Shared chrome (header, footer, container,
   nav) stays in ptm-pages.css. Scoped to .ptm-home.
   ================================================================== */

.ptm-home{
	--h-navy:#0B1F3A; --h-navy-lt:#14304F;
	--h-teal:#00A896; --h-teal-dk:#02796C; --h-amber:#E8A33D; --h-red:#D9534F;
	--h-page:#FFFFFF; --h-tint:#F6F8FB; --h-surface:#FFFFFF;
	--h-text:#33404F; --h-heading:#0B1F3A; --h-muted:#5F6C7C; --h-line:#E3E9F0;
	--h-r:14px; --h-rs:9px;
	--h-sh:0 1px 2px rgba(11,31,58,.05),0 8px 24px rgba(11,31,58,.06);
	background:var(--h-page); color:var(--h-text);
}
html[data-ptm-theme="dark"] .ptm-home{
	--h-page:#0C1826; --h-tint:#0F1E2E; --h-surface:#132437;
	--h-text:#D6E0EC; --h-heading:#E7EEF6; --h-muted:#9BAABB; --h-line:#22364B;
	--h-teal-dk:#3FD0C0;
}

.ptm-home h1,.ptm-home h2,.ptm-home h3{color:var(--h-heading);}
.ptm-hm-hidden{display:none !important;}
.ptm-home .ptm-hm-centre{text-align:center;margin:22px 0 0;}
.ptm-hm-muted{color:var(--h-muted);font-size:.9rem;}

/* ---- buttons ---- */
.ptm-hm-btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:13px 24px;border-radius:var(--h-rs);border:1px solid var(--h-line);
	background:var(--h-surface);color:var(--h-teal-dk);
	font-weight:600;font-size:.98rem;text-decoration:none;transition:.15s;
}
.ptm-hm-btn:hover{border-color:var(--h-teal);}
/* Scoped with .ptm-home: the shared `.ptm-page a` rule is (0,1,1) and was
 * overriding these (0,1,0) rules, rendering teal text on a teal button at
 * 1.45:1 contrast. It also pinned dark-mode buttons to the light-mode teal.
 * Secondary text is #02796C rather than #02897A so it clears WCAG AA (5.31:1
 * against white, up from 4.32:1). Do not un-scope. */
.ptm-home .ptm-hm-btn,
.ptm-home .ptm-hm-btn:visited{color:#02796C;}
/* Dark mode: #02796C is a dark teal on a dark surface. Use the dark-mode token
 * (#3FD0C0, 8.2:1 on the dark surface) instead. */
[data-ptm-theme="dark"] .ptm-home .ptm-hm-btn:not(.ptm-hm-btn--primary),
[data-ptm-theme="dark"] .ptm-home .ptm-hm-btn:not(.ptm-hm-btn--primary):visited{color:var(--h-teal-dk);}
/* #017F71 rather than the brand #00A896: white on #00A896 is only 2.98:1,
 * below AA for 15px bold. #017F71 is 4.91:1, hover #006D62 is 6.24:1. */
.ptm-home .ptm-hm-btn--primary,
.ptm-home .ptm-hm-btn--primary:visited,
.ptm-home .ptm-hm-btn--primary:hover,
.ptm-home .ptm-hm-btn--primary:focus{background:#017F71;border-color:#017F71;color:#fff;}
.ptm-home .ptm-hm-btn--primary:hover,
.ptm-home .ptm-hm-btn--primary:focus{background:#006D62;border-color:#006D62;}
/* Quiet action: keeps the card's second control from competing with its first. */
.ptm-home .ptm-hm-btn--quiet,
.ptm-home .ptm-hm-btn--quiet:visited,
.ptm-home .ptm-hm-btn--quiet:hover{background:transparent;border-color:transparent;padding-block:10px;}
.ptm-home .ptm-hm-btn--quiet:hover{text-decoration:underline;}
.ptm-home .ptm-hm-btn--ghost,
.ptm-home .ptm-hm-btn--ghost:visited,
.ptm-home .ptm-hm-btn--ghost:hover{color:#fff;}
.ptm-hm-btn--full{width:100%;margin-bottom:9px;}
.ptm-hm-btn--ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#fff;}
.ptm-hm-btn--ghost:hover{border-color:#fff;color:#fff;}
/* Fourth catch by the .ptm-page a specificity trap. Any .ptm-hm-* rule that
 * sets colour on an anchor must be scoped with .ptm-home. */
.ptm-home .ptm-hm-textlink,
.ptm-home .ptm-hm-textlink:visited{color:var(--h-teal-dk);font-weight:600;text-decoration:none;}
.ptm-hm-textlink:hover{text-decoration:underline;}

/* ---- section scaffolding ---- */
.ptm-hm-section{padding:64px 0;}
/* Reviews sits directly under the social strip and carries the star rating, so
 * it gets a much shorter run-in than a normal section. */
/* Reviews sits on WHITE, not the tint, so it separates from the tinted
 * Getting Started section below it. Sequence is: navy hero -> tinted countdown
 * -> white social -> white reviews -> tinted process -> navy stakes. */
.ptm-home .ptm-hm-reviews{
	background:#fff;border-bottom:1px solid #D8E1EB;
	padding-top:8px;padding-bottom:26px;
}
html[data-ptm-theme="dark"] .ptm-home .ptm-hm-reviews{background:#0F2033;}
.ptm-home #reviews .ptm-hm-centre{margin:9px 0 0;}
.ptm-home #reviews .ptm-hm-head{margin-bottom:12px;}
.ptm-home #reviews .ptm-hm-kicker{margin-bottom:5px;}
.ptm-home #reviews .ptm-hm-head h2{margin-bottom:0;}
.ptm-home #reviews .ptm-hm-carousel__ctrls{margin-top:16px;}
/* Flex column so every attribution sits on the card's baseline regardless of
 * quote length — three cards of different text still line up. */
.ptm-home #reviews .ptm-hm-quote{
	display:flex;flex-direction:column;height:100%;padding:20px 22px;
	box-shadow:0 10px 28px rgba(11,31,58,.06);
}
.ptm-home #reviews .ptm-hm-quote blockquote{flex:1;}
.ptm-home #reviews .ptm-hm-quote figcaption{margin-top:auto;}
html[data-ptm-theme="dark"] .ptm-home #reviews .ptm-hm-quote{
	background:#162B42;border-color:rgba(255,255,255,.13);
}
.ptm-hm-section--tint{background:var(--h-tint);}
.ptm-hm-head{max-width:760px;margin:0 auto 34px;text-align:center;}
.ptm-hm-kicker{
	display:block;font-size:.73rem;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--h-teal-dk);margin-bottom:10px;
}
.ptm-hm-head h2{font-weight:700;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.18;margin:0 0 10px;}
.ptm-hm-head p{color:var(--h-muted);margin:0;font-size:1.02rem;}

/* ================================ HERO ============================ */
/* Dark navy hero. Every colour inside it is re-declared below rather than
 * inherited, because the light-mode tokens (navy headings, #5F6C7C muted,
 * #02796C links) are all unreadable on this background. Verified with the
 * page-wide contrast audit. */
/* Flat 24px: the old clamp ran 28px→40px, growing the header-to-pill gap on the
 * widest screens where there was already the most empty navy. */
.ptm-hm-hero{
	padding:18px 0 14px;
	background:linear-gradient(165deg,#0B1F3A 0%,#102B4C 55%,#0B2340 100%);
}
.ptm-home .ptm-hm-hero .ptm-hm-title{color:#fff;}
.ptm-home .ptm-hm-hero .ptm-hm-title__accent{color:#5BDCCD;}
.ptm-home .ptm-hm-hero .ptm-hm-lede{color:#CBD9E9;}
.ptm-home .ptm-hm-hero .ptm-hm-proof{border-top-color:rgba(203,217,233,.22);}
.ptm-home .ptm-hm-hero .ptm-hm-proof li{color:#B6C7DB;}
.ptm-home .ptm-hm-hero .ptm-hm-proof strong{color:#fff;}
/* Secondary button: outline on navy rather than a white slab. */
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn,
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn:visited{
	background:transparent;border-color:rgba(255,255,255,.38);color:#fff;
}
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn:hover{border-color:#fff;}
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn--primary,
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn--primary:visited{
	background:#00A896;border-color:#00A896;color:#04241F;
}
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn--primary:hover,
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn--primary:focus{
	background:#28C3B1;border-color:#28C3B1;color:#04241F;
}
.ptm-hm-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
.ptm-hm-eyebrow{
	display:inline-block;padding:5px 12px;border-radius:99px;
	background:rgba(0,168,150,.1);color:var(--h-teal-dk);
	font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;
}
/* Hero pill in soft amber. 5.52:1 in light mode. Dark mode gets a tinted
 * amber rather than the pale fill, which would read as a white block. */
.ptm-home .ptm-hm-hero .ptm-hm-eyebrow{
	background:rgba(232,163,61,.18);color:#F5C16C;border:1px solid rgba(232,163,61,.4);
}
/* Scoped with .ptm-home so these beat the shared chrome. ptm-pages.css sets
 * `.ptm-page h1` and `.ptm-page h2` at specificity (0,1,1); a bare
 * `.ptm-hm-title` is (0,1,0) and loses regardless of load order, so the hero
 * was silently rendering at the shared 4.6rem clamp. Do not un-scope these. */
/* Weights declared explicitly. Nothing in the child theme set one, so the
 * preview inherited the browser default (700) while live inherits Astra's
 * Customizer heading weight — which is why live looked lighter.
 * Only renders as true bold if Playfair Display is loaded at 700. */
.ptm-home .ptm-hm-title{
	font-weight:700;font-size:clamp(2.2rem,3.35vw,3rem);line-height:1.04;letter-spacing:-.025em;
	margin:0 0 18px;max-width:18ch;text-wrap:balance;
}
/* Two blocks inside ONE h1 — the second sentence is not a new section, so it
 * must not become an h2. Sizing gives the hierarchy instead of semantics. */
.ptm-home .ptm-hm-title__main,
.ptm-home .ptm-hm-title__accent{display:block;}
.ptm-home .ptm-hm-title__accent{
	margin-top:.08em;font-size:.88em;line-height:1.06;color:var(--h-teal-dk);
}

/* Hero micro-proof row. Social credibility only — product numbers live in the
 * card beside it, so nothing is repeated. */
.ptm-home .ptm-hm-proof{
	display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;
	margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--h-line);
	font-size:.82rem;
}
.ptm-home .ptm-hm-proof li{
	display:inline-flex;align-items:center;gap:.32rem;
	color:#5F6C7C;line-height:1.4;
}
/* --h-muted (#6B7A8C) is only 4.12:1 on the hero tint, below AA for 13px text.
 * #5F6C7C is 5.03:1. Dark mode keeps the token, which already measures 7.55:1. */
[data-ptm-theme="dark"] .ptm-home .ptm-hm-proof li{color:var(--h-muted);}
.ptm-home .ptm-hm-proof li:not(:last-child)::after{
	content:"\00B7";margin-left:.5rem;color:var(--h-line);
}
.ptm-home .ptm-hm-proof strong{color:var(--h-heading);font-weight:700;}
/* Star rating in the hero. All 44 published reviews carry 5 stars, so the
 * glyphs are supportable — but this is a count of published testimonials, NOT
 * an aggregate rating, so it must not gain AggregateRating schema. */
.ptm-home .ptm-hm-rating{margin:7px 0 0;font-size:.88rem;}
.ptm-home .ptm-hm-rating a{
	display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:#5BDCCD;
}
.ptm-home .ptm-hm-rating a:hover,
.ptm-home .ptm-hm-rating a:focus-visible{text-decoration:underline;}
.ptm-home .ptm-hm-rating__stars{color:#F5C16C;letter-spacing:.08em;font-size:1rem;line-height:1;}
.ptm-home .ptm-hm-proof__icon{font-size:1rem;line-height:1;flex:0 0 auto;}
.ptm-home .ptm-hm-lede{font-size:1.05rem;line-height:1.62;margin:0 0 20px;max-width:54ch;color:var(--h-text);}
/* Hero density pass: smaller, less dominant CTAs. 48px min-height keeps a
 * comfortable target (WCAG 2.5.8 asks for 24px, Apple/Google guidance 44px). */
.ptm-home .ptm-hm-hero .ptm-hm-cta{gap:10px;}
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn{
	min-height:48px;padding:.7rem 1.2rem;font-size:.94rem;line-height:1.2;border-radius:9px;
}
.ptm-home .ptm-hm-hero .ptm-hm-cta .ptm-hm-btn--primary{padding-inline:1.35rem;}
.ptm-hm-cta{display:flex;gap:12px;flex-wrap:wrap;}
.ptm-hm-cta--centre{justify-content:center;}

.ptm-hm-card{
	background:var(--h-surface);border:1px solid var(--h-line);border-radius:var(--h-r);
	box-shadow:var(--h-sh);padding:26px;
}
/* Natural height on purpose — no height:100%. The grid centres it instead. */
.ptm-home .ptm-hm-hero .ptm-hm-card{padding:32px 34px;}
.ptm-home .ptm-hm-card__title{font-weight:700;font-size:1.22rem;line-height:1.25;margin:0 0 5px;letter-spacing:-.01em;}
.ptm-hm-card__sub{color:var(--h-muted);font-size:.9rem;margin:0 0 16px;}
.ptm-hm-card__list{list-style:none;margin:0 0 20px;padding:0;}
.ptm-hm-card__list li{
	position:relative;padding-left:26px;margin-bottom:10px;font-size:.94rem;line-height:1.45;
}
.ptm-hm-card__list li::before{
	content:"";position:absolute;left:0;top:.36em;width:15px;height:15px;border-radius:50%;
	background:rgba(0,168,150,.15);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302897A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* ============================= TRUST BAR ========================== */

/* ============================= COUNTDOWN ========================== */
/* The homepage was relying on Astra for .screen-reader-text. If the parent
 * theme ever stops shipping it, the countdown's screen-reader announcement
 * becomes visible body copy. Own it here. */
.ptm-home .screen-reader-text{
	position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Countdown: two independent cards on a tinted band. Separate cards remove the
 * divider problem entirely — there is nothing to hide when they stack.
 * Seconds appear on the nearest sitting only: they create movement where it
 * matters without implying second-level precision on a date months away that
 * nobody has published. */
.ptm-hm-countdown{padding:14px 0 3px;background:var(--h-tint);}
.ptm-home .ptm-hm-cd__heading{
	margin:0 0 5px;text-align:center;
	font-family:inherit;font-size:.82rem;font-weight:800;letter-spacing:.14em;
	text-transform:uppercase;color:var(--h-heading);
}
/* Equal columns. The nearest sitting leads through border, tint, badge and
 * numeral size, not width. */
.ptm-hm-cd__grid{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
	max-width:900px;margin:0 auto 6px;align-items:stretch;
}
/* When a window ends mid-session the JS removes that card; without this the
 * survivor would sit in a 1.12fr column looking off-centre. */
.ptm-hm-cd__grid.is-single{grid-template-columns:minmax(0,440px);justify-content:center;}
.ptm-hm-cd-card{
	background:var(--h-surface);border:1px solid var(--h-line);
	border-top:3px solid var(--h-line);border-radius:14px;
	padding:12px 15px 13px;box-shadow:0 8px 24px rgba(11,31,58,.07);
}
/* Title optically centred; the chip is absolutely positioned so it doesn't
 * shift the centre. The heading's side padding keeps it clear of the chip. */
.ptm-home .ptm-hm-cd-card__head{
	position:relative;display:block;min-height:24px;margin-bottom:9px;text-align:center;
}
.ptm-home .ptm-hm-cd-card__head h3{
	margin:0;padding-inline:88px;font-weight:700;font-size:1rem;line-height:1.2;
	color:var(--h-heading);letter-spacing:-.01em;text-align:center;
}
.ptm-hm-cd-card__status{
	position:absolute;top:50%;right:0;transform:translateY(-50%);
	padding:3px 9px;border-radius:999px;
	background:rgba(0,168,150,.12);color:#02796C;
	font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.ptm-hm-cd-card__timer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.ptm-hm-cd-card.is-next .ptm-hm-cd-card__timer{grid-template-columns:repeat(4,minmax(0,1fr));}
.ptm-hm-cd-card.is-next{
	border-top-width:4px;
	background-color:var(--h-surface);
	background-image:linear-gradient(180deg,rgba(11,31,58,.03),transparent 55%);
	box-shadow:0 10px 28px rgba(11,31,58,.09);
}
.ptm-hm-cd-unit{
	min-width:0;padding:7px 4px 6px;text-align:center;
	background:var(--h-tint);border:1px solid var(--h-line);border-radius:9px;
}
.ptm-hm-cd-unit strong{
	display:block;font-size:1.35rem;line-height:1;font-weight:800;
	color:var(--h-heading);font-variant-numeric:tabular-nums;
}
.ptm-hm-cd-card.is-next .ptm-hm-cd-unit strong{font-size:1.55rem;}
.ptm-hm-cd-unit span{
	display:block;margin-top:3px;font-size:.6rem;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:#5F6C7C;
}
.ptm-home .ptm-hm-cd-card__open{margin:0;padding:9px 0 4px;text-align:center;font-size:.92rem;font-weight:700;color:#02796C;}

/* Emphasis for the nearest sitting. Urgency states below override the colour,
 * so a sitting 200 days away is never dressed up as amber. */
.ptm-hm-cd-card.is-next{
	border-top-width:4px;border-color:rgba(0,168,150,.42);border-top-color:var(--h-teal);
	background:linear-gradient(180deg,rgba(0,168,150,.05),var(--h-surface) 55%);
	box-shadow:0 10px 28px rgba(11,31,58,.09),0 0 0 2px rgba(0,168,150,.08);
}
.ptm-hm-cd-card.is-normal{border-top-color:var(--h-teal);}
.ptm-hm-cd-card.is-warning{
	border-color:#E3A232;border-top-color:#E3A232;
	background:linear-gradient(180deg,rgba(232,163,61,.055),var(--h-surface) 55%);
	box-shadow:0 10px 28px rgba(11,31,58,.09),0 0 0 2px rgba(227,162,50,.10);
}
.ptm-hm-cd-card.is-urgent{
	border-color:#D94B4B;border-top-color:#D94B4B;
	background:linear-gradient(180deg,rgba(217,75,75,.05),var(--h-surface) 55%);
	box-shadow:0 10px 28px rgba(11,31,58,.09),0 0 0 3px rgba(217,75,75,.10);
}
/* Final week: a stronger static glow. No pulse — a looping animation reads as a
 * sales timer, and this is an exam date. */
.ptm-hm-cd-card.is-critical{
	border-color:#B42318;border-top:4px solid #B42318;
	background:linear-gradient(180deg,rgba(180,35,24,.055),var(--h-surface) 55%);
	box-shadow:0 10px 28px rgba(11,31,58,.09),0 0 0 4px rgba(180,35,24,.11);
}
.ptm-hm-cd-card.is-open{border-top-color:var(--h-teal);}

/* ⚠️ SCOPED WITH .ptm-home ON PURPOSE. tokens.css sets `.ptm-page p` at
 * specificity (0,1,1); an unscoped `.ptm-hm-cd__note` is (0,1,0) and loses,
 * so this paragraph silently carried a 1rem bottom margin on the live site
 * while a preview without tokens.css showed margin:0. That 16px was the real
 * reason the gap under the Oriel line would not shrink. Every homepage
 * paragraph rule that sets a margin must be scoped the same way. */
.ptm-home .ptm-hm-cd__note{margin:0;text-align:center;font-size:.74rem;line-height:1.35;color:var(--h-muted);}
.ptm-hm-cd__note a{color:#02796C;}
html[data-ptm-theme="dark"] .ptm-hm-cd-card{background:#13283F;border-color:rgba(148,170,192,.25);}
html[data-ptm-theme="dark"] .ptm-hm-cd-card.is-next{background-color:#13283F;background-image:linear-gradient(180deg,rgba(148,170,192,.08),transparent 55%);}
html[data-ptm-theme="dark"] .ptm-hm-cd-card{background:#13283F;border-color:rgba(148,170,192,.25);}
html[data-ptm-theme="dark"] .ptm-hm-cd-card.is-next{
	background:linear-gradient(180deg,rgba(0,168,150,.10),#13283F 55%);border-color:rgba(0,168,150,.42);
}
html[data-ptm-theme="dark"] .ptm-home .ptm-hm-cd__heading,
html[data-ptm-theme="dark"] .ptm-hm-cd-unit span,
html[data-ptm-theme="dark"] .ptm-hm-cd__note{color:var(--h-muted);}
html[data-ptm-theme="dark"] .ptm-hm-cd__note a,
html[data-ptm-theme="dark"] .ptm-hm-cd-card__status,
html[data-ptm-theme="dark"] .ptm-hm-cd-card__open{color:var(--h-teal-dk);}

/* =============================== SOCIAL =========================== */
/* Media strip. Brand marks are local inline SVG (inc/ptm-home-icons.php) —
 * nothing hotlinked, and no emoji, which cannot be aligned or recoloured. */
.ptm-hm-social{padding:6px 0;border-block:1px solid var(--h-line);}
.ptm-hm-social__inner{
	display:flex;align-items:center;justify-content:center;
	gap:clamp(.9rem,2.2vw,2rem);flex-wrap:wrap;
}
.ptm-home .ptm-hm-social__label{
	margin:0;font-family:inherit;font-size:.66rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:#5F6C7C;
}
.ptm-hm-social__list{
	display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem);
	flex-wrap:wrap;list-style:none;margin:0;padding:0;
}
/* Scoped: `.ptm-page a` is (0,1,1) and would otherwise force these to the
 * shared teal, dropping the platform name to 4.32:1. Third time this rule has
 * caught something — see the H1 and the buttons. */
.ptm-home .ptm-hm-social__link,
.ptm-home .ptm-hm-social__link:visited{
	display:inline-flex;align-items:center;gap:.45rem;
	text-decoration:none;color:var(--h-heading);border-radius:9px;padding:3px 2px;
}
.ptm-hm-social__link:hover .ptm-hm-social__copy strong{text-decoration:underline;}
.ptm-hm-social__link:focus-visible{outline:2px solid var(--h-teal);outline-offset:3px;}
/* 24px rather than the 30px the SVGs are authored at. The strip is a
 * credibility footnote, not a section — it should not out-weigh the countdown
 * sitting directly above it. */
.ptm-hm-social__icon{flex:0 0 auto;display:block;width:24px;height:24px;}
.ptm-hm-social__copy{display:flex;flex-direction:column;justify-content:center;min-height:2.3em;line-height:1.22;}
.ptm-hm-social__copy strong{font-size:.82rem;font-weight:700;}
.ptm-hm-social__meta{font-size:.7rem;font-weight:400;color:#5F6C7C;}
html[data-ptm-theme="dark"] .ptm-home .ptm-hm-social__label,
html[data-ptm-theme="dark"] .ptm-hm-social__meta{color:var(--h-muted);}

/* ============================== STATS ============================= */
/* Why it matters: navy, but NOT the hero gradient — a teal glow top-left over a
 * flatter navy, so it reads as a second beat rather than a repeat of the hero.
 * Every colour inside is re-declared; the light tokens are unreadable here. */
.ptm-hm-stakes{
	padding:64px 0;
	background:
		radial-gradient(circle at 15% 10%,rgba(0,168,150,.12),transparent 32%),
		linear-gradient(160deg,#102844 0%,#0B1F3A 100%);
}
.ptm-home .ptm-hm-stakes h2,
.ptm-home .ptm-hm-stakes h3{color:#fff;}
.ptm-home .ptm-hm-stakes .ptm-hm-kicker{color:#5BDCCD;}
.ptm-home .ptm-hm-stakes .ptm-hm-head p{color:#CBD9E9;}
.ptm-home .ptm-hm-stakes .ptm-hm-head{max-width:820px;}
.ptm-home .ptm-hm-stakes__second{margin-top:14px;font-size:.95rem;color:#9FB3CC;}
.ptm-home .ptm-hm-stakes .ptm-hm-centre{margin-top:26px;}
.ptm-hm-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* Translucent on navy rather than white cards, which would read as three more
 * hero cards. 5.5% white over #0B1F3A still passes AA for the body copy. */
.ptm-hm-why > div{
	display:flex;flex-direction:column;padding:24px;border-radius:var(--h-r);
	background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
	box-shadow:0 12px 30px rgba(0,0,0,.10);
}
/* One accent per card so the three read as distinct ideas rather than a
 * repeated motif. All three are checked against the card surface by the
 * contrast sweep. */
.ptm-hm-why > div:nth-child(1) .ptm-hm-why__icon{color:#5BDCCD;background:rgba(91,220,205,.14);}
.ptm-hm-why > div:nth-child(2) .ptm-hm-why__icon{color:#F5C16C;background:rgba(245,193,108,.14);}
.ptm-hm-why > div:nth-child(3) .ptm-hm-why__icon{color:#9CB8FF;background:rgba(156,184,255,.14);}
.ptm-hm-why__icon{
	display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
	background:rgba(63,208,192,.14);color:#5BDCCD;
}
/* Icon and heading share one row, matching the Getting Started cards. */
.ptm-home .ptm-hm-why__title{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.ptm-home .ptm-hm-why__title h3{margin:0;line-height:1.25;}
.ptm-home .ptm-hm-why__title .ptm-hm-why__icon{flex:0 0 38px;}
.ptm-home .ptm-hm-stakes .ptm-hm-why p{color:#D4DEEB;}
.ptm-home .ptm-hm-why h3{
	margin:0 0 7px;font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--h-heading);
}
/* ⚠️ This must come AFTER `.ptm-home .ptm-hm-why h3` above. Both selectors are
 * specificity (0,2,1), so source order decides — and the generic rule below,
 * setting color:var(--h-heading) (#0B1F3A), was winning inside the navy
 * section. The card headings rendered navy-on-navy: about 1.1:1, effectively
 * invisible. Adding .ptm-hm-stakes takes this to (0,3,1) so order no longer
 * matters. Do not merge these two rules. */
.ptm-home .ptm-hm-stakes .ptm-hm-why h3{color:#fff;}
.ptm-hm-why p{margin:0;font-size:.93rem;line-height:1.55;color:var(--h-text);}
.ptm-hm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:840px;margin:0 auto;}
.ptm-hm-stats>div{
	text-align:center;padding:26px 16px;border-radius:var(--h-r);
	background:var(--h-surface);border:1px solid var(--h-line);
}
.ptm-hm-stats b{display:block;font-size:2rem;font-weight:800;color:var(--h-teal-dk);line-height:1.1;}
.ptm-hm-stats span{display:block;margin-top:6px;font-size:.88rem;color:var(--h-muted);}
.ptm-hm-qbank{padding:34px 0;background:rgba(0,168,150,.08);border-block:1px solid rgba(0,168,150,.18)}
.ptm-hm-qbank__inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr) auto;gap:28px;align-items:center}
.ptm-hm-qbank h2{margin:4px 0 8px;font-size:clamp(1.55rem,2.5vw,2.2rem)}.ptm-hm-qbank p{margin:0}
.ptm-hm-qbank ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:0;padding:0}.ptm-hm-qbank li{padding:10px 12px;border-radius:10px;background:var(--h-card,#fff)}.ptm-hm-qbank li strong,.ptm-hm-qbank li span{display:block}.ptm-hm-qbank li span{font-size:.78rem;color:var(--h-muted)}
[data-ptm-theme="dark"] .ptm-hm-qbank{background:rgba(63,208,192,.08);border-color:rgba(63,208,192,.22)}
[data-ptm-theme="dark"] .ptm-hm-qbank li{background:#132437;border:1px solid rgba(148,170,192,.22)}
@media(max-width:900px){.ptm-hm-qbank__inner{grid-template-columns:1fr}.ptm-hm-qbank__inner>.ptm-hm-btn{justify-self:start}}

/* ============================== STEPS ============================= */
/* Getting started: connected timeline.
 * The connector is ONE line on the <ol> (a ::before spanning the middle third
 * of the row) rather than a border per <li>. Per-item borders leave a stub
 * hanging off the first and last card, which is what the original v1 timeline
 * did. It is switched off entirely under 700px, where the list turns vertical. */
/* Visibly tinted, with its own token rather than the generic --tint, so the
 * white reviews section above it reads as a separate block. */
.ptm-home .ptm-hm-start{
	position:relative;background:#EEF4F8;
	border-top:1px solid #D8E1EB;border-bottom:1px solid var(--h-line);
	padding:34px 0 46px;
}
/* Short teal accent straddling the boundary. Both surfaces are pale, so a
 * 1px border alone disappears; this marks the transition without another
 * full-width dark band. Decorative only — no content depends on it. */
.ptm-home .ptm-hm-start::before{
	content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
	width:64px;height:3px;border-radius:999px;background:#00A896;
}
html[data-ptm-theme="dark"] .ptm-home .ptm-hm-start{background:#102236;}
.ptm-home .ptm-hm-start .ptm-hm-head{margin-bottom:26px;}
.ptm-home .ptm-hm-start .ptm-hm-head p{margin-top:10px;}
.ptm-hm-steps{
	position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
	list-style:none;margin:0;padding:0;
}
.ptm-hm-steps::before{
	content:"";position:absolute;top:16px;left:16.6%;right:16.6%;height:2px;
	background:var(--h-line);z-index:0;
}
.ptm-hm-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.ptm-hm-steps__n{
	display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
	background:var(--h-teal-dk);color:#fff;font-weight:800;font-size:.95rem;
	box-shadow:0 0 0 5px var(--h-tint);margin-bottom:16px;
}
/* Equal heights come from the grid stretch, not a fixed min-height, so a
 * longer line of copy in one card lengthens all three together. */
/* Quieter than a full card: the connected timeline is the element doing the
 * work, and heavy cards made each step look like an independent feature. */
.ptm-home .ptm-hm-steps__card{
	flex:1;width:100%;padding:20px 22px;border-radius:14px;
	background:rgba(255,255,255,.82);border:1px solid var(--h-line);
	box-shadow:none;transition:box-shadow .18s;
}
html[data-ptm-theme="dark"] .ptm-home .ptm-hm-steps__card{background:rgba(255,255,255,.05);}
.ptm-home .ptm-hm-steps li:hover .ptm-hm-steps__card{
	transform:none;box-shadow:0 8px 22px rgba(11,31,58,.06);
}
/* Icon and heading share one row (was icon stacked above the heading, which
 * added height and split the card visually). */
.ptm-home .ptm-hm-steps__title{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.ptm-home .ptm-hm-steps__title h3{margin:0;line-height:1.25;}
.ptm-hm-steps__icon{
	display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;
	background:rgba(0,168,150,.1);color:var(--h-teal-dk);margin:0;
}
.ptm-hm-steps h3{font-size:1.05rem;}
.ptm-hm-steps p{margin:0;color:var(--h-muted);font-size:.92rem;line-height:1.55;}
.ptm-home .ptm-hm-start .ptm-hm-cta{margin-top:24px;}
/* --h-teal-dk flips to #3FD0C0 in dark mode, so white-on-teal fell to 1.91:1
 * here — the step numbers were unreadable. Pin the circle to the darker teal
 * used by the primary button (4.91:1 with white) instead of the token. */
html[data-ptm-theme="dark"] .ptm-hm-steps__n{
	background:#017F71;color:#fff;box-shadow:0 0 0 5px var(--h-tint);
}

/* ============================== VALUE ============================= */
.ptm-hm-value{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;max-width:960px;margin:0 auto;}
.ptm-hm-value__col{
	padding:28px;border-radius:var(--h-r);background:var(--h-surface);
	border:1px solid var(--h-line);
}
/* Membership column is the primary one: teal border, pale teal wash and a
 * label. The free column deliberately keeps a plain surface and a text link, so
 * the two are visibly ranked rather than presented as equal choices. */
.ptm-hm-value__col--hl{
	position:relative;border-color:var(--h-teal);box-shadow:var(--h-sh);
	background:linear-gradient(180deg,rgba(0,168,150,.055),transparent 42%);
	background-color:var(--h-surface);
}
/* Title row: heading left, pill right, both columns sharing the same baseline
 * so "Full membership" lines up with "Always free" next to it. The free column
 * has an empty-right head so its title sits at the same height. */
.ptm-home .ptm-hm-value__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;min-height:34px;flex-wrap:wrap;}
.ptm-home .ptm-hm-value__head h3{margin:0;}
.ptm-hm-value__tag{
	display:inline-block;margin:0;padding:4px 11px;border-radius:99px;flex:0 0 auto;
	background:rgba(0,168,150,.14);color:var(--h-teal-dk);
	font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.ptm-hm-value__col h3{font-size:1.1rem;margin:0;}
/* Icon-led rows replace the old tick sprite. Icons are decorative — the text
 * beside each one is the content — so they are aria-hidden in the template. */
.ptm-hm-feats{list-style:none;margin:0 0 20px;padding:0;}
.ptm-hm-feats li{
	display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;
	font-size:.93rem;line-height:1.45;
}
.ptm-hm-feats li:last-child{margin-bottom:0;}
/* Coloured tiles rather than one repeated teal check — the uniform ticks made
 * the section scan like a terms-and-conditions list. Icons are graphics, so the
 * bar is WCAG 1.4.11 (3:1); every pair below is 4.5+ anyway. Dark mode uses a
 * flat translucent tile with a lightened ink, since the pale tints go muddy on
 * a dark surface. */
.ptm-hm-feats__icon{
	display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;
	border-radius:10px;background:rgba(0,168,150,.1);color:var(--h-teal-dk);
}
.ptm-hm-feats__icon .ptm-hm-icon{width:18px;height:18px;}
.ptm-hm-feats--violet    .ptm-hm-feats__icon{color:#6A48BE;background:#F0EBFF;}
.ptm-hm-feats--red       .ptm-hm-feats__icon{color:#C3302F;background:#FFF0F0;}
.ptm-hm-feats--green     .ptm-hm-feats__icon{color:#1E7A4B;background:#E8F7EE;}
.ptm-hm-feats--orange    .ptm-hm-feats__icon{color:#A54E0B;background:#FFF1E5;}
.ptm-hm-feats--blue      .ptm-hm-feats__icon{color:#1D5FA8;background:#E9F1FB;}
.ptm-hm-feats--teal      .ptm-hm-feats__icon{color:#0F7A6D;background:#E4F5F2;}
.ptm-hm-feats--amber     .ptm-hm-feats__icon{color:#8A5A08;background:#FDF2DC;}
.ptm-hm-feats--turquoise .ptm-hm-feats__icon{color:#0D6E77;background:#E3F4F6;}
html[data-ptm-theme="dark"] .ptm-hm-feats__icon{background:rgba(255,255,255,.07);}
html[data-ptm-theme="dark"] .ptm-hm-feats--violet    .ptm-hm-feats__icon{color:#B9A3F5;}
html[data-ptm-theme="dark"] .ptm-hm-feats--red       .ptm-hm-feats__icon{color:#F49796;}
html[data-ptm-theme="dark"] .ptm-hm-feats--green     .ptm-hm-feats__icon{color:#77D6A2;}
html[data-ptm-theme="dark"] .ptm-hm-feats--orange    .ptm-hm-feats__icon{color:#F5AC6C;}
html[data-ptm-theme="dark"] .ptm-hm-feats--blue      .ptm-hm-feats__icon{color:#8FBCF0;}
html[data-ptm-theme="dark"] .ptm-hm-feats--teal      .ptm-hm-feats__icon{color:#5BDCCD;}
html[data-ptm-theme="dark"] .ptm-hm-feats--amber     .ptm-hm-feats__icon{color:#F5C16C;}
html[data-ptm-theme="dark"] .ptm-hm-feats--turquoise .ptm-hm-feats__icon{color:#6FD5DE;}
/* Payment reassurance under the plans, matching page-msra-pricing.php. */
.ptm-hm-trust{
	list-style:none;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
	margin:22px 0 0;padding:0;
}
.ptm-hm-trust li{
	display:inline-flex;align-items:center;gap:7px;
	font-size:.845rem;color:var(--h-muted);
}
.ptm-hm-trust svg{color:var(--h-teal-dk);flex-shrink:0;}
.ptm-home .ptm-hm-credline{
	text-align:center;font-size:.845rem;color:var(--h-muted);margin:14px 0 0;
}

/* ============================= PRICING ============================ */
/* Navy pricing. Anchors the commercial half of the page and mirrors the real
 * pricing page, so the white plan cards read as the focus rather than as one
 * more pale band in a run of pale bands. */
.ptm-home .ptm-hm-pricing{
	position:relative;padding:58px 0 0;
	background:linear-gradient(160deg,#0B1F3A 0%,#12365A 100%);color:#fff;
}
.ptm-home .ptm-hm-pricing .ptm-hm-kicker{color:#71DFD2;}
.ptm-home .ptm-hm-pricing h2{color:#fff;}
.ptm-home .ptm-hm-pricing .ptm-hm-head p{color:#CBD8E7;}
/* translateY rather than a negative margin: transform does not affect layout,
 * so the cards cannot escape the section box on narrow screens. The matching
 * padding-top on __after reserves the space they move into. */
.ptm-home .ptm-hm-pricing__plans{position:relative;z-index:2;margin-top:34px;transform:translateY(34px);}
/* padding-top reserves the space the cards translate into (34px) plus the gap
 * to the trust row. 52px lands cards~28px above the trust row. */
.ptm-home .ptm-hm-pricing__after{padding:60px 0 28px;background:#F3F6FA;}
.ptm-home .ptm-hm-pricing__after .ptm-hm-trust{margin-top:0;}
.ptm-home .ptm-hm-pricing__after .ptm-hm-credline{margin-top:10px;}
html[data-ptm-theme="dark"] .ptm-home .ptm-hm-pricing__after{background:#0F1E2E;}
.ptm-hm-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
/* Non-featured plan buttons get a slightly stronger border so they don't read
 * as disabled; only the 12-month button stays filled. */
.ptm-home .ptm-hm-plan .ptm-hm-btn:not(.ptm-hm-btn--primary){border-color:#CDD8E4;}
.ptm-hm-plan{
	position:relative;display:flex;flex-direction:column;text-align:center;
	padding:26px 20px;border-radius:var(--h-r);background:var(--h-surface);
	border:1px solid var(--h-line);
}
.ptm-hm-plan.is-best{border-color:var(--h-teal);border-width:2px;box-shadow:var(--h-sh);}
.ptm-hm-plan__badge{
	position:absolute;top:-11px;left:50%;transform:translateX(-50%);
	padding:4px 12px;border-radius:99px;background:#017F71;color:#fff;
	font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.ptm-hm-plan__len{font-size:.86rem;font-weight:700;color:var(--h-muted);letter-spacing:.05em;text-transform:uppercase;}
.ptm-hm-plan__price{font-size:2.3rem;font-weight:800;color:var(--h-heading);line-height:1.1;margin:8px 0 2px;}
.ptm-hm-plan__equiv{font-size:.85rem;color:var(--h-teal-dk);font-weight:600;}
.ptm-hm-plan__note{font-size:.83rem;color:var(--h-muted);margin:10px 0 18px;flex:1;line-height:1.4;}
.ptm-hm-plans__note{text-align:center;margin-top:20px;font-size:.9rem;color:var(--h-muted);}
/* The membership CTA is a full-width button; the free column's text link sits
 * on the baseline beneath its list, so the two columns end at different
 * heights by design rather than by accident. */
.ptm-hm-value__col--hl .ptm-hm-btn--full{margin-bottom:0;}

/* ============================ SPECIALTIES ========================= */
.ptm-hm-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.ptm-hm-tab{
	padding:11px 18px;min-height:44px;border-radius:99px;border:1px solid var(--h-line);
	background:var(--h-surface);color:var(--h-muted);
	font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;
}
.ptm-hm-tab:hover{border-color:var(--h-teal);color:var(--h-teal-dk);}
.ptm-hm-tab.is-current{background:#017F71;border-color:#017F71;color:#fff;}
.ptm-hm-courses{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
/* Targeted section-top tightening (never the global .ptm-hm-section). */
.ptm-home #specialties .ptm-hm-centre{margin:22px 0 0;}
.ptm-home #specialties{padding-top:42px;padding-bottom:42px;}
.ptm-home #specialties .ptm-hm-head{margin-bottom:26px;}
.ptm-home #mocks{padding-top:42px;}
.ptm-home #mocks .ptm-hm-head{margin-bottom:26px;}
.ptm-home #compare{padding-top:42px;}
.ptm-home #compare .ptm-hm-head{margin-bottom:26px;}
@media (max-width:700px){
	.ptm-home #specialties,
	.ptm-home #mocks,
	.ptm-home #compare{padding-top:34px;}
}
/* Specialty cards. The whole card is the <a>; there is no inner link, so no
 * nested-anchor problem and the entire 138px target is clickable. Icon tiles
 * are per-specialty; every ink/wash pair is 4.6:1+ (bar for graphics is 3:1). */
.ptm-hm-course{
	display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;
	min-height:138px;padding:18px 16px;border-radius:14px;
	background:var(--h-surface);border:1px solid var(--h-line);
	box-shadow:0 6px 18px rgba(11,31,58,.05);text-decoration:none;
	transition:transform .18s,box-shadow .18s,border-color .18s;
}
.ptm-home .ptm-hm-course:hover{
	transform:translateY(-2px);border-color:rgba(0,168,150,.45);
	box-shadow:0 12px 28px rgba(11,31,58,.10);
}
.ptm-home .ptm-hm-course:focus-visible{
	outline:3px solid var(--h-teal);outline-offset:3px;
}
.ptm-hm-course__icon{
	display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
	background:#EDF2F8;color:#3A5F86;
}
.ptm-hm-course__icon svg{width:24px;height:24px;}
.ptm-hm-course__content{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ptm-home .ptm-hm-course__content strong{
	color:var(--h-heading);font-size:.92rem;font-weight:700;line-height:1.2;
}
.ptm-home .ptm-hm-course__content small{color:var(--h-muted);font-size:.8rem;line-height:1.35;}
.ptm-home .ptm-hm-course__arrow{color:var(--h-teal-dk);font-size:1.05rem;transition:transform .18s;}
.ptm-home .ptm-hm-course:hover .ptm-hm-course__arrow{transform:translateX(3px);}
.ptm-hm-course--red     .ptm-hm-course__icon{color:#C3302F;background:#FFF0F0;}
.ptm-hm-course--coral   .ptm-hm-course__icon{color:#B84A3C;background:#FFF1EE;}
.ptm-hm-course--amber   .ptm-hm-course__icon{color:#8A5A08;background:#FDF2DC;}
.ptm-hm-course--yellow  .ptm-hm-course__icon{color:#7A5C00;background:#FBF4D9;}
.ptm-hm-course--blue    .ptm-hm-course__icon{color:#1D5FA8;background:#E9F1FB;}
.ptm-hm-course--crimson .ptm-hm-course__icon{color:#AE2846;background:#FFEFF3;}
.ptm-hm-course--violet  .ptm-hm-course__icon{color:#6A48BE;background:#F0EBFF;}
.ptm-hm-course--green   .ptm-hm-course__icon{color:#1E7A4B;background:#E8F7EE;}
.ptm-hm-course--steel   .ptm-hm-course__icon{color:#3A5F86;background:#EDF2F8;}
.ptm-hm-course--orange  .ptm-hm-course__icon{color:#A54E0B;background:#FFF1E5;}
.ptm-hm-course--brown   .ptm-hm-course__icon{color:#7A5230;background:#F8F0E8;}
.ptm-hm-course--peach   .ptm-hm-course__icon{color:#A85433;background:#FFF1EA;}
.ptm-hm-course--indigo  .ptm-hm-course__icon{color:#4B4BA8;background:#EDEDFB;}
.ptm-hm-course--pink    .ptm-hm-course__icon{color:#A83A72;background:#FDECF5;}
html[data-ptm-theme="dark"] .ptm-hm-course__icon{background:rgba(255,255,255,.08);color:#9FB6D4;}
html[data-ptm-theme="dark"] .ptm-hm-course--red     .ptm-hm-course__icon{color:#F49796;}
html[data-ptm-theme="dark"] .ptm-hm-course--coral   .ptm-hm-course__icon{color:#F0A08F;}
html[data-ptm-theme="dark"] .ptm-hm-course--amber   .ptm-hm-course__icon{color:#F5C16C;}
html[data-ptm-theme="dark"] .ptm-hm-course--yellow  .ptm-hm-course__icon{color:#EBD37A;}
html[data-ptm-theme="dark"] .ptm-hm-course--blue    .ptm-hm-course__icon{color:#8FBCF0;}
html[data-ptm-theme="dark"] .ptm-hm-course--crimson .ptm-hm-course__icon{color:#F192AA;}
html[data-ptm-theme="dark"] .ptm-hm-course--violet  .ptm-hm-course__icon{color:#B9A3F5;}
html[data-ptm-theme="dark"] .ptm-hm-course--green   .ptm-hm-course__icon{color:#77D6A2;}
html[data-ptm-theme="dark"] .ptm-hm-course--orange  .ptm-hm-course__icon{color:#F5AC6C;}
html[data-ptm-theme="dark"] .ptm-hm-course--brown   .ptm-hm-course__icon{color:#D8B48D;}
html[data-ptm-theme="dark"] .ptm-hm-course--peach   .ptm-hm-course__icon{color:#F0A98A;}
html[data-ptm-theme="dark"] .ptm-hm-course--indigo  .ptm-hm-course__icon{color:#A5A5EE;}
html[data-ptm-theme="dark"] .ptm-hm-course--pink    .ptm-hm-course__icon{color:#EF9AC4;}
/* Navy standout pair: breaks the grid rhythm so SJT and mocks do not read as
 * two more specialties. Colours re-declared because the light tokens are
 * unreadable on navy. */
.ptm-home .ptm-hm-course--navy{
	background:linear-gradient(160deg,#102844,#0B1F3A);border-color:rgba(255,255,255,.14);
}
.ptm-home .ptm-hm-course--navy .ptm-hm-course__content strong{color:#fff;}
.ptm-home .ptm-hm-course--navy .ptm-hm-course__content small{color:#C3D2E4;}
.ptm-home .ptm-hm-course--navy .ptm-hm-course__icon{background:rgba(91,220,205,.16);color:#5BDCCD;}
.ptm-home .ptm-hm-course--navy .ptm-hm-course__arrow{color:#5BDCCD;}
.ptm-hm-courses--standout{margin-top:16px;grid-template-columns:repeat(2,1fr);}
.ptm-hm-course:hover{border-color:var(--h-teal);}

/* ============================== MOCKS ============================= */
.ptm-hm-mocks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto;}
.ptm-hm-mock{
	display:block;padding:28px;border-radius:var(--h-r);background:var(--h-surface);
	border:1px solid var(--h-line);text-decoration:none;
}
.ptm-hm-mock:hover{border-color:var(--h-teal);box-shadow:var(--h-sh);}
.ptm-hm-mock__tag{
	display:inline-block;padding:4px 11px;border-radius:99px;background:rgba(0,168,150,.1);
	color:var(--h-teal-dk);font-size:.71rem;font-weight:700;letter-spacing:.07em;
	text-transform:uppercase;margin-bottom:12px;
}
.ptm-hm-mock h3{font-size:1.2rem;margin:0 0 8px;}
.ptm-hm-mock p{margin:0 0 14px;color:var(--h-muted);font-size:.93rem;line-height:1.5;}
.ptm-hm-mock__go{font-weight:600;color:var(--h-teal-dk);font-size:.9rem;}

/* =============================== SJT ============================== */
.ptm-hm-sjt{background:var(--h-navy);color:#E7EEF6;}
.ptm-hm-sjt h2,.ptm-hm-sjt h3{color:#fff;}
.ptm-hm-sjt .ptm-hm-kicker{color:#5FD8C8;}
.ptm-hm-sjt p{color:rgba(231,238,246,.82);}
.ptm-hm-sjt__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center;}
.ptm-hm-sjt__stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ptm-hm-sjt__stats li{
	padding:20px 16px;border-radius:var(--h-r);text-align:center;
	background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
}
.ptm-hm-sjt__stats b{display:block;font-size:1.6rem;font-weight:800;color:#fff;line-height:1.1;}
.ptm-hm-sjt__stats span{display:block;margin-top:5px;font-size:.8rem;color:rgba(231,238,246,.7);}
.ptm-hm-sjt .ptm-hm-btn:not(.ptm-hm-btn--primary){
	background:transparent;border-color:rgba(255,255,255,.3);color:#fff;
}
.ptm-hm-sjt .ptm-hm-btn:not(.ptm-hm-btn--primary):hover{border-color:#fff;}

/* =========================== TESTIMONIALS ========================= */
/* Scroll-snap carousel.
 *
 * The previous build laid slides out with flex at calc(33.333% - 11px) plus a
 * 16px right margin, then paged the track with translateX(-page * 100%).
 * Three of those slides actually occupy (100% + 15px), so every page drifted
 * 15px further left than the transform accounted for and the last card in each
 * page was clipped: 14px on page 2, 29px on page 3, 59px on page 5. Tablet
 * (2-up) drifted 16px per page. Mobile (1-up, no margin) was exact, which is
 * why this survived review.
 *
 * Scrolling a real scroll container removes the arithmetic completely: card
 * width is whatever the grid says, and we scroll to a card's measured
 * position rather than to a computed percentage.
 */
.ptm-hm-carousel{
	--ptm-gap:16px;
	--ptm-cv:3;
	--ptm-card:calc((100% - 2 * var(--ptm-gap)) / 3);
}
.ptm-hm-carousel__viewport{
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;-ms-overflow-style:none;
	-webkit-overflow-scrolling:touch;
}
.ptm-hm-carousel__viewport::-webkit-scrollbar{display:none;}
.ptm-hm-carousel__viewport:focus-visible{
	outline:2px solid var(--h-teal);outline-offset:4px;border-radius:var(--h-r);
}
.ptm-hm-carousel__track{
	display:grid;grid-auto-flow:column;
	grid-auto-columns:var(--ptm-card);
	gap:var(--ptm-gap);
	align-items:stretch;
}
.ptm-hm-quote{
	margin:0;padding:24px;scroll-snap-align:start;
	background:var(--h-surface);border:1px solid var(--h-line);border-radius:var(--h-r);
}
/* No-JS / pre-init: every review readable in a wrapping grid. */
.ptm-hm-carousel:not(.is-ready) .ptm-hm-carousel__viewport{overflow:visible;scroll-snap-type:none;}
.ptm-hm-carousel:not(.is-ready) .ptm-hm-carousel__track{
	grid-auto-flow:row;
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.ptm-hm-carousel:not(.is-ready) .ptm-hm-carousel__ctrls{display:none;}
/* #9C640C, not #B4740F: the lighter amber measured 3.86:1 on the review card,
 * below AA for 14.4px text. This is 4.95:1. Dark mode keeps the brighter token,
 * which already measures well on the dark surface. */
.ptm-hm-quote__stars{color:#9C640C;letter-spacing:.1em;font-size:.9rem;}
html[data-ptm-theme="dark"] .ptm-hm-quote__stars{color:var(--h-amber);}
.ptm-hm-quote blockquote{margin:10px 0 14px;padding:0;border:0;font-size:.96rem;line-height:1.55;color:var(--h-text);}
.ptm-hm-quote figcaption{font-size:.85rem;font-weight:700;color:var(--h-heading);}
.ptm-hm-quote figcaption span{display:block;font-weight:400;color:#5F6C7C;font-size:.8rem;margin-top:2px;}
html[data-ptm-theme="dark"] .ptm-hm-quote figcaption span{color:var(--h-muted);}
.ptm-hm-carousel__ctrls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;flex-wrap:nowrap;max-width:100%;}
.ptm-hm-carousel__btn{flex:0 0 auto;}
.ptm-hm-carousel__btn{
	width:44px;height:44px;border-radius:50%;border:1px solid var(--h-line);
	background:var(--h-surface);color:var(--h-teal-dk);cursor:pointer;font-size:1rem;
}
.ptm-hm-carousel__btn:hover{border-color:var(--h-teal);}
/* Dots stay 9px visually but the button is 24px so the tap target meets WCAG
 * 2.5.8 (24px min). The visible dot is drawn with an inset box-shadow; the
 * padding is the invisible target. gap reduced to keep the row compact. */
.ptm-hm-carousel__dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;
	max-width:100%;min-width:0;flex:1 1 auto;}
.ptm-hm-carousel__dot{
	width:24px;height:24px;padding:0;border:0;cursor:pointer;border-radius:50%;
	background:transparent;position:relative;flex:0 0 auto;
}
.ptm-hm-carousel__dot::before{
	content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
	width:9px;height:9px;border-radius:50%;background:var(--h-line);
}
.ptm-hm-carousel__dot.is-current::before{background:var(--h-teal);}

/* ============================ COMPARISON ========================== */
/* Homepage comparison = the real feature-by-feature table, in a WIDE shell that
 * breaks out of the 1140px content container so wide screens can show every
 * provider without scrolling. Head/actions/note stay in the normal container.
 * These --home overrides only tighten type/width; /compare/ is untouched. */

/* Wide breakout shell: up to 1540px, but never edge-to-edge (16px min gutter). */
.ptm-home .ptm-cmp-shell{
	width:min(1540px,calc(100vw - 32px));max-width:none;margin-inline:auto;
	position:relative;
}
/* Synchronised top scrollbar: a thin strip whose inner div matches table width,
 * so the horizontal scrollbar is reachable before scrolling down a tall table.
 * JS shows it only when the table overflows and keeps the two in sync. */
.ptm-home .ptm-cmp-topscroll{overflow-x:auto;overflow-y:hidden;}
.ptm-home .ptm-cmp-topscroll[hidden]{display:none;}
.ptm-home .ptm-cmp-topscroll__inner{height:1px;}
/* Right-edge fade cue while more table remains to the right. JS removes
 * .has-overflow once the user reaches the end. Never covers the last column
 * permanently — it sits over the scroll container edge, not the cells. */
.ptm-home .ptm-cmp-fade{position:relative;}
.ptm-home .ptm-cmp-fade.has-overflow::after{
	content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
	background:linear-gradient(to right,rgba(246,248,251,0),rgba(246,248,251,.9));
	z-index:4;
}
html[data-ptm-theme="dark"] .ptm-home .ptm-cmp-fade.has-overflow::after{
	background:linear-gradient(to right,rgba(15,32,51,0),rgba(15,32,51,.9));
}

.ptm-home .ptm-compare-page--home{background:var(--h-tint);}
.ptm-home .ptm-compare-page--home .ptm-hm-head h2{color:var(--h-heading);}
/* Table sits inside the shell; the tablewrap owns the real horizontal scroll. */
.ptm-home .ptm-compare-page--home .ptm-cmp-tablewrap{border-radius:14px;}
.ptm-home .ptm-compare-page--home .ptm-cmp-table{min-width:auto;width:100%;table-layout:fixed;}
.ptm-home .ptm-compare-page--home .ptm-cmp-th{padding:10px 8px;font-size:.72rem;line-height:1.25;}
.ptm-home .ptm-compare-page--home .ptm-cmp-rowhead{padding:10px 10px;font-size:.78rem;line-height:1.25;width:145px;min-width:145px;max-width:145px;}
.ptm-home .ptm-compare-page--home .ptm-cmp-td{padding:10px 8px;font-size:.78rem;line-height:1.28;}
.ptm-home .ptm-compare-page--home .ptm-cmp-val{font-size:.78rem;font-weight:600;}
.ptm-home .ptm-compare-page--home .ptm-cmp-note{margin-top:2px;font-size:.65rem;line-height:1.2;}
.ptm-home .ptm-compare-page--home .ptm-cmp-unknown{font-size:.68rem;}
.ptm-home .ptm-compare-page--home .ptm-cmp-th--feature{width:145px;min-width:145px;max-width:145px;}
/* Sticky Pass-the-MSRA column: left offset MUST equal the feature width (145).
 * Subtle shadow on its right edge so scrolled cells tuck under it cleanly. */
.ptm-home .ptm-compare-page--home .ptm-cmp-th--self,
.ptm-home .ptm-compare-page--home .ptm-cmp-td--self{width:155px;min-width:155px;left:145px;}
.ptm-home .ptm-compare-page--home .ptm-cmp-th--self,
.ptm-home .ptm-compare-page--home .ptm-cmp-td--self{box-shadow:8px 0 12px -12px rgba(11,31,58,.45),inset 2px 0 0 var(--cmp-teal),inset -2px 0 0 var(--cmp-teal);}
.ptm-home .ptm-compare-page--home .ptm-cmp-th:not(.ptm-cmp-th--feature):not(.ptm-cmp-th--self),
.ptm-home .ptm-compare-page--home .ptm-cmp-td:not(.ptm-cmp-td--self):not(.ptm-cmp-rowhead){width:122px;min-width:122px;}
/* Group bars stay prominent — shorter, but not shrunk to cell scale. */
.ptm-home .ptm-compare-page--home .ptm-cmp-grouprow th{padding:7px 10px;font-size:.68rem;letter-spacing:.1em;}
/* Kill the trailing hairline so there's no empty strip under the last row. */
.ptm-home .ptm-compare-page--home .ptm-cmp-table tbody tr:last-child .ptm-cmp-td,
.ptm-home .ptm-compare-page--home .ptm-cmp-table tbody tr:last-child .ptm-cmp-rowhead{border-bottom:0;}

/* Scroll hint text. */
.ptm-home #compare .ptm-hm-cmp__swipe{margin:0 0 10px;font-size:.82rem;color:var(--h-muted);}
.ptm-home #compare .ptm-hm-cmp__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;}
.ptm-home #compare .ptm-hm-cmp__note{max-width:760px;margin:12px auto 0;text-align:center;font-size:.8rem;color:var(--h-muted);line-height:1.5;}
/* Hint hidden when the table fits (JS toggles .cmp-fits on the shell). */
.ptm-home #compare.cmp-fits .ptm-hm-cmp__swipe{display:none;}

/* Below 560px, narrow the sticky columns so a competitor stays visible beside
 * Pass the MSRA. Feature width and the self offset move together. */
@media (max-width:560px){
	.ptm-home .ptm-compare-page--home .ptm-cmp-th--feature,
	.ptm-home .ptm-compare-page--home .ptm-cmp-rowhead{width:120px;min-width:120px;max-width:120px;}
	.ptm-home .ptm-compare-page--home .ptm-cmp-th--self,
	.ptm-home .ptm-compare-page--home .ptm-cmp-td--self{width:130px;min-width:130px;left:120px;}
	.ptm-home .ptm-compare-page--home .ptm-cmp-th:not(.ptm-cmp-th--feature):not(.ptm-cmp-th--self),
	.ptm-home .ptm-compare-page--home .ptm-cmp-td:not(.ptm-cmp-td--self):not(.ptm-cmp-rowhead){width:125px;min-width:125px;}
}

/* =============================== FAQ ============================== */
/* Intentional boundary after the dense comparison table: a teal accent bar on
 * a tinted surface, matching the Reviews->Getting Started transition. A plain
 * line disappears under a table that large. */
.ptm-home #faqs{
	position:relative;padding-top:44px;
	border-top:1px solid #CAD6E2;background:#EEF4F8;
}
.ptm-home #faqs::before{
	content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
	width:72px;height:4px;border-radius:999px;background:#00A896;
}
.ptm-home #faqs .ptm-hm-head{margin-bottom:22px;}
html[data-ptm-theme="dark"] .ptm-home #faqs{background:#102236;border-top-color:#22364B;}
.ptm-hm-faq__wrap{max-width:940px;}
/* Two INDEPENDENT columns, not one alternating grid: each column is its own
 * grid so opening a long answer on the left cannot stretch a row and leave a
 * gap on the right. */
.ptm-home .ptm-hm-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px 24px;}
.ptm-home .ptm-hm-faq-column{display:grid;align-content:start;gap:10px;}
@media (max-width:760px){
	.ptm-home .ptm-hm-faq-grid{grid-template-columns:1fr;}
	.ptm-home .ptm-hm-course__content strong{font-size:.95rem;}
}
.ptm-hm-faq{
	background:var(--h-surface);border:1px solid var(--h-line);
	border-radius:var(--h-rs);overflow:hidden;
}
.ptm-hm-faq summary{
	padding:17px 20px;cursor:pointer;font-weight:600;color:var(--h-heading);
	font-size:.99rem;list-style:none;position:relative;padding-right:46px;
}
.ptm-hm-faq summary::-webkit-details-marker{display:none;}
.ptm-hm-faq summary::after{
	content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
	font-size:1.2rem;font-weight:400;color:var(--h-teal-dk);
}
.ptm-hm-faq[open] summary::after{content:"\2212";}
.ptm-hm-faq__a{padding:0 20px 18px;}
.ptm-hm-faq__a p{margin:0;color:var(--h-text);font-size:.94rem;line-height:1.6;}
.ptm-hm-faq__a a{color:var(--h-teal-dk);}

/* ============================ FINAL CTA =========================== */
.ptm-hm-final{padding:64px 0;background:var(--h-navy);text-align:center;}
/* Teal variant of the final CTA. Deeper than the brand #00A896 so white text
 * clears AA: lightest gradient stop is #00806F (white body = 4.62:1). The old
 * section used #00A896 and white text sat at ~2.7:1 — this keeps the green look
 * and fixes that. */
.ptm-hm-final--teal{background:linear-gradient(150deg,#00806F 0%,#00695A 100%);}
.ptm-home .ptm-hm-final--teal h2{color:#fff;}
.ptm-home .ptm-hm-final--teal p{color:#fff;}
/* White button, teal ink — primary on the teal section. Scoped with .ptm-home
 * AND both theme roots so it beats the base `.ptm-home .ptm-hm-btn` colour rule
 * (0,2,0) and survives the dark-mode token flip. The teal section is the same
 * colour in both themes, so these buttons are identical in both. */
.ptm-home .ptm-hm-btn--onteal,
.ptm-home .ptm-hm-btn--onteal:visited,
[data-ptm-theme="dark"] .ptm-home .ptm-hm-btn.ptm-hm-btn--onteal,
[data-ptm-theme="dark"] .ptm-home .ptm-hm-btn.ptm-hm-btn--onteal:visited{
	background:#fff;border:1px solid #fff;color:#02796C;font-weight:700;
}
.ptm-home .ptm-hm-btn--onteal:hover{background:#F1FBF9;border-color:#F1FBF9;color:#02635A;}
/* Ghost on teal: white 1px border + WHITE text (4.86:1 on the lightest stop). */
.ptm-home .ptm-hm-btn--ghost-onteal,
.ptm-home .ptm-hm-btn--ghost-onteal:visited,
[data-ptm-theme="dark"] .ptm-home .ptm-hm-btn.ptm-hm-btn--ghost-onteal,
[data-ptm-theme="dark"] .ptm-home .ptm-hm-btn.ptm-hm-btn--ghost-onteal:visited{
	background:transparent;border:1px solid rgba(255,255,255,.75);color:#fff;font-weight:700;
}
.ptm-home .ptm-hm-btn--ghost-onteal:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1);}
.ptm-hm-final h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.15rem);margin:0 0 10px;}
.ptm-hm-final p{color:rgba(231,238,246,.8);margin:0 0 26px;font-size:1.02rem;}

/* ============================ RESPONSIVE ========================== */
@media (max-width:800px){
	.ptm-hm-cd__grid{grid-template-columns:1fr;gap:12px;max-width:460px;}
	.ptm-hm-cd-card{padding:13px 14px 14px;}
}
@media (max-width:360px){
	.ptm-hm-cd-card.is-next .ptm-hm-cd-card__timer{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1000px){
	.ptm-hm-hero__grid{grid-template-columns:1fr;gap:30px;}
	.ptm-hm-why{grid-template-columns:1fr;}
	.ptm-hm-courses{grid-template-columns:repeat(2,1fr);}
	.ptm-hm-plans{grid-template-columns:repeat(2,1fr);}
	.ptm-hm-sjt__grid{grid-template-columns:1fr;gap:30px;}
	.ptm-hm-carousel{--ptm-cv:2;--ptm-card:calc((100% - var(--ptm-gap)) / 2);}
}
@media (max-width:680px){
	.ptm-hm-section{padding:46px 0;}
	.ptm-hm-stats,.ptm-hm-steps,.ptm-hm-value,.ptm-hm-mocks,.ptm-hm-why{grid-template-columns:1fr;}
	.ptm-hm-courses{grid-template-columns:repeat(2,1fr);}
	.ptm-hm-carousel{--ptm-cv:1;--ptm-card:100%;}
	.ptm-home .ptm-hm-proof{gap:9px 16px;font-size:.8rem;}
	.ptm-hm-social__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;width:100%;}
	.ptm-hm-cta{flex-direction:column;}
	.ptm-hm-cta .ptm-hm-btn{width:100%;}
}
/* Vertical timeline under 700px. The horizontal connector is switched off and
 * redrawn down the left, so the numbers still read as a sequence rather than
 * three unrelated cards. */
@media (max-width:700px){
	.ptm-hm-steps{grid-template-columns:1fr;gap:0;margin-top:30px;}
	/* One connector per gap instead of one for the whole list. Spanning the
	 * whole <ol> left the line running 97px past the last number and stopping
	 * mid-card, which read as a stub. Segment-per-item terminates it exactly at
	 * the last circle. */
	.ptm-hm-steps::before{display:none;}
	.ptm-hm-steps li:not(:last-child)::before{
		content:"";position:absolute;top:34px;bottom:0;left:16px;width:2px;
		background:var(--h-line);z-index:0;
	}
	.ptm-hm-steps li{
		flex-direction:row;align-items:flex-start;gap:16px;padding-bottom:18px;
	}
	.ptm-hm-steps li:last-child{padding-bottom:0;}
	.ptm-hm-steps__n{margin-bottom:0;flex:0 0 34px;}
	.ptm-hm-steps__card{padding:20px 22px;}
	.ptm-hm-steps__icon{width:32px;height:32px;margin-bottom:10px;}
	.ptm-home .ptm-hm-start{padding:34px 0 38px;}
	.ptm-hm-stakes{padding:48px 0;}
	.ptm-hm-start .ptm-hm-cta .ptm-hm-btn,
	.ptm-hm-stakes .ptm-hm-centre .ptm-hm-btn{width:100%;}
}
@media (max-width:600px){
	/* Show the swipe hint only where the table overflows. */
	.ptm-home .ptm-hm-cmp__swipe{display:block;}
}
@media (max-width:420px){
	/* Chip drops below the centred title so neither is clipped on a narrow card. */
	.ptm-home .ptm-hm-cd-card__head h3{padding-inline:0;}
	.ptm-home .ptm-hm-cd-card__status{position:static;display:table;margin:6px auto 0;transform:none;}

	.ptm-hm-courses,.ptm-hm-plans{grid-template-columns:1fr;}
	/* No overlap on narrow screens: stacked cards are far taller than the navy
	 * header, so the effect reads as a misalignment rather than a device. */
	.ptm-home .ptm-hm-pricing{padding-bottom:30px;}
	.ptm-home .ptm-hm-pricing__plans{transform:none;margin-top:24px;}
	.ptm-home .ptm-hm-pricing__after{padding-top:26px;}
	.ptm-hm-trust{flex-direction:column;align-items:center;gap:10px;}
}
@media (prefers-reduced-motion:reduce){
	.ptm-hm-carousel__viewport{scroll-behavior:auto;}
}

/* SJT reach line. */
.ptm-home .ptm-hm-sjt__reach{font-size:.92rem;color:rgba(231,238,246,.72);margin:0 0 22px;}
.ptm-hm-sjt__reach strong{color:#fff;font-weight:700;}


/* ===================== STICKY MOBILE CTA ===================== */
/* Phone-only conversion bar. Desktop never sees it. Sits above content with a
 * safe-area inset for notched devices; slides up when shown. */
.ptm-hm-mobabar{
	position:fixed;left:0;right:0;bottom:0;z-index:60;
	display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
	background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
	border-top:1px solid var(--h-line);box-shadow:0 -6px 20px rgba(11,31,58,.10);
	transform:translateY(110%);transition:transform .22s ease;
}
.ptm-hm-mobabar.is-in{transform:translateY(0);}
.ptm-hm-mobabar .ptm-hm-btn{flex:1;justify-content:center;padding-block:13px;}
/* The bar is white, so override the hero button colours it would otherwise
 * inherit. Primary = solid teal with dark ink; secondary = navy outline. */
.ptm-hm-mobabar .ptm-hm-btn--primary{
	background:#00A896;border:1px solid #00A896;color:#04302B;
}
.ptm-hm-mobabar .ptm-hm-btn--ghost{
	background:transparent;border:1px solid #0B1F3A;color:#0B1F3A;
}
html[data-ptm-theme="dark"] .ptm-hm-mobabar .ptm-hm-btn--ghost{
	border-color:#8FA3BC;color:#DCE6F2;
}
html[data-ptm-theme="dark"] .ptm-hm-mobabar{
	background:rgba(15,32,51,.96);border-top-color:#22364B;
}
@media (min-width:700px){ .ptm-hm-mobabar{display:none!important;} }
@media (prefers-reduced-motion:reduce){ .ptm-hm-mobabar{transition:none;} }