/* kinkai.me design system. THE HOME PAGE IS THE TEMPLATE (Dan, 2026-08-17).
   Lifted VERBATIM from index.html so the two can never disagree. Every page loads this FIRST and
   may only add its own furniture afterwards. If a page needs a different colour, a different type
   scale or a different hero, that is a change TO THIS FILE, not a local override. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format('woff2')}
:root{
  --ground:#08080A; --surface:#141414; --raise:#1A1C22;
  --ruby:#E0115F; --ruby-soft:#FF6B9D; --ruby-deep:#C70E53; --ruby-glow:rgba(224,17,95,.3);
  --text:#F2F2F5; --muted:#9A9CA6; --faint:#5A5A62;
  --line:#242428; --line-strong:#3A3C46;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(1rem,.9rem + .35vw,1.0625rem); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,p{margin:0}
h1,h2{text-wrap:balance}
img{display:block; max-width:100%}

/* ================= HERO ================= */
.hero{position:relative; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; isolation:isolate}

/* the work itself, filling the frame and duotoned into the brand */
.bed{position:absolute; inset:0; z-index:-2; display:grid; grid-template-columns:1fr 1fr}
/* both are tall full-body shots, so anchor near the TOP: a centred crop eats the head */
.bed img{width:100%; height:100%; object-fit:cover; object-position:50% 4%; filter:grayscale(1) contrast(1.15) brightness(.62)}
.bed img.a{object-position:56% 4%}
.bed img.b{object-position:44% 2%}
/* Per-photo vertical anchor. In a wide short bed the image is scaled to WIDTH, so X does nothing
   and Y alone chooses which band of a tall shot survives. 6% is the top of the head: on kai-06
   that showed hair and cropped the face off entirely. [E 2026-08-18, Dan reported] */
.bed.one img.focus-face{object-position:50% 50%}
/* ONE PICTURE, FULL WIDTH. Every page except the home page carries a single photograph, and the
   two column bed left the other half empty and maroon. This is the same shape the 760px block
   below already uses, so it is the system's own answer rather than a new one. [E 2026-08-17] */
.bed.one{grid-template-columns:1fr}
.bed.one img{object-position:62% 6%}
.tint{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.3) 26%, rgba(8,8,10,.62) 72%, rgba(8,8,10,.72) 100%),
    linear-gradient(96deg, rgba(199,14,83,.5) 0%, rgba(224,17,95,.22) 38%, rgba(8,8,10,.5) 72%),
    radial-gradient(58% 46% at 22% 46%, rgba(8,8,10,.9) 0%, rgba(8,8,10,.45) 55%, transparent 82%);
}
.grain{
  position:absolute; inset:0; z-index:-1; opacity:.32; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.22) .5px, transparent .5px);
  background-size:3px 3px;
}

/* header */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem clamp(1.1rem,5vw,3.5rem);
}
.mark{display:flex; align-items:baseline; gap:.1rem; font-weight:800; font-size:1.3rem; letter-spacing:-.035em;
  /* The mark is an <a> on every page except index.html, where it is a div. Without these two it
     takes the browser default underline and visited colour, which is the purple line under KinkAI
     that appeared the moment the nav unwrap made it a direct child of .top. [E 2026-08-18] */
  text-decoration:none; color:inherit}
.mark .k{color:var(--text)}
.mark .ai{color:var(--ruby)}
.top nav{display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); font-size:.875rem; font-weight:500; color:var(--muted)}
.top nav a{color:inherit; text-decoration:none}
.top nav a:hover{color:var(--text)}
/* [E 2026-08-18, Dan: "nav broken on mobile"] The links had no wrap control, so a two word link
   broke mid phrase and the row overflowed the screen. Two parts: never break a link across lines,
   and below 560px tighten the type and gaps enough that all four still fit. Deliberately NOT using
   .hide-sm here: hiding How it works and Pricing makes them unreachable on a phone, which is a
   worse page than a tight one. Desktop is untouched, both rules are inside the narrow query or
   are wrap-only. */
.top nav a, .kai-topnav a{white-space:nowrap}
@media (max-width:560px){
  /* the nav gets its OWN ROW. Squeezing four links beside the mark made .top wider than the
     screen, and because .top is in the flow that widened the whole document and clipped the body
     copy on the right. A second row costs one line of height and keeps every link reachable. */
  .top{flex-wrap:wrap; padding-inline:1rem; gap:.35rem .5rem}
  .mark{font-size:1.15rem}
  .top nav, .kai-topnav{flex-basis:100%; width:100%; justify-content:space-between;
    gap:.35rem; font-size:.8rem; min-width:0; flex-wrap:wrap}
  /* A flex item defaults to min-width:auto, so it will not shrink below its own min-content and
     instead widens the document. That is what clipped the hero copy off the right edge on EVERY
     page, not just this one. Releasing the floor and letting long words break fixes the cause. */
  .hero-body, .hero-inner, .top{min-width:0}
  h1, h2, .lede, .catch, .body{overflow-wrap:break-word}
  .btns{flex-wrap:wrap}
}

/* hero copy */
.hero-body{
  flex:1; display:flex; align-items:center;
  padding:clamp(2rem,6vw,4rem) clamp(1.1rem,5vw,3.5rem) clamp(3.5rem,8vw,6rem);
}
.hero-inner{max-width:40rem}
.kicker{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.5rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text);
  padding:.42rem .85rem; border-radius:999px;
  background:rgba(224,17,95,.16); border:1px solid rgba(224,17,95,.45);
}
.kicker .pulse{width:6px; height:6px; border-radius:50%; background:var(--ruby); box-shadow:0 0 0 4px var(--ruby-glow)}
h1{
  font-weight:800; letter-spacing:-.042em; line-height:.94;
  font-size:clamp(3.1rem,1.6rem + 7.2vw,6.2rem);
}
h1 em{font-style:normal; color:var(--ruby); display:block}
.catch{
  margin-top:1.5rem; font-weight:600; letter-spacing:-.015em; color:var(--text);
  font-size:clamp(1.2rem,1rem + .85vw,1.7rem); line-height:1.3; max-width:26rem;
}
.lede{margin-top:1.1rem; color:var(--text); max-width:31rem; font-size:clamp(1rem,.95rem + .3vw,1.14rem); line-height:1.6}
.lede b{color:var(--text); font-weight:600}

.cta{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
.btn{
  font:inherit; font-weight:600; font-size:1rem; cursor:pointer; text-decoration:none;
  display:inline-block; padding:.95rem 1.8rem; border-radius:999px; border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:focus-visible{outline:2px solid var(--ruby-soft); outline-offset:3px}
.btn.primary{background:var(--ruby); color:#fff; box-shadow:0 14px 40px -14px var(--ruby)}
.btn.primary:hover{background:var(--ruby-deep)}
.btn.ghost{background:rgba(8,8,10,.35); color:var(--text); border-color:var(--line-strong); backdrop-filter:blur(8px)}
.btn.ghost:hover{border-color:var(--text)}
.reassure{margin-top:1.25rem; color:var(--muted); font-size:.8125rem}

/* ================= HOW ================= */
.how{padding:clamp(3.5rem,8vw,6rem) clamp(1.1rem,5vw,3.5rem) clamp(1.75rem,3.5vw,2.75rem); background:var(--ground)}
.how-in{max-width:64rem; margin:0 auto}
.how h2{
  font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin-bottom:clamp(1.8rem,4vw,2.6rem);
}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem)}
.step{display:flex; flex-direction:column; gap:.5rem; padding-top:1.15rem; border-top:2px solid var(--ruby)}
.step:nth-child(2){border-top-color:rgba(224,17,95,.55)}
.step:nth-child(3){border-top-color:rgba(224,17,95,.3)}
.step .n{font-weight:800; font-size:.75rem; letter-spacing:.16em; color:var(--ruby); font-variant-numeric:tabular-nums}
.step h3{margin:0; font-size:clamp(1.1rem,1rem + .4vw,1.3rem); font-weight:700; letter-spacing:-.02em}
.step p{color:var(--muted); font-size:.9375rem; line-height:1.5}

.tail{
  max-width:64rem; margin:clamp(3rem,7vw,4.5rem) auto 0; padding-top:1.6rem;
  border-top:1px solid var(--line); color:var(--faint); font-size:.8125rem; line-height:1.65;
}
.tail b{color:var(--muted); font-weight:600}

@media (max-width:760px){
  .bed{grid-template-columns:1fr}
  /* ONLY the two photograph bed. On .bed.one the single picture IS img.b, so an unscoped rule
     here serves a blank hero to every phone on eight pages. [E 2026-08-17] */
  .bed:not(.one) img.b{display:none}
  .tint{background:
    linear-gradient(180deg, rgba(8,8,10,.6) 0%, rgba(8,8,10,.35) 22%, rgba(8,8,10,.62) 74%, rgba(8,8,10,.72) 100%),
    linear-gradient(150deg, rgba(199,14,83,.42) 0%, rgba(8,8,10,.55) 70%);}
  .steps{grid-template-columns:1fr; gap:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- shared site footer + repeated CTA [F 2026-08-15, Dan: finish the journey] ---------- */
.kai-foot{border-top:1px solid var(--line);background:var(--ground);
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.1rem,5vw,3.5rem)}
.kai-foot-in{max-width:72rem;margin:0 auto;display:flex;flex-direction:column;gap:1.15rem}
.kai-foot .mark{font-weight:800;font-size:1.15rem;letter-spacing:-.035em;text-decoration:none;
  display:inline-flex;align-items:baseline;gap:.1rem}
.kai-foot .mark .k{color:var(--text)} .kai-foot .mark .ai{color:var(--ruby)}
.kai-foot-nav{display:flex;flex-wrap:wrap;gap:.75rem clamp(1rem,2.5vw,2rem);
  font-size:.875rem;font-weight:500;color:var(--muted)}
.kai-foot-nav a{color:inherit;text-decoration:none}
.kai-foot-nav a:hover{color:var(--text)}
.kai-foot-note{margin:0;color:var(--faint);font-size:.85rem;max-width:46rem}
.kai-foot-legal{margin:0;color:var(--faint);font-size:.78rem}
.kai-cta{display:inline-block;font:inherit;font-weight:600;font-size:1rem;text-decoration:none;
  padding:.95rem 1.8rem;border-radius:999px;border:1px solid transparent;background:var(--ruby);
  color:#fff;box-shadow:0 14px 40px -14px var(--ruby);
  transition:background .16s ease,color .16s ease}
.kai-cta:hover{background:var(--ruby-deep)}
.kai-cta:focus-visible{outline:2px solid var(--ruby-soft);outline-offset:3px}
.kai-end{border-top:1px solid var(--line);background:var(--surface);
  padding:clamp(2.6rem,6vw,4.2rem) clamp(1.1rem,5vw,3.5rem);text-align:center}
.kai-end-in{max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:.9rem;align-items:center}
.kai-end h2{margin:0;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);letter-spacing:-.02em;line-height:1.15}
.kai-end p{margin:0;color:var(--muted)}
.kai-end .fine{color:var(--faint);font-size:.85rem}
.kai-topnav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.75rem);
  font-size:.875rem;font-weight:500;color:var(--muted)}
.kai-topnav a{color:inherit;text-decoration:none}
.kai-topnav a:hover{color:var(--text)}
.kai-right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.75rem)}

/* ---------- footer cloned from kinkcoach.me [F 2026-08-15, Dan: clone it and move it across] ----------
   Rules lifted from kinkcoach.me/css/site.css. --border and --primary are KinkCoach tokens and do
   not exist here, so they are mapped to this site's own with literal fallbacks. */
.kc-footer{background:#000;border-top:1px solid var(--line,#1a1a1a);padding:50px 20px 30px;margin-top:0}
.kc-footer-inner{max-width:1100px;margin:0 auto}
.kc-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.kc-footer-brand h4{font-size:18px;font-weight:800;color:#fff;margin:0 0 10px;letter-spacing:.5px}
.kc-footer-brand h4 .accent{color:var(--ruby,#E0115F)}
.kc-footer-brand p{font-size:13px;color:#888;line-height:1.6;max-width:320px;margin:0}
.kc-footer-col h5{font-size:12px;font-weight:700;color:#fff;margin:0 0 14px;text-transform:uppercase;letter-spacing:1.5px}
.kc-footer-col ul{list-style:none;padding:0;margin:0}
.kc-footer-col li{margin-bottom:8px}
.kc-footer-col a{color:#888;font-size:13px;text-decoration:none;transition:color .2s}
.kc-footer-col a:hover{color:var(--ruby,#E0115F)}
.kc-footer-bottom{border-top:1px solid var(--line,#1a1a1a);padding-top:24px;text-align:center;font-size:12px;color:#777}
.kc-footer-bottom a{color:var(--ruby,#E0115F);text-decoration:none}
@media (max-width:760px){.kc-footer-grid{grid-template-columns:1fr 1fr;gap:28px}.kc-footer-brand{grid-column:1 / -1}}
@media (max-width:480px){.kc-footer-grid{grid-template-columns:1fr}}

/* [F 2026-08-15, Dan: remove the bottom section, move the text up into the picture that is
   already there] the footer is now the hero's last flex child, so it sits on the photograph.
   .bed is z-index:-2, so ordinary flow content renders over it with no absolute positioning. */
.hero .kc-footer{position:relative;z-index:1;background:transparent;margin:0;
  border-top:1px solid rgba(255,255,255,.16);padding:30px clamp(1.1rem,5vw,3.5rem) 22px}
.hero .kc-footer-inner{max-width:none}
.hero .kc-footer-grid{margin-bottom:20px;gap:28px}
.hero .kc-footer-brand p{color:#c9cbd2}
.hero .kc-footer-col a{color:#c2c4cc}
.hero .kc-footer-col a:hover{color:#fff}
.hero .kc-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;color:#aeb0b8}

/* ================= CLOSING CALL TO ACTION =================
   Lifted VERBATIM from how-it-works.html, which was the only place it existed. A rule that
   lives on one page cannot be a template. [E 2026-08-17] */
.end{padding:clamp(3rem,7vw,4.5rem) 0 clamp(1.75rem,3.5vw,2.75rem); border-top:1px solid var(--line); text-align:center}
.end h2{font-weight:800; letter-spacing:-.035em; font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); line-height:1.02}
.end h2 em{font-style:normal; color:var(--ruby)}
.end p{color:var(--text); margin-top:.9rem}
.end .btn{margin-top:1.6rem}

/* ============================================================================
   HOUSE CONTENT COMPONENTS. Promoted out of how-it-works.html by E 2026-08-17
   on Dan's instruction: "i asked over and over to use home page and how it
   works as the source of truth".

   WHY THIS BLOCK EXISTS. These rules were only ever inside how-it-works.html's
   private <style>, so no other page could use them. Every page built after it
   invented its own layout system instead, and six policy pages ended up
   carrying an identical 5.5KB copy-paste of a rival one (.lg-container,
   .lg-box, .pk-tbl). That is why the pages kept drifting: the source of truth
   was not reachable from anything else.

   SAME REASONING AS .end, WHICH WAS MOVED HERE ON 2026-08-17 FOR THE SAME
   REASON: if a component lives in two places, the two places disagree.

   DO NOT COPY ANY RULE FROM HERE BACK INTO A PAGE. Add it here and use it.
   Page-specific overrides stay in that page and must be scoped to it, e.g.
   how-it-works keeps its `.hero .stages` treatment and its two-column
   `.hero-body`, because index deliberately has neither.
   ============================================================================ */

h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}

/* the layout backbone: every content section sits in one of these */
.shell{max-width:60rem; margin:0 auto; padding-inline:clamp(1.1rem,5vw,3.5rem)}
/* [F 2026-08-15, Dan: logo and nav like the home page, not central] releases ONLY
   the top-bar wrapper to full width. .shell stays 60rem, because that is the design. */
.shell-top{max-width:none; margin-inline:0; padding-inline:clamp(1.1rem,5vw,3.5rem)}

main{position:relative; z-index:1; background:var(--ground)}
.top nav a.on{color:var(--text)}
.sub{margin-top:1.1rem; color:var(--text); max-width:32rem; font-size:clamp(1rem,.95rem + .3vw,1.14rem)}

/* a content section: heading, optional intro, then the component */
.sect{padding-block:clamp(2.6rem,6vw,4rem); border-top:1px solid var(--line)}
.sect:first-of-type{border-top:0}
.sect h2, .range h2, .levels h2, .trust h2{
  font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem); font-weight:700; letter-spacing:-.025em}
.sect .intro, .levels .intro{color:var(--text); margin-top:.7rem; max-width:38rem; line-height:1.62}
.sect p + p{margin-top:.9rem}
.sect .body{color:var(--text); line-height:1.62; max-width:38rem}
.sect a{color:var(--ruby)}

/* ================= NUMBERED STAGES ================= */
.stages{padding:clamp(3.2rem,7vw,5rem) 0 clamp(1rem,2vw,1.5rem)}
.stage{display:grid; grid-template-columns:5.5rem 1fr; gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.8rem,4vw,2.6rem) 0; border-top:1px solid var(--line)}
.stage:first-of-type{border-top:0; padding-top:0}
.big{font-weight:800; font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem); line-height:.9;
  color:transparent; -webkit-text-stroke:1.5px var(--ruby); font-variant-numeric:tabular-nums; letter-spacing:-.04em}
.stage h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem); font-weight:700; letter-spacing:-.025em}
.stage .body{color:var(--text); margin-top:.7rem; max-width:38rem; line-height:1.62}
.stage .body + .body{margin-top:.7rem}
.stage b{color:var(--text); font-weight:600}

.facts{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.fact{font-size:.8125rem; font-weight:500; color:var(--text);
  padding:.4rem .75rem; border-radius:999px; border:1px solid rgba(224,17,95,.28);
  background:linear-gradient(158deg, rgba(199,14,83,.20) 0%, rgba(20,20,22,.55) 62%);
  -webkit-backdrop-filter:blur(8px) saturate(1.08); backdrop-filter:blur(8px) saturate(1.08)}

/* ================= PHOTO STRIP ================= */
.range{padding:clamp(2.6rem,6vw,4rem) 0; border-top:1px solid var(--line)}
.strip{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.5rem,1.4vw,.9rem); margin-top:1.7rem; align-items:stretch}
.strip figure{margin:0; border-radius:10px; overflow:hidden; border:1px solid var(--line-strong); background:var(--surface)}
.strip img{width:100%; height:100%; aspect-ratio:2/3; object-fit:cover; object-position:50% 30%; display:block}

/* ================= CARDS ================= */
.levels{padding:clamp(2.6rem,6vw,4rem) 0; border-top:1px solid var(--line)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.3rem); margin-top:1.9rem}
.grid.two{grid-template-columns:repeat(2,1fr)}
/* [Dan 2026-08-19: "these in black boxes dont overaly work"] var(--surface) is a flat opaque
   #141414, which reads as a black box wherever the section behind it is a gradient or a
   photograph. Same glass treatment as the nav panel, so the card sits ON the page rather than
   punching a hole in it. Kept the same border, radius and padding so nothing reflows. */
.card{background:linear-gradient(158deg, rgba(199,14,83,.10) 0%, rgba(20,20,22,.58) 62%);
  border:1px solid var(--line-strong); border-radius:14px; padding:1.3rem;
  backdrop-filter:blur(10px) saturate(1.05)}
.card .h{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.card h3{font-size:1.05rem; font-weight:700; letter-spacing:-.015em}
.card p{color:var(--text); font-size:.9rem; margin-top:.6rem; line-height:1.5}
.card .amt{font-size:.9rem; color:var(--muted); font-weight:600}
.card .price{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.2rem); font-weight:800; letter-spacing:-.03em; margin:.25rem 0 .1rem}
.card .per{font-size:.8125rem; color:var(--muted)}
.card.pop{border-color:var(--ruby)}

.pill{font-size:.625rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:999px; white-space:nowrap}
.pill::before{content:"\2713"; margin-right:.34rem; color:var(--ruby); font-weight:800}
.pill.open,.pill.locked{color:var(--text); background:rgba(224,17,95,.10); border:1px solid rgba(224,17,95,.38)}

/* ================= TICK RULES ================= */
.trust{padding:clamp(2.6rem,6vw,4rem) 0; border-top:1px solid var(--line)}
.rules{margin-top:1.6rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 2.4rem}
.rule{display:flex; gap:.85rem; align-items:flex-start}
.rule .tick{flex:0 0 auto; width:1.15rem; height:1.15rem; margin-top:.2rem; border-radius:50%;
  background:rgba(224,17,95,.16); border:1px solid var(--ruby); position:relative}
.rule .tick::after{content:""; position:absolute; left:.32rem; top:.15rem; width:.28rem; height:.55rem;
  border:solid var(--ruby); border-width:0 2px 2px 0; transform:rotate(42deg)}
.rule p{color:var(--muted); font-size:.9375rem; line-height:1.55}
.rule b{color:var(--text); font-weight:600}

/* ================= TABLE =================
   New here rather than per page. The old pages each carried their own .pk-tbl. */
.tbl-scroll{overflow-x:auto; margin-top:1.6rem}
.tbl{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:22rem}
.tbl th{text-align:left; font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:0 0 .7rem; border-bottom:1px solid var(--line-strong)}
.tbl td{padding:.85rem 0; border-bottom:1px solid var(--line); color:var(--text)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.k{text-align:right; color:var(--text); font-weight:600; white-space:nowrap}
.tbl .free{color:var(--ruby); font-weight:700}

/* ================= PROSE, for the policy pages ================= */
.prose{color:var(--text); line-height:1.68; margin-top:1.2rem; max-width:44rem}
.prose h3{color:var(--text); font-size:1.02rem; font-weight:700; margin-top:1.9rem}
.prose p{margin-top:.85rem}
.prose ul{margin:.85rem 0 0; padding-left:1.1rem; list-style:none}
.prose li{position:relative; margin-top:.5rem; padding-left:.9rem}
.prose li::before{content:""; position:absolute; left:0; top:.62em; width:.3rem; height:.3rem;
  border-radius:50%; background:var(--ruby)}
.prose strong,.prose b{color:var(--text); font-weight:600}
.prose a{color:var(--ruby)}

/* a bordered aside, replacing the old per page .lg-box */
.note-box{background:linear-gradient(158deg, rgba(199,14,83,.10) 0%, rgba(20,20,22,.58) 62%);
  -webkit-backdrop-filter:blur(10px) saturate(1.05); backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid var(--line-strong); border-left:3px solid var(--ruby);
  border-radius:12px; padding:1.15rem 1.25rem; margin-top:1.3rem}
.note-box p{color:var(--text); line-height:1.6}
.note-box p + p{margin-top:.75rem}

@media (max-width:760px){
  .stage{grid-template-columns:1fr; gap:.6rem}
  .big{font-size:2.2rem}
  .grid,.grid.two{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,1fr)}
}

/* footer responsive, promoted 2026-08-17: it was duplicated verbatim in all 11 pages */
@media (max-width:760px){
  .kc-footer-grid{grid-template-columns:1fr 1fr; gap:28px}
  .kc-footer-brand{grid-column:1 / -1}
  .steps{grid-template-columns:1fr; gap:1.6rem}
}
@media (max-width:480px){
  .kc-footer-grid{grid-template-columns:1fr}
}

/* PHOTO-FORWARD MODIFIERS. Opt-in per page. The stock treatment is deliberately heavy so hero
   text stays legible over a full-bleed shot; on a page whose content sits in its own card the
   picture can carry far more of the frame. [E 2026-08-18, Dan: the picture needs to be more visible] */
.bed.bright img{filter:grayscale(1) contrast(1.08) brightness(.95)}
.tint.soft{
  background:
    linear-gradient(180deg, rgba(8,8,10,.34) 0%, rgba(8,8,10,.12) 26%, rgba(8,8,10,.34) 72%, rgba(8,8,10,.46) 100%),
    linear-gradient(96deg, rgba(199,14,83,.26) 0%, rgba(224,17,95,.10) 38%, rgba(8,8,10,.24) 72%),
    radial-gradient(58% 46% at 22% 46%, rgba(8,8,10,.55) 0%, rgba(8,8,10,.22) 55%, transparent 82%);
}

/* ---------- MOBILE NAV: HAMBURGER + DROP DOWN [E 2026-08-19, Dan: "surely on mobile its
   better to have the hamburger, then a drop down"] ----------
   CSS ONLY, no JS, because these are flat static pages and a nav that depends on a script is a
   nav that can fail silently. The checkbox is the toggle and the label is the button.
   WHY IT REPLACES THE FLAT ROW: four short links only just fitted 390px. One longer label or a
   fifth item and the row overflows again, which is the fault this is fixing. */
.nav-toggle{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.burger{display:none; cursor:pointer; width:2.75rem; height:2.75rem; margin:-.5rem -.4rem -.5rem 0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px; border-radius:.6rem}
.burger span{display:block; width:22px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .18s ease, opacity .18s ease}
.burger:hover{background:rgba(255,255,255,.06)}
@media (max-width:560px){
  .burger{display:flex}
  /* the panel: hidden until the toggle is checked, then a stacked drop down under the bar */
  .top nav{display:none}
  .nav-toggle:checked ~ nav{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    flex-basis:100%; width:100%; margin-top:.75rem;
    /* [Dan 2026-08-19: "the burger menus opens in black which does not look great"] It was 92%
       opaque, which is a slab rather than a panel. GLASS, lifted from the ghost button's own
       rgba(8,8,10,.35)+blur that this site already uses, plus the hero's ruby wash so it reads
       as KinkAI and not a neutral grey box. The photograph stays visible through it. */
    background:linear-gradient(158deg, rgba(199,14,83,.26) 0%, rgba(8,8,10,.52) 62%);
    border:1px solid rgba(224,17,95,.30); border-radius:1rem;
    padding:.4rem .3rem; backdrop-filter:blur(18px) saturate(1.15);
    box-shadow:0 20px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
  .nav-toggle:checked ~ nav a{
    display:block; width:100%; padding:.8rem .9rem; font-size:.95rem; color:var(--text); border-radius:.6rem}
  .nav-toggle:checked ~ nav a:hover{background:rgba(224,17,95,.16); color:var(--text)}
  /* the button becomes a cross while the panel is open, so it is obvious how to shut it */
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* create.html and sign-up.html keep their nav inside .kai-right next to the avatar, so the
   panel is anchored to .top rather than made a flex row. [E 2026-08-19, Dan: burger on every page] */
.top{position:relative}
@media (max-width:560px){
  .kai-right nav.kai-topnav{display:none}
  .nav-toggle:checked ~ .kai-right nav.kai-topnav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:1rem; right:1rem; z-index:40;
    background:linear-gradient(158deg, rgba(199,14,83,.26) 0%, rgba(8,8,10,.52) 62%);
    border:1px solid rgba(224,17,95,.30); border-radius:1rem;
    padding:.4rem .3rem; backdrop-filter:blur(18px) saturate(1.15);
    box-shadow:0 20px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
  .nav-toggle:checked ~ .kai-right nav.kai-topnav a{
    display:block; width:100%; padding:.8rem .9rem; font-size:.95rem; color:var(--text); border-radius:.6rem}
  .nav-toggle:checked ~ .kai-right nav.kai-topnav a:hover{background:rgba(224,17,95,.16)}
}

/* [Dan 2026-08-19: section text "sits right tight against the side of the mobile screen"] PHONE EDGE
   PADDING. .shell resolves to about 20px each side at 390, which is too tight against a heading.
   1.5rem gives 24px and matches the inset the cards already have, so headings and cards line up. */
@media (max-width:560px){ .shell{padding-inline:1.5rem} }
/* [E 19 Aug] The cost column was OFF SCREEN on a phone, not hidden: min-width:22rem forced the
   table wider than the panel that holds it. The labels wrap perfectly well, so the floor goes. */
@media (max-width:560px){ .tbl{min-width:0} .tbl td{padding-block:.7rem} }

/* ================= SIGN UP / SIGN IN FORM =================
   [E 2026-08-19] Moved here from sign-up.html's own style block. It lived on ONE page while
   TWO pages used the class names, so signin.php rendered as raw browser inputs on a black band.
   The two --surface backgrounds became the same glass as .card and .note-box on the way, because
   flat black is the thing Dan has rejected three times now. */
.su-wrap{max-width:60rem;margin:0 auto;padding:clamp(2.6rem,6vw,4.5rem) clamp(1.1rem,5vw,3.5rem)}
.su-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ruby);margin-bottom:1rem}
.su-wrap h1{margin:0 0 .7rem;font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem);letter-spacing:-.03em;line-height:1.08}
.su-wrap h1 em{font-style:normal;color:var(--ruby)}
.su-lead{margin:0 0 2.4rem;color:var(--text);max-width:40rem;font-size:1.05rem}
.su-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:2.6rem}
.su-step .n{display:block;color:var(--ruby);font-weight:700;font-size:.8rem;letter-spacing:.1em;margin-bottom:.5rem}
.su-step h3{margin:0 0 .35rem;font-size:1.08rem}
.su-step p{margin:0;color:var(--text);font-size:.94rem}
.su-box{background:linear-gradient(158deg, rgba(199,14,83,.16) 0%, rgba(20,20,22,.55) 62%); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); border:1px solid rgba(224,17,95,.28);
  border-left:3px solid var(--ruby); border-radius:0 14px 14px 0;padding:1.4rem 1.6rem;margin-bottom:2.4rem}
.su-box p{margin:0;color:var(--text)}
.su-box b{color:var(--text)}
.su-go{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-bottom:1rem}
.su-fine{color:var(--muted);font-size:.85rem;margin:0}
.su-form{position:relative;z-index:1;background:linear-gradient(158deg, rgba(199,14,83,.16) 0%, rgba(20,20,22,.55) 62%); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(224,17,95,.28);border-radius:16px;
  padding:clamp(1.2rem,3vw,1.9rem);margin:0 0 1.4rem;box-shadow:0 22px 55px rgba(0,0,0,.42)}
.su-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.su-field label{font-size:.86rem;color:var(--text);letter-spacing:.01em}
.su-field input{background:rgba(8,8,10,.55);border:1px solid var(--line-strong);border-radius:9px;color:var(--text);
  padding:.8rem .9rem;font:inherit;font-size:1rem;width:100%;box-sizing:border-box}
.su-field input::placeholder{color:var(--faint)}
.su-field input:focus{outline:none;border-color:var(--ruby);box-shadow:0 0 0 3px var(--ruby-glow)}
.su-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.su-adult{border:1px solid var(--line-strong);border-radius:11px;padding:1rem;margin:.4rem 0 1.2rem}
.su-adult legend{padding:0 .45rem;font-size:.98rem;color:var(--text);font-weight:600}
.su-hint{margin:.1rem 0 .8rem;color:var(--muted);font-size:.86rem}
.su-opt{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem;border:1px solid var(--line);border-radius:9px;
  margin-bottom:.55rem;cursor:pointer;background:rgba(8,8,10,.45)}
.su-opt:last-child{margin-bottom:0}
.su-opt:hover{border-color:var(--line-strong)}
.su-opt input{margin:.2rem 0 0;accent-color:var(--ruby);flex:none}
.su-opt span{display:flex;flex-direction:column;gap:.2rem}
.su-opt b{color:var(--text);font-size:.97rem}
.su-opt em{font-style:normal;color:var(--muted);font-size:.85rem;line-height:1.45}
.su-opt:has(input:checked){border-color:var(--ruby);background:rgba(224,17,95,.10)}
.su-submit{width:100%;justify-content:center;margin-top:.2rem}
.su-form .su-fine{margin:.75rem 0 0;text-align:center}
.su-form .su-fine a{color:var(--ruby-soft)}
.su-member{position:relative;z-index:1;background:linear-gradient(158deg, rgba(199,14,83,.16) 0%, rgba(20,20,22,.55) 62%); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(224,17,95,.28);border-left:3px solid var(--ruby);
  border-radius:0 14px 14px 0;padding:clamp(1.2rem,3vw,1.7rem);margin:1.6rem 0 0}
@media(max-width:560px){ .su-row{grid-template-columns:1fr} }