/* ===========================================================================
packages.css
Page-only overrides for /packages. This file is linked from packages.html
and nowhere else, and every rule is additionally scoped to a class that only
exists on that page, so nothing here can reach another template.
=========================================================================== */
/* --- Centered nav ---------------------------------------------------------
The nav on this page carries a trimmed menu, and the shared .nav-inner is a
space-between flex row, so what is left sits hard against the right edge.
Taking the menu out of the flow and centring it on the bar puts it in the
middle of the page rather than in the middle of the leftover space, which is
what the brand on the left would otherwise do to it.
--------------------------------------------------------------------------- */
nav#header.pkg-nav .nav-inner {
position: relative;
}
nav#header.pkg-nav .main-menu {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
/* Below 768px the shared stylesheet hides .main-menu and the hamburger takes
over, so the absolute positioning above must not resurrect it. */
@media (max-width: 768px) {
nav#header.pkg-nav .main-menu {
display: none;
}
}
/* --- Deliverables strip ----------------------------------------------------
Replaces the decorative glyph tile with the things you actually receive, one
artifact each. Sized by height so all three cards render the same scale and
the strips simply get wider as the tier grows.
--------------------------------------------------------------------------- */
/* Card lift. One big soft blur just makes a card look blurry; real objects cast
three things at once, so this stacks them: a tight contact shadow that anchors
the edge, a mid shadow for the gap under the card, and a wide low-opacity
ambient that does the actual lifting. The negative spread on the outer two
keeps it under the card instead of haloing sideways. The featured card casts
in its own blue so it stays the hero of the three.
The border drops to 5%: with real depth underneath, a strong outline flattens
the card again. */
.packages-page .pc {
border-color: rgba(15, 23, 42, .05);
box-shadow:
0 1px 2px rgba(15, 23, 42, .07),
0 8px 16px -6px rgba(15, 23, 42, .10),
0 28px 44px -20px rgba(15, 23, 42, .24);
}
/* Hover moves the card up 3px, so the shadow has to travel further and soften,
the way a real one does as an object leaves the surface. */
.packages-page .pc:hover {
box-shadow:
0 1px 2px rgba(15, 23, 42, .06),
0 14px 26px -10px rgba(15, 23, 42, .12),
0 40px 60px -24px rgba(15, 23, 42, .30);
}
.packages-page .pc--featured {
border-color: rgba(37, 99, 235, .22);
box-shadow:
0 1px 2px rgba(23, 37, 84, .10),
0 10px 20px -8px rgba(37, 99, 235, .18),
0 32px 50px -22px rgba(37, 99, 235, .34);
}
.packages-page .pc--featured:hover {
box-shadow:
0 1px 2px rgba(23, 37, 84, .10),
0 16px 28px -10px rgba(37, 99, 235, .22),
0 46px 66px -26px rgba(37, 99, 235, .40);
}
/* Text left, deliverables right. The art is bottom-aligned and hangs past the
tinted header into the white body, so it reads as sitting in front of the
card rather than printed on it. That needs the card to stop clipping, which
in turn means the header has to round its own top corners. */
.packages-page .pc { overflow: visible; }
.packages-page .pc__head {
border-radius: 22px 22px 0 0;
}
/* Name on the left, deliverables on the right; the description then runs the
full width of the card underneath both. */
.packages-page .pc__headrow {
display: flex;
align-items: flex-start;
gap: 10px;
}
/* Same top offset on all three so the plan names line up, and so the badge on
the featured card has its own space above the name. */
.packages-page .pc__name { flex: 1 1 auto; min-width: 0; padding-top: 24px; margin-bottom: 0; }
.packages-page .pc__who { margin-top: 12px; }
/* Hangs off the top-right corner, above and outside the card. */
.packages-page .pc__kit {
flex: 0 0 auto;
height: 132px;
width: auto;
/* The negative bottom stops the art from padding out the row it shares with
the plan name, which was pushing the description a long way down. */
margin: -62px -46px -12px 0;
position: relative;
z-index: 2;
}
/* Room for the pop-out above the cards, and a wider gutter so a pile hanging
off one card lands mostly in the gap rather than on its neighbour. */
.pricing.packages-page .pricing-grid { margin-top: 62px; gap: 36px; scroll-margin-top: 104px; }
/* The badge lived where the art now sits. */
.packages-page .pc__tag { right: auto; left: 16px; }
/* Earlier cards paint over later ones, so a kit hanging off the right edge
lands in front of its neighbour instead of behind it. */
.packages-page .pricing-grid .pc:nth-child(1) { z-index: 3; }
.packages-page .pricing-grid .pc:nth-child(2) { z-index: 2; }
.packages-page .pricing-grid .pc:nth-child(3) { z-index: 1; }
@media (max-width: 700px) {
/* Bigger and lower. At 86px hung 62px above the card the pile read as a
stray graphic floating between cards; sitting closer to its own header it
reads as belonging to the card it describes. */
.packages-page .pc__kit {
height: 112px;
margin: -34px -18px -8px 0;
}
/* Less clearance needed above the grid now that the pile hangs 34px, not 62. */
.pricing.packages-page .pricing-grid { margin-top: 40px; }
}
/* --- Offer bar -------------------------------------------------------------
Shown only while a valid, unexpired ?gt= is running (packages.js adds
.is-live). Navy, not green: green on this page means "included" on the tick
marks, and a saturated promo field above the h1 outshouted the headline.
Sticky under the navbar rather than at viewport top, because the navbar is
fixed at 80px and a bar stuck to 0 slides over it on scroll.
--------------------------------------------------------------------------- */
.pkg-offer { display: none; }
.pkg-offer.is-live { display: block; }
/* .tcv-countdown p sets width:100% and a top margin, which stretched the message
across the bar and pushed the clock to the far edge. Beat it on specificity. */
.pkg-offer .pkg-offer__msg {
display: flex; align-items: center; gap: 9px;
width: auto;
margin: 0;
font-size: var(--pk-small);
font-weight: 500;
letter-spacing: -.005em;
color: rgba(255, 255, 255, .82);
}
.pkg-offer__msg strong { font-weight: 800; color: #fff; }
.pkg-offer__ico { display: inline-flex; color: #4ade80; }
.pkg-offer__timer { display: flex; align-items: center; gap: 10px; }
.pkg-offer__label {
white-space: nowrap;
font-size: var(--pk-micro); font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
/* Tabular figures: proportional digits shift the colons every second. */
.pkg-offer__clock {
display: inline-flex; align-items: baseline; gap: 1px;
padding: 5px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, .1);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.pkg-offer__clock b { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.pkg-offer__clock i { font-style: normal; color: rgba(255, 255, 255, .4); margin: 0 2px; }
.pkg-offer--a {
position: sticky;
top: 80px; /* the height of the fixed navbar */
inset-inline: 0;
z-index: 9998; /* under the navbar's 9999, never over it */
padding: 0;
background: linear-gradient(90deg, #172554 0%, #1e3a8a 100%);
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 6px 22px rgba(15, 23, 42, .16);
}
.pkg-offer--a .pkg-offer__inner {
display: flex; align-items: center; justify-content: center; gap: 28px;
max-width: 1160px; margin: 0 auto; padding: 11px 20px;
}
.pkg-offer--a .tcv-countdown-bar { background: #4ade80; }
/* Expired: same bar, muted, no clock. */
.pkg-offer--a.is-expired {
background: #eceef1; border-bottom-color: #dfe3e8; box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
.pkg-offer--a.is-expired .pkg-offer__msg { color: #5f6368; }
.pkg-offer--a.is-expired .pkg-offer__msg strong { color: #3c4043; }
.pkg-offer--a.is-expired .pkg-offer__ico { color: #94a3b8; }
@media (max-width: 760px) {
.pkg-offer--a .pkg-offer__inner { flex-direction: column; gap: 8px; padding: 10px 16px; }
}
/* --- Hero wrapping (mobile) ------------------------------------------------
At 412px the headline broke as "Stop losing at the resume" / "screen", and
the subtitle ran 29 / 44 / 47 / 18 characters. Two causes: nothing balanced
the h1, and the hand-placed forced a break the narrow column was going
to make anyway, so the two sentences could not share their wrapping.
Dropping the here lets the whole paragraph wrap as one block. The break
stays on desktop, where it is doing real work.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
.pricing.packages-page .pricing-head h1 {
/* --pk-display bottoms out at 2.1rem, which is small for the one thing on
the page that has to land first. Balanced, it still holds two lines. */
font-size: 2.45rem !important;
letter-spacing: -.035em;
text-wrap: balance;
}
.pricing.packages-page .pricing-head .section-intro br { display: none; }
.pricing.packages-page .pricing-head .section-intro {
font-size: 1.09rem;
line-height: 1.55;
max-width: 32ch;
/* balance, not pretty: pretty only rescues the last line, and this left a
98px runt under three 330px lines. balance evens all four. */
text-wrap: balance;
}
}
/* --- What every tier includes ----------------------------------------------
The shared tick row, moved below the grid and scaled up. Above the cards it
was the third thin band in a row and read as preamble; underneath, the same
four lines land as the reassurances that close.
--------------------------------------------------------------------------- */
.pricing.packages-page .pkg-usps--under {
margin: var(--pk-s5) auto 0;
gap: var(--pk-s4);
}
.pricing.packages-page .pkg-usps--under li {
padding-left: 36px;
font-size: var(--pk-body);
font-weight: 700;
}
.pricing.packages-page .pkg-usps--under li::before {
top: 0;
width: 24px; height: 24px;
background-size: 14px 14px;
}
/* The guarantee follows the offer, like every other mention of it. */
.packages-page .pkg-usps--under .pkg-usp--mbg { display: none; }
.pkg-offer-on .packages-page .pkg-usps--under .pkg-usp--mbg { display: list-item; }
/* Stacked, the shared rule sets width:fit-content, which leaves the ticks hard
against the edge while every other block sits inside a 20px gutter. Match the
card column instead, so the ticks line up with the card edges above them. */
@media (max-width: 1279px) {
.pricing.packages-page .pkg-usps--under {
gap: 16px;
width: 100%;
max-width: 480px;
padding: 0 20px;
box-sizing: border-box;
}
}
/* --- What happens next -----------------------------------------------------
A tabbed stepper: the four steps run across the top, and the selected one
opens a full-width panel with its copy and the real screenshot of that stage.
One large visual at a time beats four small ones: the screenshots carry
detail (comments in a doc, a finished resume) that dies at thumbnail size.
It auto-advances until the reader takes over, then stays where they put it.
A global `section {display:flex; align-items:center}` and a
`section { margin: 2rem auto }` both reach this page, hence the resets.
--------------------------------------------------------------------------- */
.pnx {
display: block;
margin: 0;
background: #fff;
padding: var(--pk-s6) 0;
border-top: 1px solid rgba(15, 23, 42, .07);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.pnx__head {
max-width: 760px;
margin: 0 auto var(--pk-s4);
padding: 0 20px;
text-align: center;
}
.pnx__head h2 {
margin: 0 0 12px;
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
font-weight: 800;
letter-spacing: -.028em;
line-height: 1.1;
color: var(--ink);
}
.pnx__head .section-intro {
margin: 0;
font-size: var(--pk-lead);
color: var(--muted);
text-wrap: balance; /* centred copy makes a one-word last line obvious */
}
.pnx__wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
/* Tabs ------------------------------------------------------------------- */
.pnx__tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-bottom: 1px solid #e8edf5;
}
.pnx__tab {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 18px 18px 20px 4px;
border: 0;
background: none;
text-align: left;
font: inherit;
color: var(--muted);
cursor: pointer;
transition: color .18s ease;
}
.pnx__tab:hover { color: var(--ink); }
.pnx__tab.is-active { color: var(--ink); }
.pnx__tab:focus-visible { outline: 2px solid #2563eb; outline-offset: -4px; border-radius: 8px; }
.pnx__num {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
background: #eef2f8;
color: #64748b;
font-size: 14px; font-weight: 800;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pnx__tab.is-active .pnx__num { background: #2563eb; color: #fff; transform: scale(1.06); }
.pnx__tablabel { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
/* The active tab's underline doubles as the autoplay timer. */
.pnx__progress {
position: absolute; left: 0; right: 0; bottom: -1px;
height: 2px;
background: transparent;
overflow: hidden;
}
.pnx__tab.is-active .pnx__progress { background: #e2e8f0; }
.pnx__progress i {
display: block;
width: 100%; height: 100%;
background: #2563eb;
transform: scaleX(0);
transform-origin: left center;
}
.pnx__tab.is-active .pnx__progress i { transform: scaleX(1); transition: transform var(--pnx-dwell, 7s) linear; }
.pnx__tabs.is-paused .pnx__progress i { transition: none; }
.pnx__tabs.is-manual .pnx__tab.is-active .pnx__progress i { transform: scaleX(1); transition: none; }
/* Panel ------------------------------------------------------------------ */
.pnx__panel {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(28px, 4vw, 64px);
align-items: center;
padding: var(--pk-s4) 0 0;
}
.pnx__panel[hidden] { display: none; }
.pnx__panel.is-active .pnx__copy,
.pnx__panel.is-active .pnx__shot { animation: pnx-in .42s cubic-bezier(.22, .61, .36, 1) both; }
.pnx__panel.is-active .pnx__shot { animation-delay: .04s; }
@keyframes pnx-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.pnx__step {
margin: 0 0 10px;
font-size: var(--pk-micro);
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: #93a3b8;
}
.pnx__label {
margin: 0 0 14px;
text-align: left; /* h3 is centred site-wide */
font-size: clamp(1.3rem, 2vw, 1.7rem);
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.2;
color: var(--ink);
}
.pnx__desc {
margin: 0;
font-size: var(--pk-lead);
line-height: 1.62;
color: var(--muted);
/* pretty, not balance: the copy carries hand-placed line breaks, so each
run needs its own last line rescued rather than the block evened out. */
text-wrap: pretty;
}
.pnx__when {
display: inline-block;
margin: 20px 0 0;
padding: 7px 14px;
border-radius: 100px;
background: #eef4ff;
font-size: var(--pk-small);
font-weight: 700;
color: #1d4ed8;
}
/* The screenshot in a plain browser frame rather than on a tinted bed. These
are captures of the real product, so a window chrome is the honest container,
and it gives all four shots one shape without adding a colour to the section.
--------------------------------------------------------------------------- */
.pnx__shot {
display: block;
margin: 0;
border-radius: 14px;
border: 1px solid #e4e9f2;
overflow: hidden; /* clips the shot to the frame's corners */
background: #fff;
box-shadow: 0 26px 60px -22px rgba(15, 23, 42, .30), 0 3px 10px rgba(15, 23, 42, .05);
}
/* The chrome bar. In flow, not absolute, so it stacks above the capture. */
.pnx__shot::before {
content: '';
display: block;
height: 32px;
border-bottom: 1px solid #eef2f8;
/* macOS traffic lights, in their actual colours. */
background:
radial-gradient(circle 4.5px at 18px 16px, #ff5f57 98%, transparent 100%),
radial-gradient(circle 4.5px at 37px 16px, #febc2e 98%, transparent 100%),
radial-gradient(circle 4.5px at 56px 16px, #28c840 98%, transparent 100%),
#fafbfd;
}
.pnx__shot img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border: 0;
border-radius: 0;
background: #fff;
}
@media (max-width: 900px) {
.pnx { padding: var(--pk-s5) 0 var(--pk-s3); }
.pnx__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; gap: 4px 12px; }
.pnx__tab { padding: 12px 8px 14px 0; }
.pnx__tab .pnx__progress { display: none; }
.pnx__tab.is-active { color: var(--ink); }
.pnx__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: var(--pk-s3); }
.pnx__tablabel { font-size: .9rem; }
}
/* Mobile: no selector, just the four steps.
A tab strip trades vertical space for a click, which is a bad deal on a phone:
the labels shrink to fit, three of the four steps are hidden behind a tap, and
the panel still costs a full screen. Stacked, the whole process reads in one
scroll. The tabs stay in the DOM so a resize back to desktop restores them,
and the script's autoplay stands down. */
@media (max-width: 760px) {
.pnx__tabs { display: none; }
.pnx__panel,
.pnx__panel[hidden] {
display: block;
padding: var(--pk-s4) 0 0;
}
.pnx__panel + .pnx__panel { border-top: 1px solid #eef2f8; }
/* Only the tab click animated a panel in; stacked, they are all just there. */
.pnx__panel.is-active .pnx__copy,
.pnx__panel.is-active .pnx__shot { animation: none; }
/* Hierarchy. Stacked, the heading was 20.8px against 16px body: a ratio of
1.3, which reads as one grey block. The heading goes up, the body comes
down and lightens, and the eyebrow shrinks, so each step scans as
label / title / detail before a word is read. */
.pnx__step {
margin-bottom: 6px;
font-size: 10.5px;
letter-spacing: .13em;
color: #9aa7bb;
}
.pnx__label {
margin-bottom: 10px;
font-size: 1.5rem;
letter-spacing: -.026em;
line-height: 1.18;
}
.pnx__desc {
font-size: 15px;
line-height: 1.6;
}
/* Same call as the hero: at this width every sentence already wraps, so the
hand-placed breaks only stop the runs from sharing their wrapping. Step 1
was 341 / 322 / 83 / 330 with "roles." stranded. pretty cannot fix that
because the runt is mid-block, not the block's last line. */
.pnx__desc br { display: none; }
.pnx__when { margin-top: 16px; font-size: 13px; }
.pnx__shot { margin-top: 20px; }
/* More air between steps than inside one, or the rule does the work alone.
The first step is not separating from anything, so it drops the padding:
stacked on the head's own 40px it was pushing step 1 over 100px down. */
.pnx__panel,
.pnx__panel[hidden] { padding-top: var(--pk-s5); }
/* Not :first-of-type: the panels are divs and so is .pnx__tabs, so the
"first div" is the tab strip and no panel ever matched. */
.pnx__tabs + .pnx__panel { padding-top: 0; }
.pnx__head { margin-bottom: var(--pk-s3); }
}
@media (prefers-reduced-motion: reduce) {
.pnx__panel.is-active .pnx__copy,
.pnx__panel.is-active .pnx__shot { animation: none; }
.pnx__tab.is-active .pnx__progress i { transition: none; }
}
/* --- Resume samples --------------------------------------------------------
The homepage shows these three in a carousel at ~320px. Here they get a
static row at ~350px each, because a carousel hides two thirds of the proof
behind an interaction. Tinted so it separates the two white sections it sits
between. Same two `section` resets as the other blocks on this page.
--------------------------------------------------------------------------- */
.pks {
display: block;
margin: 0;
padding: var(--pk-s6) 0;
background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
border-top: 1px solid rgba(15, 23, 42, .07);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.pks__head {
max-width: 760px;
margin: 0 auto var(--pk-s4);
padding: 0 20px;
text-align: center;
}
.pks__head h2 {
margin: 0 0 12px;
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
font-weight: 800;
letter-spacing: -.028em;
line-height: 1.1;
color: var(--ink);
}
.pks__head .section-intro { margin: 0; font-size: var(--pk-lead); color: var(--muted); }
.pks__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 40px);
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
list-style: none;
}
.pks__item { margin: 0; }
.pks__card {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 14px;
overflow: hidden;
background: #fff;
cursor: zoom-in;
box-shadow: 0 8px 26px rgba(15, 23, 42, .10);
transition: transform .2s ease, box-shadow .2s ease;
}
.pks__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15, 23, 42, .16); }
.pks__card:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.pks__card img { display: block; width: 100%; height: auto; }
/* Quiet until hover, so the row reads as resumes and not as buttons. */
.pks__zoom {
position: absolute;
right: 12px; bottom: 12px;
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: #334155;
box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
opacity: 0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
}
.pks__card:hover .pks__zoom,
.pks__card:focus-visible .pks__zoom { opacity: 1; transform: none; }
.pks__label {
margin: 14px 0 0;
text-align: center;
font-size: var(--pk-small);
font-weight: 700;
color: var(--ink);
}
/* Viewer ----------------------------------------------------------------- */
.pks__viewer {
position: fixed;
inset: 0;
z-index: 10000; /* the nav sits at 9999 */
display: flex;
justify-content: center;
/* flex-start, not center: a resume is taller than the viewport, and centring
an overflowing flex item puts its top outside the scrollable area where it
can never be reached. The auto margins below still centre it when it fits. */
align-items: flex-start;
padding: 28px 20px;
background: rgba(15, 23, 42, .82);
overflow: auto;
overscroll-behavior: contain;
}
.pks__viewer[hidden] { display: none; }
.pks__viewer img {
margin: auto;
max-width: min(920px, 100%);
height: auto;
border-radius: 8px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.pks__close {
position: fixed;
top: 18px; right: 22px;
width: 44px; height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.pks__close:hover { background: rgba(255, 255, 255, .22); }
.pks__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 1000px) {
.pks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.pks__item:last-child { grid-column: 1 / -1; justify-self: center; max-width: 360px; }
}
@media (max-width: 700px) {
.pks { padding: var(--pk-s5) 0; }
.pks__grid { grid-template-columns: 1fr; max-width: 420px; }
.pks__item:last-child { grid-column: auto; max-width: none; }
/* Touch has no hover, so the affordance stays visible. */
.pks__zoom { opacity: 1; transform: none; }
}
/* --- Closing CTA -----------------------------------------------------------
Same button as the one under the reviews, sitting on its own after the FAQ.
.pkr__cta carries a top margin meant for inside the reviews band, so it is
zeroed here and the spacing comes from this wrapper instead.
--------------------------------------------------------------------------- */
/* No top padding: the FAQ above already ends on 64px, and doubling it left a
dead band between the note and the button. */
.pkg-endcta { padding: 0 20px var(--pk-s6); text-align: center; }
.pkg-endcta .pkr__cta { margin: 0; }
@media (max-width: 700px) {
.pkg-endcta { padding-bottom: var(--pk-s5); }
}
/* --- FAQ -------------------------------------------------------------------
Rows separated by rules, no boxes: a boxed accordion turns eighteen questions
into eighteen competing objects. Dividers keep it a single quiet list, and the
group headings do the separating. Scoped with .pkg-faq so other pages keep
the shared treatment.
--------------------------------------------------------------------------- */
#faq.pkg-faq {
max-width: 820px;
margin: 0 auto;
/* Less at the foot: the closing CTA below brings its own space. */
padding: var(--pk-s6) 20px var(--pk-s5);
}
#faq.pkg-faq .section-title {
margin: 0 0 var(--pk-s5);
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
font-weight: 800;
letter-spacing: -.028em;
line-height: 1.1;
color: var(--ink);
}
#faq.pkg-faq .tcv-faq__groups { gap: var(--pk-s5); }
#faq.pkg-faq .tcv-faq__group { margin: 0; }
#faq.pkg-faq .tcv-faq__group-title {
margin: 0 0 4px;
padding: 0;
border: 0;
font: 800 1.06rem/1.3 'Inter', system-ui, sans-serif;
letter-spacing: -.012em;
text-transform: none;
color: var(--ink);
opacity: 1;
}
/* Rows: one hairline between questions, nothing else. */
#faq.pkg-faq .tcv-faq__item {
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid #e9edf4;
border-radius: 0;
background: none;
box-shadow: none;
}
#faq.pkg-faq .tcv-faq__q {
align-items: flex-start;
gap: 24px;
padding: 20px 0;
font-size: 16px;
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.45;
color: var(--ink);
}
#faq.pkg-faq .tcv-faq__q:hover { color: #1d4ed8; }
#faq.pkg-faq .tcv-faq__chev { background: #9aa7bb; margin-top: 4px; }
#faq.pkg-faq .tcv-faq__item[data-open="true"] .tcv-faq__chev { background: #1d4ed8; }
#faq.pkg-faq .tcv-faq__item[data-open="true"] .tcv-faq__a { padding: 0 0 22px; }
#faq.pkg-faq .pkg-faq__body { max-width: 68ch; }
#faq.pkg-faq .tcv-faq__a p {
margin: 0 0 12px;
font: 400 15px/1.7 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color: #475569;
}
#faq.pkg-faq .tcv-faq__a p:last-child { margin-bottom: 0; }
/* Every link in an answer, not only the ones tagged .text-blue. */
#faq.pkg-faq .tcv-faq__a a {
color: #2563eb;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* The groups container is a flex column with a 64px gap, which already
separates this from the last question, so it carries no margin of its own. */
#faq.pkg-faq .faq-note { margin: 0; text-align: center; color: var(--muted); }
@media (max-width: 700px) {
#faq.pkg-faq { padding: var(--pk-s5) 20px var(--pk-s4); }
#faq.pkg-faq .tcv-faq__q { font-size: 15.5px; padding: 18px 0; gap: 16px; }
}
/* The samples anchor lands under the fixed 80px nav without this. */
#resume-samples { scroll-margin-top: 90px; }
/* --- Short footer ----------------------------------------------------------
Same navy field and wordmark as the site footer so it reads as the same
company, but one band instead of eight columns of links.
--------------------------------------------------------------------------- */
.pkg-foot {
display: block;
margin: 0;
padding: 30px 20px;
background: linear-gradient(90deg, #172554 0%, #1e3a8a 100%);
color: #c7d2fe;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.pkg-foot__inner {
display: flex;
align-items: center;
gap: 18px 32px;
max-width: 1160px;
margin: 0 auto;
}
.pkg-foot__brand { flex: 0 0 auto; text-decoration: none; }
/* .tcv-wordmark paints itself with a gradient clipped to the text, and that
gradient reads --cta-blue-* which is declared on .tcv-footer. Redeclare them
here or the word renders transparent, i.e. invisible. Same values, so the
brand looks identical to every other footer on the site. */
.pkg-foot { --cta-blue-a: #3B82F6; --cta-blue-b: #2563EB; }
.pkg-foot__brand .tcv-wordmark { font-size: 21px; }
/* A bare `nav { position: fixed; height: 80px; background: #fff }` rule applies
site-wide, so a