/* Homepage sections below the product chooser (2026-10-16 layout, from the owner's website blueprint).
   Order: credibility strip, connected workflow, why Ramtek, tool catalog, one matter story, walkthrough video,
   security, pricing preview, what you can check yourself, questions, final call to action.
   Built on the homepage tokens only (graphite, gold hairlines, Fraunces headings, Inter body). One accent, quiet borders,
   hover zoom through `scale` so it never fights the .reveal transform. Prefix hs- keeps it away from older rules. */

/* ── shared pieces ─────────────────────────────────────────── */
.hs { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--border); }
.hs .wrap { position: relative; }
.hs-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.4rem, 5vw, 3.8rem); }
.hs-head .sec-sub { max-width: 620px; font-size: .98rem; }
.hs-note { text-align: center; font-size: .78rem; color: var(--mid); margin-top: 1.8rem; line-height: 1.7; }
.hs-note a, .hs a.hs-inline { color: var(--gold2); border-bottom: 1px solid rgba(232,196,106,.35); }
.hs-tag { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 980px; border: 1px solid rgba(255,255,255,.14); color: #a1a1a6; white-space: nowrap; }
.hs-tag.auto { color: var(--gold2); border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.08); }
.hs-tag.you { color: #d2d2d7; border-color: rgba(255,255,255,.22); }
.hs-card { position: relative; background: #111118; border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 1.6rem; scale: 1; transition: scale .6s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .5s; }
.hs-card:hover { scale: 1.015; border-color: rgba(201,168,76,.35); box-shadow: 0 24px 70px -34px rgba(201,168,76,.35); }
.hs-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: var(--gold2); }
.hs-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.hs-link:hover svg { transform: translateX(3px); }
.hs :focus-visible { outline: 2px solid rgba(232,196,106,.9); outline-offset: 3px; border-radius: 8px; }

/* ── 1. credibility strip (replaces the old ticker) ───────── */
.hs-cred { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(13,13,20,.6); }
.hs-cred ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.hs-cred li { display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 1.15rem .8rem; font-size: .82rem; font-weight: 500; color: #a1a1a6; text-align: center; line-height: 1.4; }
.hs-cred li + li { border-left: 1px solid var(--border); }
.hs-cred svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── 2. connected workflow ────────────────────────────────── */
.hs-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; counter-reset: hsflow; }
.hs-flow::before { content: ''; position: absolute; left: 6%; right: 6%; top: 2.1rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,.45) 12%, rgba(201,168,76,.45) 88%, transparent); }
.hs-step { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.35rem 1.2rem 1.4rem; counter-increment: hsflow; }
.hs-step .hs-num { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--gold2); background: var(--black); border: 1px solid rgba(201,168,76,.55); position: relative; z-index: 1; }
.hs-step h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.12rem; color: var(--white); letter-spacing: -.01em; line-height: 1.25; }
.hs-step dl { display: grid; gap: .55rem; margin: 0; }
.hs-step dt { font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6e6e73; }
.hs-step dd { margin: .12rem 0 0; font-size: .82rem; line-height: 1.55; color: #b4b4bd; }
.hs-step .hs-tag { align-self: flex-start; margin-top: auto; }
.hs-flow-note { max-width: 680px; margin: 2rem auto 0; text-align: center; font-size: .86rem; line-height: 1.7; color: #a1a1a6; }
.hs-flow-note b { color: var(--white); font-weight: 600; }

/* ── 3. why Ramtek: three pillars ─────────────────────────── */
.hs-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.hs-pillar { display: flex; flex-direction: column; gap: 1rem; padding: 1.8rem; }
.hs-pillar h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 1.5rem; color: var(--white); letter-spacing: -.015em; line-height: 1.2; }
.hs-pillar > p { font-size: .9rem; line-height: 1.7; color: #b4b4bd; }
.hs-vis { margin-top: auto; padding: 1rem; border-radius: 14px; background: #0b0b11; border: 1px solid rgba(255,255,255,.06); display: grid; gap: .55rem; font-size: .78rem; line-height: 1.55; }
.hs-bub { padding: .6rem .8rem; border-radius: 11px; color: #a1a1a6; background: #15151d; }
.hs-bub b { display: block; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #6e6e73; margin-bottom: .25rem; }
.hs-bub.rt { color: #e4e4ea; background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.28); }
.hs-bub.rt b { color: var(--gold2); }
.hs-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .7rem; border-radius: 10px; background: #15151d; color: #cfcfd6; }
.hs-row span:last-child { color: #8a8aa8; font-size: .72rem; white-space: nowrap; }
.hs-price { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; border-radius: 10px; background: #15151d; color: #cfcfd6; }
.hs-price b { color: var(--white); font-weight: 600; }

/* ── 4. tool catalog ──────────────────────────────────────── */
.hs-group + .hs-group { margin-top: 2.6rem; }
.hs-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 .2rem 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.hs-group-head h3 { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hs-group-head span { font-size: .78rem; color: var(--mid); }
.hs-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.hs-tool { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem; }
.hs-tool svg.hs-ico { width: 24px; height: 24px; fill: none; stroke: var(--gold2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-tool h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.15rem; color: var(--white); letter-spacing: -.01em; }
.hs-tool p { font-size: .85rem; line-height: 1.6; color: #a1a1a6; }
.hs-tool .hs-benefit { font-size: .8rem; color: #d2d2d7; }
.hs-tool .hs-foot { margin-top: auto; padding-top: .5rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }

/* ── 5. one matter, one story ─────────────────────────────── */
.hs-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.hs-story-copy h2 { text-align: left; }
.hs-story-copy .sec-sub { margin-left: 0; text-align: left; }
.hs-story-copy .hs-link { margin-top: 1.6rem; }
.hs-time { list-style: none; position: relative; display: grid; gap: 0; padding-left: 1.4rem; }
.hs-time::before { content: ''; position: absolute; left: .32rem; top: .5rem; bottom: .5rem; width: 1px; background: linear-gradient(180deg, rgba(201,168,76,.5), rgba(201,168,76,.12)); }
.hs-time li { position: relative; padding: .9rem 0 .9rem 1.2rem; display: grid; gap: .3rem; }
.hs-time li::before { content: ''; position: absolute; left: -1.28rem; top: 1.25rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--black); border: 1px solid var(--gold); }
.hs-time li.auto::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(201,168,76,.15); }
.hs-time time { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6e6e73; }
.hs-time b { font-weight: 600; font-size: .95rem; color: var(--white); line-height: 1.4; }
.hs-time p { font-size: .84rem; line-height: 1.6; color: #a1a1a6; }
.hs-time .hs-tag { justify-self: start; margin-top: .2rem; }

/* ── 6. walkthrough video (existing player, new frame) ────── */
.hs-video { max-width: 1000px; margin: 0 auto; }

/* ── 7. security and professional responsibility ──────────── */
.hs-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.hs-sec .hs-card { display: flex; flex-direction: column; gap: .9rem; }
.hs-sec h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.3rem; color: var(--white); letter-spacing: -.01em; }
.hs-sec ul { list-style: none; display: grid; gap: .6rem; }
.hs-sec li { position: relative; padding-left: 1.1rem; font-size: .86rem; line-height: 1.6; color: #b4b4bd; }
.hs-sec li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.hs-sec .hs-link { margin-top: auto; padding-top: .4rem; }
.hs-trust-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.8rem; margin-top: 2rem; }

/* ── 8. pricing preview ───────────────────────────────────── */
.hs-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.hs-plan { display: flex; flex-direction: column; gap: .75rem; padding: 1.8rem; }
.hs-plan.mid { border-color: rgba(201,168,76,.4); background: linear-gradient(180deg, rgba(201,168,76,.07), #111118 55%); }
.hs-plan h3 { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hs-plan .hs-amt { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--white); letter-spacing: -.02em; line-height: 1.1; }
.hs-plan .hs-amt small { font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 400; color: var(--mid); letter-spacing: 0; margin-left: .35rem; }
.hs-plan .hs-for { font-size: .88rem; line-height: 1.6; color: #b4b4bd; }
.hs-plan ul { list-style: none; display: grid; gap: .5rem; margin: .3rem 0 .8rem; }
.hs-plan li { position: relative; padding-left: 1.1rem; font-size: .84rem; line-height: 1.55; color: #cfcfd6; }
.hs-plan li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.hs-plan .btn { margin-top: auto; justify-content: center; }
.hs-price-foot { text-align: center; margin-top: 1.8rem; font-size: .84rem; line-height: 1.8; color: #a1a1a6; }
.hs-price-foot a { color: var(--gold2); border-bottom: 1px solid rgba(232,196,106,.35); }

/* ── 9. what you can check yourself ───────────────────────── */
.hs-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hs-proof .hs-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; }
.hs-proof h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.12rem; color: var(--white); letter-spacing: -.01em; line-height: 1.3; }
.hs-proof p { font-size: .85rem; line-height: 1.65; color: #a1a1a6; }
.hs-proof .hs-link { margin-top: auto; padding-top: .4rem; }
.hs-limits { max-width: 860px; margin: 2rem auto 0; padding: 1.4rem 1.6rem; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: #0b0b11; }
.hs-limits h3 { font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.hs-limits ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 2rem; }
.hs-limits li { position: relative; padding-left: 1.1rem; font-size: .84rem; line-height: 1.6; color: #b4b4bd; }
.hs-limits li::before { content: ''; position: absolute; left: 0; top: .66em; width: 6px; height: 1px; background: var(--gold); }

/* ── 10. questions ────────────────────────────────────────── */
.hs-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border); }
.hs-faq details { border-bottom: 1px solid var(--border); }
.hs-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.25rem .2rem; font-size: 1rem; font-weight: 500; color: var(--white); }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(45deg); transition: transform .3s cubic-bezier(.4,0,.2,1); margin-top: -4px; }
.hs-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.hs-faq summary:hover { color: var(--gold2); }
.hs-faq .hs-a { padding: 0 .2rem 1.4rem; font-size: .92rem; line-height: 1.75; color: #b4b4bd; max-width: 700px; }
.hs-faq .hs-a a { color: var(--gold2); border-bottom: 1px solid rgba(232,196,106,.35); }

/* ── 11. final call to action ─────────────────────────────── */
.hs-final { text-align: center; padding: clamp(5rem, 10vw, 8rem) 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.hs-final::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(900px, 94vw); height: 420px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(201,168,76,.13), transparent 72%); pointer-events: none; }
.hs-final .wrap { position: relative; }
.hs-final h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.02em; line-height: 1.12; color: var(--white); }
.hs-final h2 em { font-style: italic; color: var(--gold); }
.hs-final p.hs-sub { max-width: 560px; margin: 1.2rem auto 0; font-size: 1rem; line-height: 1.7; color: #a1a1a6; }
.hs-final .hs-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hs-final .hs-small { margin-top: 1.4rem; font-size: .8rem; color: var(--mid); }
.hs-final .hs-small a { color: var(--gold2); border-bottom: 1px solid rgba(232,196,106,.35); }

/* ── tablet and phone ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .hs-flow { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .hs-flow::before { left: 1.55rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 1px; height: auto; background: linear-gradient(180deg, rgba(201,168,76,.45), rgba(201,168,76,.15)); }
  .hs-step { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: 1rem; row-gap: .7rem; padding: 1.2rem 1.2rem 1.3rem .8rem; }
  .hs-step .hs-num { grid-row: 1 / span 3; }
  .hs-step > :not(.hs-num) { grid-column: 2; }
  .hs-pillars, .hs-sec, .hs-plans { grid-template-columns: minmax(0, 1fr); }
  .hs-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-story { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hs-cred ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-cred li:nth-child(3) { border-left: 0; }
  .hs-cred li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .hs-proof { grid-template-columns: minmax(0, 1fr); }
  .hs-limits ul { grid-template-columns: minmax(0, 1fr); }
  .hs-card { border-radius: 18px; }
  .hs-pillar, .hs-plan { padding: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .hs-card, .hs-link svg, .hs-faq summary::after { transition: none; } .hs-card:hover { scale: 1; } }
.hs-story-copy { position: sticky; top: 7rem; } @media (max-width: 1100px) { .hs-story-copy { position: static; } }