/* SuperQueen AI
   Her palette, not one we invented: rose #B76E79 and blush #F7E7E9 are the two
   colours on her own intake, and her crest is rose-gold. Cream ground, warm
   plum text, no neutral grey anywhere. Red belongs to the 911 affordance alone
   and appears nowhere else on the page. */
:root{
  --cream:#FCF8F5;
  --paper:#FFFFFF;
  --blush:#F9EDEF;
  --blush-2:#F2DDE1;
  --rose:#B76E79;
  --rose-deep:#8E4E5A;
  --rose-soft:#D3969E;
  --plum:#33202A;
  --plum-2:#6C525A;
  --plum-3:#9C848B;
  --line:#EBDDDF;
  --emergency:#C4342E;

  --shell:min(1180px,100% - 44px);
  --narrow:min(880px,100% - 44px);
}
*{box-sizing:border-box}
/* figure and blockquote ship with margin:1em 40px. On a two-column phone grid
   that is 80px taken out of a ~165px track, which is why the portraits sat
   small and stranded in whitespace. */
figure,blockquote{margin:0}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--plum);
  font-family:Karla,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--rose-deep)}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif; font-weight:400; margin:0; text-wrap:balance}
h1{font-size:clamp(3rem,7.4vw,5.9rem); line-height:.98; letter-spacing:-.018em}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.04; letter-spacing:-.014em}
h3{font-size:1.45rem; line-height:1.2}
p{margin:0}
.shell{width:var(--shell); margin-inline:auto}
.narrow{width:var(--narrow); margin-inline:auto}
.measure{max-width:58ch}

/* Labels are letterspaced Karla, never a monospace — mono reads as developer
   chrome, and this brand is not that. */
.label{
  font-size:.735rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--rose); display:block;
}
.lede{font-size:1.19rem; line-height:1.55; color:var(--plum-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; font-size:.98rem; text-decoration:none; cursor:pointer;
  padding:15px 27px; border-radius:999px; border:1.5px solid transparent;
  transition:transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2.5px solid var(--rose); outline-offset:3px}
.btn-solid{background:var(--rose); color:#fff; border-color:var(--rose)}
.btn-solid:hover{background:var(--rose-deep); border-color:var(--rose-deep)}
.btn-line{background:transparent; color:var(--plum); border-color:var(--blush-2)}
.btn-line:hover{border-color:var(--rose); color:var(--rose-deep)}
.btn-lg{padding:17px 34px; font-size:1.04rem}

/* ---------- header ---------- */
.bar{position:sticky; top:0; z-index:80; background:rgba(252,248,245,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:26px; padding:14px 0}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--plum); margin-right:auto}
.mark img{width:52px; height:auto}
.mark-t{font-family:"Instrument Serif",serif; font-size:1.34rem; white-space:nowrap}
.nav{display:flex; gap:27px; font-size:.94rem; font-weight:500}
.nav a{text-decoration:none; color:var(--plum-2)}
.nav a:hover{color:var(--rose-deep)}
.cta-short{display:none}

/* ---------- hero ---------- */
.hero{padding:clamp(46px,6.5vw,88px) 0 clamp(52px,7vw,96px); position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; right:-14%; top:-32%; width:64%; height:118%;
  background:radial-gradient(ellipse at center, var(--blush) 0%, transparent 66%);
  pointer-events:none;
}
.hero-in{position:relative; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(34px,5.4vw,74px); align-items:center}
.hero h1{margin-top:24px}
.hero h1 em{font-style:italic; color:var(--rose)}
.hero .lede{margin-top:26px; max-width:42ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-note{margin-top:18px; font-size:.9rem; color:var(--plum-3)}

/* ---------- the conversation ---------- */
.convo{
  background:var(--paper); border:1px solid var(--line); border-radius:26px;
  box-shadow:0 26px 60px -34px rgba(51,32,42,.38);
  overflow:hidden; display:flex; flex-direction:column;
}
.convo-top{display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--line)}
.convo-av{width:40px; height:40px; border-radius:50%; background:var(--blush);
  display:grid; place-items:center; overflow:hidden}
.convo-av img{width:29px}
.convo-who{font-weight:700; font-size:.93rem; line-height:1.2}
.convo-sub{font-size:.75rem; color:var(--plum-3)}
.convo-body{padding:20px; display:flex; flex-direction:column; gap:11px;
  min-height:380px; justify-content:flex-end; background:var(--cream)}
.bub{max-width:84%; padding:12px 16px; border-radius:17px; font-size:.955rem; line-height:1.45;
  animation:pop .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes pop{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.bub-her{align-self:flex-start; background:var(--paper); border:1px solid var(--line);
  border-bottom-left-radius:6px; color:var(--plum)}
.bub-me{align-self:flex-end; background:var(--rose); color:#fff; border-bottom-right-radius:6px}
.bub-911{align-self:flex-start; width:84%; padding:0; border:none; background:none;
  animation:pop .34s cubic-bezier(.2,.7,.3,1) both}
.bub-911 span{display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--emergency); color:#fff; font-weight:700; font-size:.94rem;
  padding:13px; border-radius:12px}
.bub-911 svg{width:16px; height:16px; fill:#fff}
.typing{align-self:flex-start; display:flex; gap:4px; padding:15px 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:17px; border-bottom-left-radius:6px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--plum-3); display:block;
  animation:blink 1.3s infinite both}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28} 30%{opacity:1}}
.convo-foot{padding:13px 20px; border-top:1px solid var(--line); display:flex;
  align-items:center; justify-content:space-between; gap:14px}
.convo-foot p{font-size:.79rem; color:var(--plum-3); line-height:1.4}
.replay[hidden]{display:none}
.replay{background:none; border:none; font:inherit; font-weight:700; font-size:.83rem;
  color:var(--rose-deep); cursor:pointer; padding:5px 2px; white-space:nowrap}
.replay:focus-visible{outline:2px solid var(--rose); outline-offset:2px}

/* ---------- sections ---------- */
.sec{padding:clamp(58px,7.6vw,108px) 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec-tint{background:var(--blush); border-top:none}
.sec-head{margin-bottom:clamp(32px,4.2vw,52px)}
.sec-head h2{margin-top:15px}
.sec-head .lede{margin-top:18px}

/* ---------- the alarm ---------- */
.prod{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
.prod-img{border-radius:20px; overflow:hidden; aspect-ratio:1/1; background:var(--blush-2)}
.prod-img img{width:100%; height:100%; object-fit:cover}
.price{display:flex; align-items:baseline; gap:13px; margin:26px 0 4px}
.price b{font-family:"Instrument Serif",serif; font-size:3.1rem; line-height:1; color:var(--rose); font-weight:400}
.price span{color:var(--plum-3); font-size:.92rem}
.specs{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:0}
.specs li{display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--line);
  color:var(--plum-2); font-size:.98rem; align-items:baseline}
.specs li:first-child{border-top:1px solid var(--line)}
.specs b{color:var(--plum); min-width:9ch; font-weight:700; flex:none}

/* ---------- the women: a contact sheet, not a feed ---------- */
.sheet{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:start}
.pwrap{display:flex; flex-direction:column; margin:0; min-width:0}
.pwrap.drop{margin-top:44px}
.pic{border-radius:16px; overflow:hidden; background:var(--blush-2); aspect-ratio:3/4}
.pic img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.pcap{padding:11px 0 0; font-size:.86rem; font-weight:700; color:var(--plum); line-height:1.25; text-wrap:balance}
.pcap em{display:block; font-style:normal; font-weight:400; font-size:.76rem; color:var(--plum-3); margin-top:3px}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
  gap:18px; margin-top:clamp(44px,5vw,68px)}
.q{display:flex; flex-direction:column; gap:16px; background:var(--paper);
  border:1px solid var(--blush-2); border-radius:20px; padding:30px 28px 26px; position:relative}
.q::before{
  /* The literal glyph, not a C escape — Instrument Serif has no glyph at
     that codepoint and rendered a tofu box. Georgia first, which does. */
  content:"“"; position:absolute; top:6px; left:22px;
  font-family:Georgia,"Times New Roman",serif; font-size:4.6rem; line-height:1;
  color:var(--blush-2); pointer-events:none;
}
.q p{position:relative; font-family:"Instrument Serif",serif; font-size:1.4rem; line-height:1.3;
  color:var(--plum)}
.q cite{font-style:normal; font-size:.78rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rose); margin-top:auto}
.q .stars{display:flex; gap:3px; color:var(--rose)}
.q .stars svg{width:15px; height:15px; fill:currentColor}

/* ---------- safe exit ---------- */
.exit{display:grid; grid-template-columns:1fr .8fr; gap:clamp(30px,5vw,66px); align-items:center}
.phone{
  position:relative; margin-inline:auto; width:min(272px,100%); aspect-ratio:9/18;
  border-radius:38px; border:9px solid #2A1A22; overflow:hidden; display:grid; place-items:center;
  /* A phone at rest, not a black rectangle: her blush, dimmed to a night screen. */
  background:linear-gradient(168deg,#3A2530 0%,#241620 58%,#1B1018 100%);
  box-shadow:0 30px 62px -32px rgba(51,32,42,.55);
}
.phone-idle{padding:34px; text-align:center; color:#C9AEB6; font-size:.9rem; line-height:1.5;
  display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-start; padding-top:19%}
.lock-time{font-family:"Instrument Serif",serif; font-size:3.5rem; line-height:1; color:#F6EAED}
.lock-date{font-size:.83rem; color:#B9989F; margin-top:8px}
.lock-hint{margin-top:auto; margin-bottom:12%; font-size:.84rem; color:#B9989F; line-height:1.55}
.lock-hint strong{color:#F1E4E7}
.scene{position:absolute; inset:0; display:none; flex-direction:column; align-items:center;
  justify-content:center; padding:34px 22px; text-align:center; color:#fff}
.scene.on{display:flex}
.ring-av{width:88px; height:88px; border-radius:50%; background:linear-gradient(150deg,#E0B4A0,#B7807E);
  display:grid; place-items:center; margin-bottom:20px; position:relative}
.ring-av svg{width:42px; height:42px; fill:#fff}
.ring-av.pulsing::after{content:""; position:absolute; inset:-15px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22); animation:pulse 1.9s ease-out infinite}
@keyframes pulse{0%{transform:scale(.94); opacity:.9} 100%{transform:scale(1.26); opacity:0}}
.ring-name{font-family:"Instrument Serif",serif; font-size:2rem; line-height:1.1}
.ring-state{font-size:.85rem; color:#C9AEB6; margin-top:6px}
.ring-btns{display:flex; gap:44px; margin-top:40px}
.rb{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.72rem; color:#C9AEB6}
.rb button{width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center}
.rb button svg{width:22px; height:22px; fill:#fff}
.rb button:focus-visible{outline:2.5px solid #fff; outline-offset:3px}
.rb .decline{background:#C4342E} .rb .accept{background:#3FA76A}
.line{margin-top:24px; min-height:4.2em; font-size:1rem; line-height:1.45; color:#F1E4E7; max-width:23ch}
.line b{display:block; font-size:.71rem; letter-spacing:.16em; text-transform:uppercase;
  color:#C9AEB6; margin-bottom:8px; font-weight:700}

/* ---------- why ---------- */
.figs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3.4vw,46px)}
.fig{padding-top:22px; border-top:2px solid var(--rose-soft)}
.fig b{display:block; font-family:"Instrument Serif",serif; font-size:clamp(3rem,5.6vw,4.4rem);
  line-height:1; color:var(--rose); font-weight:400}
.fig p{margin-top:15px; color:var(--plum-2); font-size:.99rem}
.pull{margin-top:clamp(42px,5vw,68px); padding-left:clamp(20px,3vw,38px); border-left:3px solid var(--rose)}
.pull p{font-family:"Instrument Serif",serif; font-size:clamp(1.5rem,2.7vw,2.15rem);
  line-height:1.28; color:var(--plum)}
.pull cite{display:block; margin-top:18px; font-style:normal; font-size:.84rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--rose)}

/* ---------- press ---------- */
.press{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.press a,.press span{
  display:inline-flex; align-items:center; padding:12px 19px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); text-decoration:none;
  font-size:.9rem; font-weight:500; color:var(--plum-2);
  transition:border-color .2s, color .2s, background .2s;
}
.press a:hover{border-color:var(--rose); color:var(--rose-deep); background:var(--blush)}
.press span{color:var(--plum-3)}

/* ---------- reserve ---------- */
.reserve{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,4.6vw,62px); align-items:center}
.perks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.perks li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--blush-2);
  color:var(--plum-2); font-size:.99rem; align-items:baseline}
.perks li:first-child{border-top:1px solid var(--blush-2)}
.perks svg{width:14px; height:14px; fill:var(--rose); flex:none; position:relative; top:3px}

/* ---------- footer ---------- */
.foot{background:var(--plum); color:#E3D3D8; padding:62px 0 34px; font-size:.94rem}
.foot a{color:#E3D3D8; text-decoration:none}
.foot a:hover{color:var(--rose-soft)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:38px; margin-bottom:44px}
.foot h4{font-size:.735rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--rose-soft); margin:0 0 15px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot .mark{color:#fff; margin-bottom:16px}
.foot .mark img{width:46px}
.foot-base{border-top:1px solid rgba(255,255,255,.13); padding-top:24px; display:flex;
  flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:.84rem; color:#B79FA6}
.foot-base a{text-decoration:underline; text-underline-offset:3px}

/* ---------- reveal ---------- */
.js .rv{opacity:0; transform:translateY(13px); transition:opacity .62s ease, transform .62s ease}
.rv.in{opacity:1; transform:none}

/* On a phone both demos must read as a DEVICE inside the page, not as a
   section that swallows the screen. Cap them and let the chat scroll inside
   its own frame — that containment is what tells someone it is an interface. */
@media (max-width:940px){
  .convo-body{min-height:340px; max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .convo{max-width:440px; margin-inline:auto}
  .phone{width:min(232px,72%)}
  .exit > div:last-child{display:flex; justify-content:center}
}
@media (max-width:940px){
  .hero-in,.prod,.exit,.reserve{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr; gap:28px}
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pwrap.drop{margin-top:0}
  .nav{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .bar-in{gap:12px; padding:11px 0}
  .mark img{width:44px}
  .mark-t{font-size:1.06rem}
  .bar .btn{padding:11px 17px; font-size:.88rem; white-space:nowrap; flex:0 0 auto}
  .cta-long{display:none} .cta-short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after,*::before{animation:none !important; transition:none !important}
  .rv,.js .rv{opacity:1; transform:none}
}

/* ================= interior pages ================= */
.phead{padding:clamp(44px,6vw,84px) 0 clamp(40px,5vw,72px)}
.phead h1{font-size:clamp(2.6rem,6vw,4.6rem); margin-top:18px}
.phead .prod{align-items:center}
.phead + .sec{border-top:1px solid var(--line)}
[aria-current="page"]{color:var(--rose-deep); font-weight:700}

.two-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4.4vw,62px); align-items:start}
.aside h3{font-family:"Instrument Serif",serif; font-size:1.35rem; margin-bottom:9px}
.aside p{color:var(--plum-2); font-size:1rem}
.aside + .aside{margin-top:0}

/* the other SKUs */
.skus{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); gap:18px}
.sku{background:var(--paper); border:1px solid var(--blush-2); border-radius:20px;
  padding:28px; display:flex; flex-direction:column; gap:12px}
.sku h3{font-family:"Instrument Serif",serif}
.sku p{color:var(--plum-2); font-size:.97rem; flex:1}
.sku-foot{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:8px; padding-top:16px; border-top:1px solid var(--blush-2)}
.sku-price{font-family:"Instrument Serif",serif; font-size:1.9rem; color:var(--rose)}
.sku-soon{font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--plum-3)}

/* what she does */
.doesgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:900px){.doesgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.doesgrid{grid-template-columns:1fr}}
.does{background:var(--paper); border:1px solid var(--blush-2); border-radius:18px; padding:26px}
.does h3{font-family:"Instrument Serif",serif; font-size:1.3rem; margin-bottom:8px}
.does p{color:var(--plum-2); font-size:.97rem}

/* legal — the engine's own copy, in our shell */
.legal h1{font-size:clamp(2.2rem,4.4vw,3.2rem); margin-bottom:8px}
.legal h2{font-size:1.5rem; margin:38px 0 10px}
.legal h3{font-size:1.15rem; margin:26px 0 8px; font-family:Karla,sans-serif; font-weight:700}
.legal p,.legal li{color:var(--plum-2); font-size:1.02rem}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:8px}
.legal a{text-decoration:underline; text-underline-offset:3px}
.legal table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:.95rem}
.legal th,.legal td{text-align:left; padding:11px 12px 11px 0; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--plum-2)}
.legal th{color:var(--plum); font-weight:700}

@media (max-width:940px){
  .two-col{grid-template-columns:1fr; gap:30px}
}

/* ================= contact ================= */
.contact{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,4.6vw,64px); align-items:start}
.lead{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  background:var(--paper); border:1px solid var(--blush-2); border-radius:22px; padding:clamp(24px,3vw,34px)}
.fld{display:flex; flex-direction:column; gap:7px; min-width:0}
.fld-wide{grid-column:1 / -1}
.lead label{font-size:.83rem; font-weight:700; letter-spacing:.02em; color:var(--plum)}
.lead .opt{font-weight:400; color:var(--plum-3); letter-spacing:0}
.lead input,.lead select,.lead textarea{
  font:inherit; font-size:1rem; color:var(--plum); background:var(--cream);
  border:1.5px solid var(--blush-2); border-radius:11px; padding:13px 14px; width:100%;
  transition:border-color .18s ease, background .18s ease;
}
.lead textarea{resize:vertical; min-height:112px}
.lead select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239C848B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px; padding-right:40px}
.lead input:focus,.lead select:focus,.lead textarea:focus{
  outline:none; border-color:var(--rose); background:var(--paper)}
.lead input:focus-visible,.lead select:focus-visible,.lead textarea:focus-visible{
  outline:2.5px solid var(--rose); outline-offset:2px}
.lead button[type=submit]{grid-column:1 / -1; justify-self:start}
.lead button[disabled]{opacity:.6; cursor:progress}

@media (max-width:940px){
  .contact{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lead{grid-template-columns:1fr}
}