/* My Femboy Roommate · Purchase recovery
   One stylesheet for all three layouts: landing (.home), result/message (.result) and privacy (.privacy).
   No scripts, no inline styles. Fonts and logo are same-origin files in assets/.
   Needs CSP: font-src 'self'; img-src 'self'. Without them: system rounded fonts and the logo's alt text. */

@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(assets/fredoka-600.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(assets/fredoka-700.woff2) format("woff2")}

:root{
  --blue:#0091FA; --mag:#DF03FF; --coral:#E0654A;
  --itch:#FA5C5C; --itch-btn:#E54848; --itch-hover:#C93535;
  --patreon:#F96854; --patreon-btn:#E4573F; --patreon-hover:#C84A2E;
  --panel:#EFC3B8; --card:#FFF7F4; --note:#F8E1DA;
  --ink:#2A1C22; --ink-blue:#0A4F99; --brown:#5A2E29; --cream:#FFF2F6;
  --page:#F8E9E5; --page-dot:rgba(224,101,74,.16); --focus:#7A00A0;
  --display:"Fredoka",ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --dots:radial-gradient(rgba(255,255,255,.2) 1.4px,transparent 1.7px) 0 0/9px 9px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--page:#21171C;--page-dot:rgba(223,3,255,.1);color-scheme:dark}
}

*{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;padding:1.75rem 1rem 2.5rem;font:400 1.0625rem/1.6 var(--body);color:var(--ink);background:var(--page)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(var(--page-dot) 2.4px,transparent 2.7px) 0 0/20px 20px;-webkit-mask:linear-gradient(150deg,transparent 35%,#000 95%);mask:linear-gradient(150deg,transparent 35%,#000 95%)}
main{width:100%;max-width:35rem}
.home main{max-width:58rem}
.privacy main{max-width:44rem}
a{color:var(--ink-blue);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:999px}
.ico{flex:none;width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Brand header */
.brand{display:block;border-radius:1.5rem;text-decoration:none}
.logo{display:block;width:min(18rem,74vw);height:auto;font:700 1.75rem/1.15 var(--display);color:var(--mag);text-align:center}
.home .logo{width:min(23rem,84vw)}

/* Title plate (coral ribbon) + panel */
.plate{position:relative;z-index:2;width:fit-content;max-width:calc(100% - 1.5rem);margin:0 auto -2.25rem;padding:1.05rem 2.4rem 1.2rem;border-radius:2.5rem;background:var(--dots),var(--coral);color:var(--cream);font:700 clamp(1.5rem,1.1rem + 1.6vw,2.3rem)/1.12 var(--display);text-align:center;text-wrap:balance;overflow-wrap:break-word;text-shadow:0 2px 0 rgba(140,50,30,.28)}
.plate::after{content:"";position:absolute;inset:7px;border:3px dashed rgba(255,255,255,.95);border-radius:calc(2.5rem - 7px);pointer-events:none}
.panel{position:relative;padding:4.5rem 2.75rem 2.5rem;border-radius:3.25rem;background:var(--panel);text-align:center;box-shadow:0 18px 40px -22px rgba(90,46,41,.45)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(rgba(255,255,255,.38) 1.5px,transparent 1.8px) 0 0/12px 12px;-webkit-mask:linear-gradient(120deg,transparent 40%,#000);mask:linear-gradient(120deg,transparent 40%,#000);pointer-events:none}
.panel::after{content:"";position:absolute;inset:12px;border:3px dashed rgba(255,255,255,.95);border-radius:2.5rem;pointer-events:none}
.panel>*{position:relative;z-index:1}
.panel p{margin:1.25rem auto 0;max-width:40ch;text-wrap:pretty}

/* Status badge. Tone sets colour; the icon and heading carry the meaning. */
.is-success{--tone:var(--mag)}
.is-info{--tone:var(--blue)}
.is-warning{--tone:var(--coral)}
.badge{position:relative;width:6.5rem;height:6.5rem;margin:0 auto;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--dots),var(--tone,var(--blue));box-shadow:inset 0 0 0 7px var(--tone,var(--blue)),inset 0 0 0 11px #fff,0 6px 0 rgba(90,46,41,.12)}
.badge .ico{width:3rem;height:3rem}
.badge .fill{fill:currentColor;stroke:none}
.spark{position:absolute;width:1.6rem;height:1.6rem;fill:var(--mag);stroke:none}
.spark.s1{left:-2.1rem;top:.4rem}
.spark.s2{right:-2.2rem;top:-.4rem;width:1.25rem;height:1.25rem;fill:var(--blue)}
.spark.s3{right:-1.5rem;bottom:-.2rem;width:1rem;height:1rem}
.message{font-size:1.125rem}

/* Support reference: selectable in one click, wraps safely */
.ref{position:relative;max-width:24rem;margin:1.5rem auto 0;padding:.95rem 1.25rem 1.05rem;border-radius:1.5rem;background:#fff}
.ref::after{content:"";position:absolute;inset:6px;border:2px dashed #F0B9AC;border-radius:1.1rem;pointer-events:none}
.panel .ref p{margin:0;max-width:none}
.ref-label{font:600 .9375rem/1.4 var(--display);color:var(--brown)}
.panel .ref .ref-code{margin-top:.2rem;font:600 1.1875rem/1.45 var(--mono);letter-spacing:.04em;color:var(--ink-blue);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;cursor:text}

/* Buttons (kit: blue pill, white ring, magenta when active) */
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}
.btn{--c:var(--brand-btn,var(--blue));appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;max-width:100%;min-height:4.125rem;padding:.75rem 2.1rem;border-radius:999px;background:var(--dots),var(--c);color:#fff;font:700 1.25rem/1.15 var(--display);text-align:center;text-decoration:none;text-shadow:0 1px 0 rgba(0,40,90,.3);box-shadow:inset 0 0 0 6px var(--c),inset 0 0 0 10px #fff,0 5px 0 rgba(90,46,41,.14);transition:transform .12s ease-out}
.btn:hover{--c:var(--brand-hover,var(--mag));text-shadow:0 1px 0 rgba(80,0,90,.3)}
.btn:active{transform:translateY(2px) scale(.97)}
.btn:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.btn .ico{width:1.4rem;height:1.4rem;stroke-width:2.6}
.btn--small{min-height:3.4rem;padding:.55rem 1.5rem;font-size:1.1875rem;box-shadow:inset 0 0 0 5px var(--c),inset 0 0 0 8px #fff,0 4px 0 rgba(90,46,41,.14)}
.btn--small .ico{width:1.25rem;height:1.25rem}

/* Shared footer: Recovery home, Get help, Privacy */
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:100%}
.links a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.875rem;padding:.4rem 1.15rem .45rem .9rem;border-radius:999px;background:var(--card);color:var(--brown);font:600 1.0625rem/1.2 var(--display);text-decoration:none;box-shadow:inset 0 0 0 2px #F2CFC6;transition:transform .12s ease-out,background-color .12s}
.links a:hover{background:#fff;color:var(--ink-blue)}
.links a:active{transform:scale(.96)}
.links .ico{width:1.3rem;height:1.3rem;color:var(--blue)}
.links a[aria-current=page]{background:var(--dots),var(--coral);color:var(--cream);box-shadow:none}
.links a[aria-current=page] .ico{color:var(--cream)}
.links a.is-next{background:var(--dots),var(--blue);color:#fff;box-shadow:inset 0 0 0 4px var(--blue),inset 0 0 0 6px #fff}
.links a.is-next .ico{color:#fff}
.links a.is-next:hover{background:var(--dots),var(--mag);box-shadow:inset 0 0 0 4px var(--mag),inset 0 0 0 6px #fff}
@media (prefers-color-scheme:dark){.links a:focus-visible,.brand:focus-visible{outline-color:#F7A8FF}}

/* Landing */
.intro{max-width:32ch;margin:0 auto;font:600 clamp(1.2rem,1rem + .8vw,1.45rem)/1.35 var(--display);color:var(--ink-blue);text-wrap:balance}
.panel .intro{margin-top:0}
.providers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2rem}
.provider{display:flex;flex-direction:column;padding:.75rem .75rem 1.75rem;border-radius:2.25rem;background:var(--card);box-shadow:0 12px 26px -18px rgba(90,46,41,.55)}
.provider h2{margin:1.3rem 1rem 0;font:700 1.45rem/1.2 var(--display);color:var(--ink-blue);text-wrap:balance}
.panel .provider p{margin:.6rem 1rem 0;max-width:none}
.provider .actions{margin-top:auto;padding-top:1.5rem}
.tile{--c:var(--brand,var(--mag));position:relative;display:grid;place-items:center;height:7.25rem;border-radius:1.6rem;color:#fff;background:var(--c);background:linear-gradient(110deg,var(--c) 30%,color-mix(in srgb,var(--c),#fff 22%));box-shadow:inset 0 0 0 6px var(--c),inset 0 0 0 9px #fff}
.tile::before{content:"";position:absolute;inset:9px;border-radius:1.1rem;background:radial-gradient(rgba(255,255,255,.3) 1.6px,transparent 2px) 0 0/10px 10px;-webkit-mask:linear-gradient(110deg,transparent 25%,#000);mask:linear-gradient(110deg,transparent 25%,#000)}
.tile .ico{position:relative;width:3.4rem;height:3.4rem;stroke-width:2.3}
.tile .fill{fill:currentColor;stroke:none}
.tile .mark{width:3.75rem;height:3.75rem}
.is-patreon .tile .mark{width:3.2rem;height:3.2rem}

/* Provider colours: itch.io carnation (official #FA5C5C), Patreon orange (#F96854); buttons a shade deeper so white text stays readable */
.is-itch{--brand:var(--itch);--brand-btn:var(--itch-btn);--brand-hover:var(--itch-hover)}
.is-patreon{--brand:var(--patreon);--brand-btn:var(--patreon-btn);--brand-hover:var(--patreon-hover)}

/* Provider unavailable: faded mark on a stitched tile, wrench badge, setup note, kit-blue help button */
.is-unavailable{--brand-btn:var(--blue);--brand-hover:var(--mag)}
.is-unavailable .tile{background:var(--note);box-shadow:inset 0 0 0 3px rgba(90,46,41,.1)}
.is-unavailable .tile::before{display:none}
.is-unavailable .tile::after{content:"";position:absolute;inset:9px;border:3px dashed rgba(90,46,41,.22);border-radius:1.1rem}
.is-unavailable .tile .mark{color:var(--brand);opacity:.38}
.fix{position:absolute;top:.8rem;right:.8rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;color:#fff;background:var(--dots),var(--coral);box-shadow:inset 0 0 0 3px var(--coral),inset 0 0 0 5px #fff}
.tile .fix .ico{width:1.3rem;height:1.3rem;stroke-width:2.4}
.panel .setup{display:flex;gap:.65rem;align-items:flex-start;margin:1rem .25rem 0;padding:.8rem 1rem;border-radius:1.15rem;background:var(--note);color:var(--brown);font-weight:600;line-height:1.45;text-align:left}
.setup .ico{width:1.4rem;height:1.4rem;margin-top:.05rem;color:var(--coral);stroke-width:2.4}

/* Other ways to buy: Patreon Shop and guest purchases */
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem;text-align:left}
.mini{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;align-content:start;padding:1.35rem 1.35rem 1.5rem;border-radius:1.9rem;background:rgba(255,247,244,.6)}
.mini::after{content:"";position:absolute;inset:6px;border:2px dashed rgba(255,255,255,.95);border-radius:1.5rem;pointer-events:none}
.mini>*{position:relative;z-index:1}
.mini>div{display:contents}
.mini-ico{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;color:#fff;background:var(--dots),var(--brand,var(--blue));box-shadow:inset 0 0 0 4px var(--brand,var(--blue)),inset 0 0 0 6px #fff}
.mini-ico .ico{width:1.6rem;height:1.6rem}
.mini h2{grid-column:2;align-self:center;margin:0;font:700 1.25rem/1.25 var(--display);color:var(--ink-blue);text-wrap:balance}
.panel .mini p{grid-column:1/-1;margin:.8rem 0 1.1rem;max-width:none}
.mini .btn{position:relative;z-index:1;grid-column:1/-1;justify-self:start}

/* Notes with an icon (landing help line) */
.panel .note{display:flex;gap:.75rem;align-items:center;width:fit-content;max-width:100%;margin:1.5rem auto 0;padding:.85rem 1.3rem .85rem 1rem;border-radius:1.4rem;background:rgba(255,255,255,.72);color:var(--brown);font-weight:600;line-height:1.45;text-align:left}
.note .ico{width:1.75rem;height:1.75rem;color:var(--blue);stroke-width:2}

/* Privacy: readable long-form list */
.privacy .panel{text-align:left;padding:4.5rem 3rem 2.75rem}
.legal{display:grid;gap:.85rem;margin:1.75rem 0 0;padding:0;list-style:none}
.legal li{position:relative;padding:.95rem 1.2rem 1rem 3.1rem;border-radius:1.3rem;background:rgba(255,255,255,.62);line-height:1.65;text-wrap:pretty}
.legal li::before{content:"";position:absolute;left:1.25rem;top:1.45rem;width:.7rem;height:.7rem;border-radius:3px;background:var(--blue);box-shadow:0 0 0 3px #fff;transform:rotate(45deg)}

@media (max-width:47.5em){
  .providers,.more{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:32.5em){
  body{gap:1.4rem;padding:1.25rem .75rem 2rem}
  .plate{padding:.95rem 1.6rem 1.05rem}
  .panel,.home .panel,.privacy .panel{padding:4rem 1.35rem 1.9rem;border-radius:2.5rem}
  .panel::after{inset:9px;border-radius:2rem}
  .provider{border-radius:1.9rem}
  .provider h2{margin-inline:.5rem}
  .panel .provider p{margin-inline:.5rem}
  .tile{height:5.75rem}
  .legal li{padding-left:2.7rem}
  .legal li::before{left:1.05rem}
  .btn{padding-inline:1.6rem}
}

@media (max-width:22.5em){
  body{padding-inline:.5rem}
  .panel,.home .panel,.privacy .panel{padding:3.75rem .85rem 1.5rem;border-radius:2rem}
  .panel::after{inset:7px;border-width:2px;border-radius:1.6rem}
  .plate{max-width:calc(100% - .75rem);padding:.85rem 1.1rem .95rem}
  .plate::after{inset:5px;border-width:2px}
  .provider{padding:.5rem .5rem 1.25rem}
  .mini{padding:1rem}
  .mini-ico{display:none}
  .mini h2{grid-column:1/-1}
  .btn{padding-inline:1.1rem;overflow-wrap:anywhere}
  .legal li{padding:.8rem .9rem .85rem 2.3rem}
  .legal li::before{left:.85rem}
  .ref{padding-inline:.9rem}
}

@media (prefers-reduced-motion:no-preference){
  .brand{animation:rise .4s ease-out both}
  .panel{animation:pop .34s cubic-bezier(.2,.8,.3,1) .05s both}
  .plate{animation:drop .44s cubic-bezier(.2,.9,.3,1.35) .14s both}
  .badge{animation:bounce .5s cubic-bezier(.2,.9,.3,1.45) .3s both}
  .panel>*:not(.badge):not(.providers),.links{animation:rise .32s ease-out .42s both}
  .provider{animation:rise .36s ease-out .36s both}
  .provider+.provider{animation-delay:.44s}
  .btn:hover{transform:scale(1.04)}
  .btn:active{transform:translateY(2px) scale(.97)}
  .is-success .badge .ico{animation:beat 1.8s ease-in-out 1s infinite}
  .spark{animation:twinkle 1.9s ease-in-out infinite}
  .spark.s2{animation-delay:.6s}
  .spark.s3{animation-delay:1.2s}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
@keyframes drop{from{opacity:0;transform:translateY(-44px) scale(.85)}}
@keyframes bounce{from{opacity:0;transform:scale(.55)}}
@keyframes beat{0%,46%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}34%{transform:scale(1.07)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1) rotate(25deg)}}

/* Native disclosure: keyboard/touch friendly, no scripts or external services. */
body{padding-top:5.25rem}
.language-picker{position:absolute;top:1rem;right:1rem;z-index:20;font:600 .95rem/1.5 var(--body);color:var(--ink-blue)}
.language-picker summary{display:flex;align-items:center;gap:.55rem;cursor:pointer;padding:.6rem 1rem;border:2px solid #fff;border-radius:999px;background:var(--card);box-shadow:0 3px 9px #0002;list-style:none;min-height:44px}
.language-picker summary::-webkit-details-marker{display:none}
.language-picker summary::after{content:"";width:.45rem;height:.45rem;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);margin-left:.25rem;margin-top:-.2rem}
.language-picker[open] summary::after{transform:rotate(225deg);margin-top:.2rem}
.language-picker summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.language-options{position:absolute;right:0;top:calc(100% + .5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;width:min(23rem,calc(100vw - 2rem));max-height:65vh;max-height:65dvh;overflow-y:auto;padding:.6rem;border:2px solid #fff;border-radius:1.4rem;background:var(--card);box-shadow:0 8px 28px #0004}
.language-options a{display:flex;align-items:center;min-height:44px;padding:.55rem .65rem;border-radius:.8rem;text-decoration:none;overflow-wrap:anywhere}
.language-options a:hover,.language-options a:focus-visible{background:var(--note)}
.language-options a[aria-current]{background:var(--ink-blue);color:#fff}
.ref-code{direction:ltr;unicode-bidi:isolate}
.privacy .panel,.panel .note{text-align:start}
[dir="rtl"] .legal li{padding-right:3.1rem;padding-left:1.2rem}
[dir="rtl"] .legal li::before{left:auto;right:1.25rem}
:lang(ar) .plate,:lang(ar) h2{font-family:var(--body);line-height:1.4}
@media(min-width:64em){body{padding-top:1.75rem}}
@media(max-width:32.5em){[dir="rtl"] .legal li{padding-right:2.7rem}[dir="rtl"] .legal li::before{right:1.05rem}}
@media(max-width:22.5em){[dir="rtl"] .legal li{padding-right:2.3rem;padding-left:.9rem}[dir="rtl"] .legal li::before{right:.85rem}}

/* Self-service recovery guidance: native, keyboard-accessible disclosures. */
.bot-form{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin:1.5rem 0;min-width:0}
.bot-form .cf-turnstile{width:150px;min-height:140px;direction:ltr}
.bot-form .btn{white-space:normal;overflow-wrap:anywhere}
.bot-help{margin-top:1.5rem;padding-top:1rem;border-top:2px dashed rgba(90,46,41,.3)}
.panel .bot-help p{font-size:1rem;line-height:1.65}
.bot-error{padding:1rem;border:2px solid var(--ink-blue);border-radius:1rem;background:var(--card);overflow-wrap:anywhere}
.recovery-help{margin-top:2rem;text-align:start;min-width:0}
.help .recovery-help{margin-top:0}
.recovery-help h2{font:700 1.45rem/1.35 var(--display);color:var(--ink-blue);margin:0 0 .75rem;overflow-wrap:anywhere}
.panel .recovery-help p{max-width:none;margin:.75rem 0;line-height:1.65;text-wrap:pretty}
.help-topic{margin-top:.8rem;border:2px solid rgba(90,46,41,.16);border-radius:1.2rem;background:var(--card);overflow-wrap:anywhere}
.help-topic summary{padding:1rem 1.1rem;cursor:pointer;font-weight:700;min-height:48px;line-height:1.5;color:var(--ink-blue)}
.help-topic summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:1rem}
.help-topic[open] summary{border-bottom:1px solid rgba(90,46,41,.16)}
.help-body{padding:.25rem 1.1rem 1.2rem}
.recovery-help .actions{justify-content:flex-start;gap:.8rem}
.recovery-help .btn{font-size:1rem;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.help-contact{margin-top:1.5rem;padding-top:1.5rem;border-top:2px dashed rgba(90,46,41,.3)}
@media(max-width:22.5em){.help-topic summary{padding:.85rem}.help-body{padding-inline:.85rem}}