/* Unlock Integrations v9.1 polish: Services, How we work, Pricing, 404. Builds on v7-base.css and its shared tokens
   (--v7-h1/h2/h3, --v7-space(-tight), --v7-tile*); see design/v91-polish.md. Voice and no-bent-lines rules from
   design/v8-human-pass.md and design/v9-balance.md still apply. Straight 1px rules and straight arrows only. */

/* ---------- Page heads (Services, How we work): same rhythm as the About and Work heroes ---------- */
.unlock-site:is(.page-services, .page-process, .page-pricing) .page-head { padding:36px 0 var(--v7-space-tight); border-bottom:0; }
.unlock-site:is(.page-services, .page-process, .page-pricing) .page-head .crumbs { margin:0 0 clamp(48px, 6vw, 96px); }
.unlock-site:is(.page-services, .page-process, .page-pricing) .page-head .crumbs a { display:inline-block; padding-block:4px; margin-block:-4px; }
.unlock-site:is(.page-services, .page-process, .page-pricing) .page-head h1 { max-width:15ch; font:var(--v7-h1); letter-spacing:-.04em; }
.unlock-site:is(.page-services, .page-process, .page-pricing) .page-head .lede { max-width:36em; margin-top:28px; color:var(--v7-text-2); font-size:clamp(17px, 1.35vw, 19px); line-height:1.65; }
.page-services .page-head.has-visual .page-head-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(48px, 7vw, 112px); align-items:end; }
/* How we work: the whiteboard photo is the hero now; nothing else sits beside the copy. */
.page-process .page-head .page-head-grid { grid-template-columns:minmax(0,1fr); }
.page-process .project-route { display:none; }

/* ---------- Shared pieces ---------- */
/* Icon tile: green ~10% on paper, mint ~12% on dark. Size, radius and icon size come from the base tokens. */
.pg-tile { --tile:var(--v7-tile); display:inline-grid; place-items:center; flex:none; width:var(--tile); height:var(--tile);
  background:rgba(24,103,78,.1); color:var(--v7-green); }
:is(.v7-section--ink, .v7-section--slate, .page-head, .v8-404) .pg-tile { background:rgba(133,237,197,.12); color:var(--v7-mint); }

/* Section opening: a heading and one short line. */
.pg-intro { max-width:40rem; margin-bottom:clamp(40px, 4.5vw, 64px); }
.unlock-site :is(.pg-intro, .pg-split__text) h2 { margin:0; color:var(--v7-fg); font:var(--v7-h2); letter-spacing:-.035em; }
.unlock-site :is(.pg-intro, .pg-split__text) > p { max-width:48ch; margin:18px 0 0; color:var(--v7-fg-2); font-size:clamp(17px, 1.3vw, 19px); line-height:1.6; }
.unlock-site .pg-more { margin:32px 0 0; }
.unlock-site :where(.sv-card, .hw-steps li, .hw-needs__list li) h3 { margin:0; color:var(--v7-fg); font:var(--v7-h3); letter-spacing:-.02em; }
/* Standalone text links: a 32px target without changing how they look. */
.unlock-site:is(.page-services, .page-process, .page-pricing) main .v7-link { min-height:32px; }

/* Text beside a short list (How we work: when plans change). */
.pg-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px clamp(48px, 6vw, 104px); align-items:start; }
.pg-split__text { max-width:34rem; }
.unlock-site .pg-items { display:grid; gap:0; margin:0; padding:0; border-top:1px solid var(--v7-rule); list-style:none; }
.pg-items li { display:flex; align-items:center; gap:18px; padding:22px 0; border-bottom:1px solid var(--v7-rule); }
.pg-items li > span:not(.pg-tile) { display:grid; gap:4px; color:var(--v7-fg-2); font-size:16px; line-height:1.5; }
.pg-items strong { color:var(--v7-fg); font:var(--v7-h3); letter-spacing:-.02em; text-wrap:balance; }

/* Services hero: the six areas as jump links, each with its icon. */
.v8-index { align-self:end; width:100%; max-width:440px; justify-self:end; }
.unlock-site .v8-index ul { margin:0; padding:0; list-style:none; border-top:1px solid rgba(220,232,226,.2); }
.v8-index li { border-bottom:1px solid rgba(220,232,226,.2); }
.unlock-site .v8-index a { display:flex; align-items:center; gap:14px; min-height:58px; padding:9px 0; color:var(--v7-text); font:500 17px/1.3 var(--v7-sans); letter-spacing:-.01em; text-decoration:none; transition:color .2s; }
.v8-index a > span:not(.pg-tile) { flex:1 1 auto; }
.v8-index .pg-tile { --tile:var(--v7-tile-sm); }
.unlock-site .v8-index a:hover, .unlock-site .v8-index a:focus-visible { color:var(--v7-mint); }
.v8-index a > svg { flex:none; width:18px; height:18px; color:var(--v7-mint); transform:rotate(90deg); transition:transform .25s var(--v7-ease); }
.v8-index a:hover > svg, .v8-index a:focus-visible > svg { transform:rotate(90deg) translateX(3px); }

/* ---------- Services: the six areas as cards ---------- */
.sv-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.sv-card { display:flex; flex-direction:column; padding:clamp(24px, 2.4vw, 32px); border:1px solid var(--v7-line-light); border-radius:var(--v7-r-panel); background:#fbfbf8;
  scroll-margin-top:calc(var(--top, 0px) + 96px); }
.unlock-site .sv-card h3 { margin-top:22px; }
.unlock-site .sv-card p { margin:10px 0 0; color:var(--v7-fg); font-size:16px; line-height:1.55; }
.unlock-site .sv-card .sv-card__more { margin-top:6px; color:var(--v7-fg-2); font-size:15px; }
.unlock-site .sv-card__pages { margin:auto 0 0; padding:22px 0 0; list-style:none; }
.sv-card__pages li { border-top:1px solid var(--v7-line-light); }
.unlock-site .sv-card__pages a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:10px 0; color:var(--v7-ink-text); font:600 15px/1.35 var(--v7-sans); text-decoration:none; transition:color .2s; }
.sv-card__pages li:last-child a { padding-bottom:0; }
.unlock-site .sv-card__pages a:hover, .unlock-site .sv-card__pages a:focus-visible { color:var(--v7-green); }
.sv-card__pages svg { flex:none; width:18px; height:18px; color:var(--v7-green); transition:transform .25s var(--v7-ease); }
.sv-card__pages a:hover svg, .sv-card__pages a:focus-visible svg { transform:translateX(3px); }
/* The card you jumped to from the hero index gets a quiet green edge. */
.sv-card:target { border-color:var(--v7-green); box-shadow:0 0 0 1px var(--v7-green); }

/* ---------- Services: not sure which one you need (text + one worked example, straight arrows) ---------- */
.sv-start__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px clamp(48px, 6vw, 104px); align-items:center; }
.sv-start__text { max-width:32rem; }
.sv-example { margin:0; padding:clamp(28px, 3vw, 40px); border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:rgba(242,243,238,.03); }
.unlock-site .sv-example__lead { margin:0; max-width:40ch; color:var(--v7-fg); font-size:17px; line-height:1.55; }
.unlock-site .sv-example__flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin:28px 0 0; padding:0; list-style:none; }
.sv-example__sys { display:grid; justify-items:center; gap:12px; padding:20px 12px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-ink); color:var(--v7-text); font:600 15px/1.3 var(--v7-sans); text-align:center; }
.sv-example__to { display:grid; place-items:center; color:var(--v7-mint); }
.sv-example__to svg { width:22px; height:22px; }
.unlock-site .sv-example__areas { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:28px 0 0; padding-top:24px; border-top:1px solid var(--v7-rule); color:var(--v7-fg-2); font-size:15px; line-height:1.4; }
.sv-example__areas > span:first-child { flex:1 0 100%; }
.unlock-site .sv-example__areas a { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:4px 14px 4px 4px; border:1px solid var(--v7-rule); border-radius:12px; color:var(--v7-text); font:600 14.5px/1.2 var(--v7-sans); text-decoration:none; transition:border-color .2s; }
.sv-example__areas .pg-tile { --tile:32px; }
.unlock-site .sv-example__areas .pg-tile svg { width:18px; height:18px; }
.unlock-site .sv-example__areas a:hover, .unlock-site .sv-example__areas a:focus-visible { border-color:rgba(133,237,197,.5); }

/* ---------- How we work: four steps on one straight rule (the only full step strip on the site) ---------- */
.hw-steps { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; margin:0; padding:0; list-style:none; }
.hw-steps::before { content:""; position:absolute; top:calc(var(--v7-tile-lg) / 2); left:32px; right:0; height:1px; background:#b9c6bb; }
.hw-steps li { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding-right:clamp(0px, 1.5vw, 24px); scroll-margin-top:calc(var(--top, 0px) + 96px); }
.hw-steps .pg-tile { --tile:var(--v7-tile-lg); position:relative; background:color-mix(in srgb, var(--v7-green) 10%, var(--v7-paper)); box-shadow:0 0 0 10px var(--v7-paper); }
.unlock-site .hw-steps h3 { margin-top:26px; }
.unlock-site .hw-steps li > p { max-width:30ch; margin:10px 0 0; color:var(--v7-fg-2); font-size:15.5px; line-height:1.6; }
.unlock-site .hw-steps .hw-steps__get { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; color:var(--v7-fg); font-size:14.5px; font-weight:600; line-height:1.4; }
.hw-steps__get svg { flex:none; width:18px; height:18px; color:var(--v7-green); }

/* What we'll need from you: four icon items. */
.hw-needs__list { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; margin:0; padding:0; list-style:none; }
.hw-needs__list li { padding-top:28px; border-top:1px solid var(--v7-line-light); }
.unlock-site .hw-needs__list h3 { margin-top:20px; }
.unlock-site .hw-needs__list p { margin:8px 0 0; color:var(--v7-fg-2); font-size:15.5px; line-height:1.55; }

/* ---------- 404 ---------- */
.unlock-site .v8-404 { position:relative; isolation:isolate; overflow:hidden; padding-block:var(--v7-space); background:var(--v7-ink); color:var(--v7-text); }
.v8-404__copy { max-width:640px; }
.v8-404__mark { display:block; width:72px; height:auto; margin-bottom:36px; color:var(--v7-mint); }
.unlock-site .v8-404 h1 { margin:0 0 24px; color:var(--v7-text); font:var(--v7-h1); letter-spacing:-.04em; }
.unlock-site .v8-404 p { margin:0 0 14px; color:var(--v7-text-2); font-size:clamp(17px, 1.35vw, 19px); line-height:1.65; }
.unlock-site .v8-404__path code { padding:1px 6px; border-radius:var(--v7-r-control); background:var(--v7-panel); color:var(--v7-mint); font:400 .84em/1.4 var(--v7-mono); overflow-wrap:anywhere; }
.unlock-site .v8-404__links { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 32px; max-width:560px; margin:28px 0 0; padding:0; list-style:none; border-top:1px solid var(--v7-line-dark); }
.v8-404__links li { border-bottom:1px solid var(--v7-line-dark); }
.unlock-site .v8-404__links a { display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 0; color:var(--v7-text); font:500 17px/1.3 var(--v7-sans); text-decoration:none; transition:color .2s; }
.v8-404__links .pg-tile { --tile:var(--v7-tile-sm); }
.v8-404__links a > span:not(.pg-tile) { flex:1 1 auto; }
.v8-404__links a > svg { flex:none; width:18px; height:18px; color:var(--v7-mint); transition:transform .25s var(--v7-ease); }
.unlock-site .v8-404__links a:hover, .unlock-site .v8-404__links a:focus-visible { color:var(--v7-mint); }
.v8-404__links a:hover > svg, .v8-404__links a:focus-visible > svg { transform:translateX(3px); }
.v8-404 .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }

/* ---------- Pricing: support plan sizes, side by side on straight rules (no prices, by design) ---------- */
.page-pricing .page-head .page-head-grid { grid-template-columns:minmax(0,1fr); }
.unlock-site .pr-tiers { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0; padding:0; list-style:none; border-top:1px solid var(--v7-rule); }
.pr-tiers > li { display:flex; flex-direction:column; align-items:flex-start; padding:32px clamp(20px, 2.6vw, 40px) 4px; border-left:1px solid var(--v7-rule); }
.pr-tiers > li:first-child { padding-left:0; border-left:0; }
.unlock-site .pr-tiers h3 { margin:0; color:var(--v7-fg); font:var(--v7-h3); letter-spacing:-.02em; }
.unlock-site .pr-tiers .pr-tiers__hours { display:flex; align-items:baseline; gap:12px; margin:18px 0 0; color:var(--v7-fg-2); font-size:16px; }
.pr-tiers__hours strong { color:var(--v7-mint); font:600 clamp(52px, 6vw, 88px)/1 var(--v7-display); letter-spacing:-.045em; }
.unlock-site .pr-tiers__list { display:grid; gap:10px; margin:24px 0 28px; padding:0; list-style:none; }
.pr-tiers__list li { display:flex; align-items:flex-start; gap:10px; color:var(--v7-fg); font-size:15.5px; line-height:1.45; }
.pr-tiers__list svg { flex:none; width:18px; height:18px; margin-top:1px; color:var(--v7-mint); }
.pr-tiers .v7-link { margin-top:auto; }
.unlock-site .pr-plans__more { margin:clamp(40px, 4.5vw, 56px) 0 0; padding-top:24px; border-top:1px solid var(--v7-rule); color:var(--v7-fg-2); font-size:15.5px; }
.unlock-site .pr-plans__more a { padding-block:4px; color:var(--v7-fg); text-decoration:underline; text-decoration-color:var(--v7-mint); text-underline-offset:4px; }
.unlock-site .pr-call { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:clamp(40px, 4.5vw, 56px) 0 0; padding-top:24px; border-top:1px solid var(--v7-rule); color:var(--v7-fg-2); font-size:16px; }
.unlock-site .pr-includes .pg-intro { margin-bottom:clamp(32px, 3.5vw, 48px); }

/* ---------- Responsive ---------- */
@media (max-width:1180px) {
  .page-services .page-head.has-visual .page-head-grid { grid-template-columns:minmax(0,1fr); }
  .v8-index { max-width:560px; justify-self:start; }
  .sv-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sv-start__grid { grid-template-columns:minmax(0,1fr); }
  .sv-start__text { max-width:40rem; }
}
@media (max-width:860px) {
  .unlock-site .pr-tiers { grid-template-columns:minmax(0,1fr); }
  .pr-tiers > li, .pr-tiers > li:first-child { padding:28px 0; border-left:0; border-top:1px solid var(--v7-rule); }
  .pr-tiers > li:first-child { border-top:0; }
}
@media (max-width:1000px) {
  .hw-steps, .hw-needs__list { grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px 32px; }
  .hw-steps::before { display:none; }
}
@media (max-width:860px) {
  .pg-split { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .unlock-site:is(.page-services, .page-process, .page-pricing) .page-head { padding-top:24px; }
  .unlock-site:is(.page-services, .page-process, .page-pricing) .page-head .crumbs { margin-bottom:40px; }
  .sv-grid, .hw-needs__list { grid-template-columns:minmax(0,1fr); }
  /* Needs become compact rows: tile on the left, text beside it. */
  .hw-needs__list { gap:0; }
  .hw-needs__list li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; padding:22px 0; }
  .hw-needs__list .pg-tile { grid-row:span 2; }
  .unlock-site .hw-needs__list h3 { margin-top:2px; }
  /* Steps stack: the same straight rule runs down the left, through the tiles. */
  .hw-steps { grid-template-columns:minmax(0,1fr); gap:40px; }
  .hw-steps::before { display:block; top:32px; bottom:32px; left:31px; right:auto; width:1px; height:auto; }
  .hw-steps li { display:grid; grid-template-columns:var(--v7-tile-lg) minmax(0,1fr); column-gap:20px; padding-right:0; }
  .hw-steps .pg-tile { grid-row:1 / span 3; }
  .unlock-site .hw-steps h3 { margin-top:4px; }
  .hw-steps li > p { grid-column:2; }
  .unlock-site .hw-steps .hw-steps__get { padding-top:12px; }
  /* The worked example stacks; its arrows turn to point down (still straight). */
  .unlock-site .sv-example__flow { grid-template-columns:minmax(0,1fr); gap:8px; }
  .sv-example__sys { grid-template-columns:auto minmax(0,1fr); justify-items:start; align-items:center; padding:12px 14px; text-align:left; }
  .sv-example__sys .pg-tile { --tile:var(--v7-tile-sm); }
  .sv-example__to svg { transform:rotate(90deg); }
  .v8-404__mark { width:60px; margin-bottom:28px; }
  .unlock-site .v8-404__links { grid-template-columns:minmax(0,1fr); }
  .v8-404 .actions a { flex:1 1 100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .v8-index a > svg, .sv-card__pages svg, .v8-404__links a > svg { transition:none; }
}