/* HealOneSelf · Card Reading — the introduction page at /card-reading-static/
 * TKT-009, Free Card Reading build manual for Nam, v1, 2 October 2026.
 *
 * Copied from the <style> of healoneself-free-card-reading.html, which the
 * manual makes the source of truth: values, timings and class names as
 * supplied. Loads after tokens.css and components.css.
 *
 * Left out, because the site's own template parts already render them: the
 * file's header, phone menu and footer rules. Its colour block is gone too —
 * the --hos-* colours it set are the same values tokens.css already gives.
 */
/* HealOneSelf · Free Card Reading landing page · built on the Finally You system (same tokens as finally-you.css) */
.hos-cr{
  --serif:var(--hos-serif); --sans:var(--hos-sans);
  --h1:58px; --h2:46px; --lead:24px; --body:17px; --land:23px; --sec:96px; --gut:40px; --wrap:1300px;
  --radius-card:14px; --shadow-card:var(--hos-shadow-card);
}
.hos-cr{background:var(--hos-page);color:var(--hos-ink);font-family:var(--sans);font-weight:300;font-size:var(--body);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hos-cr *{box-sizing:border-box}
.hos-cr a{color:inherit}
.hos-cr p{margin:0 0 22px}
.hos-cr p:last-child{margin-bottom:0}
.hos-cr h1,.hos-cr h2,.hos-cr h3{font-family:var(--serif);font-weight:300;line-height:1.18;margin:0;color:var(--hos-ink);text-wrap:balance}
.hos-cr h1{font-size:var(--h1)}
.hos-cr h2{font-size:var(--h2)}
.hos-cr h1 em,.hos-cr h2 em{font-style:italic;color:var(--hos-terra-text);font-weight:300}
.hos-cr .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);position:relative;z-index:1}
.hos-cr .sec{position:relative;overflow:hidden;padding-top:var(--sec);padding-bottom:var(--sec)}
.hos-cr .sec--alt{background:var(--hos-alt)}
.hos-cr .eyebrow{font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--hos-ink-3);margin:0}
.hos-cr .eyebrow .st{display:block;font-size:14px;margin-bottom:7px}
.hos-cr .ebrule{display:block;width:56px;height:1px;background:var(--hos-terra);opacity:.55;margin:16px 0 0}
.hos-cr .land{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--land);line-height:1.5;color:var(--hos-terra-text);margin:30px 0 0;max-width:40ch}
.hos-cr .btn{display:inline-block;background:var(--hos-cta);color:#fff;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;padding:17px 34px;border-radius:999px;text-decoration:none;transition:background .3s ease}
.hos-cr .btn:hover{background:var(--hos-cta-hover)}
.hos-cr .btn:focus-visible,.hos-cr a:focus-visible,.hos-cr summary:focus-visible,.hos-cr button:focus-visible{outline:1px solid var(--hos-terra);outline-offset:4px}
.hos-cr .meta{font-size:13px;letter-spacing:.02em;color:var(--hos-ink-3);margin:18px 0 0}
.hos-cr .st,.hos-cr .sc{color:var(--hos-terra);font-style:normal}
.hos-cr .sc{position:absolute;opacity:.55;pointer-events:none;animation:hosFloat 11s ease-in-out infinite;z-index:0}
@keyframes hosFloat{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.85;transform:translateY(-6px)}}
.hos-cr .lb{position:absolute;color:var(--hos-terra);fill:none;stroke:currentColor;stroke-width:5;pointer-events:none;z-index:0}
.hos-cr .lb--r{top:50%;right:-26%;width:56%;transform:translateY(-50%);opacity:.2}
.hos-cr .lb--l{top:50%;left:-28%;width:58%;transform:translateY(-50%);opacity:.2}
.hos-cr .g2{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(38px,5vw,88px);align-items:start}
.hos-cr .g2>*{min-width:0}

/* 1 hero */
.hos-cr .hero{padding-top:clamp(72px,8vw,124px);padding-bottom:clamp(72px,8vw,116px)}
.hos-cr .hero .rule{display:block;width:1px;height:64px;background:var(--hos-terra);opacity:.55;margin:26px 0 30px}
.hos-cr .hero h1{max-width:21ch}
.hos-cr .lead{font-family:var(--serif);font-style:italic;font-size:var(--lead);line-height:1.5;color:var(--hos-ink-2);margin:30px 0 38px;max-width:48ch}

/* 2 for you */
.hos-cr .for h2{margin-top:16px;max-width:17ch}
.hos-cr .intro2{margin:0 0 14px}
.hos-cr .bl{list-style:none;margin:0 0 34px;padding:0;border-top:1px solid var(--hos-hairline)}
.hos-cr .bl li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hos-hairline);font-family:var(--serif);font-size:21px;line-height:1.4}
.hos-cr .bl li:before{content:'✦';color:var(--hos-terra);font-size:10px;flex:none}
.hos-cr .for .land{margin:30px 0 34px}

/* 3 how */
.hos-cr .how h2{margin-top:16px;max-width:32ch}
.hos-cr .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:56px}
.hos-cr .step{border-top:1px solid rgba(196,130,90,.25);padding-top:22px}
.hos-cr .step-n{font-family:var(--serif);font-style:italic;font-size:58px;line-height:.9;color:var(--hos-terra-text)}
.hos-cr .step h3{font-weight:300;font-size:26px;line-height:1.24;margin-top:9px}
.hos-cr .step p{font-size:15px;line-height:1.8;margin:12px 0 0}
.hos-cr .step .sl{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--hos-ink-2);margin-top:14px}
.hos-cr .flab{margin-top:80px}
.hos-cr .mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.hos-cr .mod{background:var(--hos-white);border:1px solid var(--hos-hairline);border-radius:var(--radius-card);padding:30px 26px 34px;box-shadow:var(--shadow-card);text-align:center}
.hos-cr .mod svg{display:block;margin:0 auto;width:52px;height:52px;color:var(--hos-cta);fill:currentColor}
.hos-cr .mod-n{font-size:12.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;color:var(--hos-ink-2);margin:12px auto 0;max-width:22ch;min-height:3.2em}
.hos-cr .mod-d{font-size:17.5px;line-height:1.75;margin:22px auto 0;max-width:20ch}

/* 4 different */
.hos-cr .diff .g2{align-items:center}
.hos-cr .diff h2{margin-top:16px;max-width:20ch}
.hos-cr .diff .body{margin-top:30px}
.hos-cr .vidwrap{max-width:440px;margin-left:auto}
.hos-cr .vid{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:3/2;background:#3a2a20;box-shadow:0 10px 30px rgba(44,26,14,.14)}
.hos-cr .vid img{width:100%;height:100%;object-fit:cover;display:block}
.hos-cr .vid:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,26,14,0) 50%,rgba(44,26,14,.45))}
.hos-cr .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:rgba(250,246,242,.92);display:grid;place-items:center;z-index:2;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.hos-cr .play:before{content:'';margin-left:5px;border-left:20px solid var(--hos-cta);border-top:12px solid transparent;border-bottom:12px solid transparent}
.hos-cr .ph{position:absolute;top:14px;right:14px;z-index:2;background:rgba(250,246,242,.92);color:var(--hos-terra-text);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.hos-cr .vland{margin-top:26px}
.hos-cr .vcap{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--hos-ink-2);margin:14px 0 0}
.hos-cr .vcap small{display:block;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.04em;color:var(--hos-ink-3);margin-top:2px}
.hos-cr .yours{margin-top:84px}
.hos-cr .g3{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start;margin-top:22px}
.hos-cr .g3>*{min-width:0}
.hos-cr .samp{background:var(--hos-white);border:1px solid var(--hos-hairline);border-radius:var(--radius-card);padding:34px 36px;box-shadow:var(--shadow-card)}
.hos-cr .samp-eb{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--hos-terra-text);text-align:center;margin:0}
.hos-cr .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 24px}
.hos-cr .tile{perspective:800px;height:132px}
.hos-cr .ti{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s ease}
.hos-cr .tile.on .ti{transform:rotateY(180deg)}
.hos-cr .tf{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 8px}
.hos-cr .tb{background:var(--hos-blush-2);border:1px solid rgba(166,130,110,.45)}
.hos-cr .tb svg{width:44px;height:44px;color:var(--hos-cta);fill:currentColor;opacity:.75}
.hos-cr .tr{background:var(--hos-page);border:1px solid rgba(196,130,90,.3);transform:rotateY(180deg)}
.hos-cr .tile b{display:block;font-weight:400;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--hos-ink-2)}
.hos-cr .tile svg{width:38px;height:38px;margin:10px auto;display:block;color:var(--hos-cta);fill:currentColor}
.hos-cr .tile span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hos-ink-3)}
.hos-cr .samp h3{font-weight:300;font-size:24px;margin-bottom:10px}
.hos-cr .samp p{font-size:16px;line-height:1.85}
.hos-cr .keep{margin-top:24px;padding-top:20px;border-top:1px solid var(--hos-hairline)}
.hos-cr .keep .samp-eb{text-align:left}
.hos-cr .keep .kq{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--hos-terra-text);margin-top:8px}
.hos-cr .rev{border-left:1px solid var(--hos-terra);padding:4px 0 4px 26px}
.hos-cr .stars{color:var(--hos-terra);font-size:12px;letter-spacing:.3em;margin-bottom:14px}
.hos-cr .rev blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.5}
.hos-cr .who{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hos-ink-3);margin-top:18px}
.hos-cr .who small{display:block;letter-spacing:.04em;text-transform:none;font-size:12.5px;margin-top:3px}
.hos-cr .snote{font-size:13px;color:var(--hos-ink-3);margin:18px 0 0;text-align:center}
.hos-cr .cta4{text-align:center;margin-top:44px}

/* 5 questions */
.hos-cr .faqsec .inner{max-width:780px}
.hos-cr .faqsec h2{margin-top:16px;max-width:32ch}
.hos-cr .faq{margin-top:44px;border-top:1px solid var(--hos-hairline)}
.hos-cr .qa{border-bottom:1px solid var(--hos-hairline)}
.hos-cr .qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;font-family:var(--serif);font-weight:300;font-size:27px;line-height:1.3}
.hos-cr .qa summary::-webkit-details-marker{display:none}
.hos-cr .qa summary i{flex:none;position:relative;width:16px;height:16px}
.hos-cr .qa summary i:before,.hos-cr .qa summary i:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hos-terra);transition:transform .3s ease}
.hos-cr .qa summary i:after{transform:rotate(90deg)}
.hos-cr .qa[open] summary i:after{transform:rotate(0)}
.hos-cr .ans{padding:0 0 26px}
.hos-cr .ans p{font-size:16.5px;max-width:64ch;margin-bottom:12px}

/* 6 final */
.hos-cr .finsec{padding-top:110px;padding-bottom:110px}
.hos-cr .fin{position:relative;overflow:hidden;background:var(--hos-blush-2);border-radius:16px;padding:72px 40px;text-align:center}
.hos-cr .fin .lb{left:50%;top:50%;transform:translate(-50%,-46%);width:560px;max-width:112%;opacity:.16}
.hos-cr .fin-in{position:relative;z-index:1}
.hos-cr .fin h2{font-weight:300;font-size:46px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase}
.hos-cr .fin h2 .gem{color:var(--hos-terra);font-size:15px;vertical-align:middle;margin:0 18px}
.hos-cr .fin-l{font-family:var(--serif);font-style:italic;font-size:var(--land);line-height:1.5;color:var(--hos-ink);max-width:560px;margin:18px auto 30px}
.hos-cr .alt{display:inline-block;margin-top:14px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--hos-terra-text);text-decoration:none;border-bottom:1px solid rgba(158,92,49,.35)}

.hos-cr .how .lb--how{right:-40%;top:68%}
@media (min-width:961px){.hos-cr .steps{align-items:start}.hos-cr .step:nth-child(2){margin-top:36px}.hos-cr .step:nth-child(3){margin-top:72px}.hos-cr .step:nth-child(4){margin-top:108px}}
.hos-cr .step{transition:opacity .9s ease,transform .9s ease}
.hos-cr .steps.pre .step{opacity:0;transform:translateY(18px)}
.hos-cr .steps.pre .step.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hos-cr .steps.pre .step{opacity:1;transform:none}}
/* quiet booking link */
.hos-cr .call{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hos-ink-2);text-decoration:none;border-bottom:1px solid rgba(107,76,53,.35);padding-bottom:3px}
.hos-cr .call:hover{color:var(--hos-terra-text)}
.hos-cr .ans .call{margin-top:4px}

/* hero card backs */
.hos-cr .hero .wrap{min-height:420px}
.hos-cr .fan{position:absolute;right:6%;top:50%;width:300px;height:300px;margin-top:-150px;z-index:1}
.hos-cr .cb{position:absolute;left:50%;top:50%;width:140px;height:228px;margin:-114px 0 0 -70px;border-radius:12px;background:var(--hos-blush-2);border:1px solid rgba(166,130,110,.45);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(44,26,14,.08);animation:hosC2 10s ease-in-out infinite}
.hos-cr .cb:after{content:'';position:absolute;inset:7px;border:1px solid rgba(166,130,110,.3);border-radius:8px}
.hos-cr .cb svg{width:74px;height:74px;color:var(--hos-cta);fill:currentColor;opacity:.75}
.hos-cr .c1{animation-name:hosC1}.hos-cr .c2{background:var(--hos-alt);z-index:2;animation-delay:-3s}.hos-cr .c3{animation-name:hosC3;animation-delay:-6s}
@keyframes hosC1{0%,100%{transform:rotate(-14deg) translateX(-78px)}50%{transform:rotate(-13deg) translateX(-78px) translateY(-7px)}}
@keyframes hosC2{0%,100%{transform:translateY(-12px)}50%{transform:translateY(-19px)}}
@keyframes hosC3{0%,100%{transform:rotate(14deg) translateX(78px)}50%{transform:rotate(13deg) translateX(78px) translateY(-7px)}}

/* closing signature */
.hos-cr .sign{display:flex;align-items:center;justify-content:center;gap:16px;max-width:480px;margin:22px auto 30px;text-align:left}
.hos-cr .sign img{width:60px;height:60px;flex:none;border-radius:50%;object-fit:cover;border:1px solid rgba(166,130,110,.45);background:var(--hos-alt);color:transparent;font-size:0}
.hos-cr .sign p{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.45;color:var(--hos-ink-2);margin:0}
.hos-cr .sign span{white-space:nowrap}

/* sticky phone button */
.hos-cr .sticky{display:none}

@media (max-width:1100px){.hos-cr .fan{right:1%;transform:scale(.85)}}
@media (max-width:960px){
  .hos-cr .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .hos-cr{--h1:36px;--h2:30px;--lead:20px;--land:19px;--sec:72px;--gut:24px}
  .hos-cr .hero{padding-bottom:96px}
  .hos-cr .hero .rule{height:32px;margin:18px 0 22px}
  .hos-cr .hero .wrap{min-height:0}
  .hos-cr .fan{position:relative;right:auto;top:auto;margin:36px auto 0;width:260px;height:230px;transform:none}
  .hos-cr .cb{width:110px;height:180px;margin:-90px 0 0 -55px}
  .hos-cr .cb svg{width:58px;height:58px}
  .hos-cr .tile{height:112px}
  .hos-cr .sign{gap:12px;margin:18px auto 24px}.hos-cr .sign img{width:52px;height:52px}.hos-cr .sign p{font-size:17px}
  .hos-cr .hero h1,.hos-cr .for h2,.hos-cr .diff h2,.hos-cr .lead{max-width:none}
  .hos-cr .lead br{display:none}
  .hos-cr .lb--r{right:-56%;width:100%;opacity:.12}
  .hos-cr .lb--l{left:-58%;width:100%;opacity:.12}
  .hos-cr .g2,.hos-cr .g3{grid-template-columns:1fr;gap:34px}
  .hos-cr .bl li{font-size:19px}
  .hos-cr .steps{grid-template-columns:1fr;gap:26px;margin-top:36px}
  .hos-cr .step-n{font-size:46px}.hos-cr .step{padding-top:18px}.hos-cr .step h3{font-size:24px}.hos-cr .step .sl{margin-top:10px}
  .hos-cr .flab{margin-top:48px}
  .hos-cr .mods{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .hos-cr .mod{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;align-items:start;text-align:left;padding:16px 16px 18px}
  .hos-cr .mod svg{grid-row:1 / span 2;width:36px;height:36px;margin:2px 0 0}
  .hos-cr .mod-n{margin:0;max-width:none;min-height:0;font-size:11.5px}
  .hos-cr .mod-d{margin:2px 0 0;max-width:none;font-size:15.5px;line-height:1.6}
  .hos-cr .yours{margin-top:56px}
  .hos-cr .samp{padding:24px 20px}.hos-cr .tiles{gap:8px}.hos-cr .tile b{font-size:9px;letter-spacing:.12em}
  .hos-cr .rev blockquote{font-size:20px}
  .hos-cr .play{width:62px;height:62px}
  .hos-cr .vidwrap{max-width:none}
  .hos-cr .qa summary{font-size:21px;padding:20px 0}
  .hos-cr .ans p{font-size:16px}
  .hos-cr .finsec{padding-top:72px;padding-bottom:80px}
  .hos-cr .fin{padding:52px 22px;border-radius:14px}
  .hos-cr .fin h2{font-size:28px}
  .hos-cr .fin h2 .gem{margin:0 8px;font-size:11px}
  .hos-cr .s-far{display:none}
  .hos-cr .sticky{display:block;position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;text-align:center;background:var(--hos-cta);color:#fff;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:15px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(44,26,14,.18);transition:opacity .3s ease,transform .3s ease}
  .hos-cr .sticky.hide{opacity:0;transform:translateY(20px);pointer-events:none}
  .hos-cr{padding-bottom:70px}
}
@media (max-width:400px){.hos-cr{--gut:20px}}
@media (prefers-reduced-motion:reduce){.hos-cr .cb{animation:none}.hos-cr .ti{transition:none}.hos-cr .sc{animation:none;opacity:.6}.hos-cr .qa summary i:before,.hos-cr .qa summary i:after{transition:none}}