/* Shared look for the MyBC subpages. The first part is copied unchanged from
   the homepage's stylesheet (Website/index.html), so both stay in step;
   rebuild it if the homepage's tokens change. */

:root{
  /* page */
  --ground:#F5F1EB; --raised:#FBF8F3; --ink:#211E1D; --ink-soft:#57524F; --ink-faint:#8A847F;
  --rose:#C2415F; --rose-text:#A3304C; --rose-tint:#F2DCE1; --rose-light:#E28A9E; --cream:#FAF6F0;
  --line:rgba(33,30,29,.12); --glass:rgba(245,241,235,.86); --shadow:rgba(30,33,37,.28);
  --band:#1E2125; --band-ink:#FAF6F0; --band-soft:#B9B3AC; --band-line:rgba(250,246,240,.14);
  --mark-card:#1E2125; --bezel:#1E2125; --bezel-edge:#3A3E44; --island:#08090A;
  /* the printed card in the hero (a physical object, same in both themes) */
  --card-stock:#FFFDF8; --card-ink:#2A2A28; --card-accent:#2F5D62; --card-soft:#6B6B66;
  /* the app's own Default theme, used inside the phone screens */
  --app-paper:#E6E6E6; --app-cell:#FFFFFF; --app-ink:#1B1B1B; --app-soft:#4C4C4C; --app-faint:#8A8A8A;
  --app-accent:#C2415F; --app-heading:#992C45; --app-accent-soft:rgba(194,65,95,.14); --app-on-accent:#FFFFFF;
  --app-sep:rgba(0,0,0,.08); --app-field:rgba(0,0,0,.05);
  --app-amber:#C76B33; --app-green:#4D8C6B; --app-slate:#5C5C66;
  /* type */
  --font-display:"Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body:"Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-card:"Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-app:-apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --fs-hero:clamp(2.5rem, 5.2vw, 4.3rem); --fs-h2:clamp(1.85rem, 3.4vw, 2.75rem);
  --fs-h3:1.08rem; --fs-lead:clamp(1.08rem, 1.5vw, 1.24rem); --fs-body:1.0625rem; --fs-small:.9rem; --fs-label:.72rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#15171A; --raised:#1C1F23; --ink:#ECEDEF; --ink-soft:#B2B6BC; --ink-faint:#80868E;
    --rose:#E0637F; --rose-text:#EE8FA4; --rose-tint:rgba(224,99,127,.16); --rose-light:#E28A9E; --cream:#FAF6F0;
    --line:rgba(236,237,239,.12); --glass:rgba(21,23,26,.84); --shadow:rgba(0,0,0,.6);
    --band:#0D0E10; --band-ink:#F2EEE8; --band-soft:#A8A39D; --band-line:rgba(242,238,232,.12);
    --mark-card:#2A2E34; --bezel:#2B2F35; --bezel-edge:#454A51; --island:#000000;
    --app-paper:#15171A; --app-cell:#212428; --app-ink:#ECEDEF; --app-soft:#B2B6BC; --app-faint:#7C828A;
    --app-accent:#E0637F; --app-heading:#EC8AA0; --app-accent-soft:rgba(224,99,127,.24); --app-on-accent:#FFFFFF;
    --app-sep:rgba(255,255,255,.08); --app-field:rgba(255,255,255,.07);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#15171A; --raised:#1C1F23; --ink:#ECEDEF; --ink-soft:#B2B6BC; --ink-faint:#80868E;
  --rose:#E0637F; --rose-text:#EE8FA4; --rose-tint:rgba(224,99,127,.16); --rose-light:#E28A9E; --cream:#FAF6F0;
  --line:rgba(236,237,239,.12); --glass:rgba(21,23,26,.84); --shadow:rgba(0,0,0,.6);
  --band:#0D0E10; --band-ink:#F2EEE8; --band-soft:#A8A39D; --band-line:rgba(242,238,232,.12);
  --mark-card:#2A2E34; --bezel:#2B2F35; --bezel-edge:#454A51; --island:#000000;
  --app-paper:#15171A; --app-cell:#212428; --app-ink:#ECEDEF; --app-soft:#B2B6BC; --app-faint:#7C828A;
  --app-accent:#E0637F; --app-heading:#EC8AA0; --app-accent-soft:rgba(224,99,127,.24); --app-on-accent:#FFFFFF;
  --app-sep:rgba(255,255,255,.08); --app-field:rgba(255,255,255,.07);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ground)}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;padding-block:12px}
.logo{display:block;height:36px;width:auto}
.logo .l-ground{fill:var(--ground)}
.logo .l-card{fill:var(--mark-card)}
.logo .l-my{fill:var(--rose)}
.logo .l-bc{fill:var(--ink)}
.top nav{display:flex;gap:24px;margin-left:auto;font-size:.94rem}
.top nav a{text-decoration:none;color:var(--ink-soft)}
.top nav a:hover{color:var(--ink)}
.soon{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:550;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--raised);white-space:nowrap;color:var(--ink)}
.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 3px var(--rose-tint)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--rose-text)}
h3{font-size:var(--fs-h3);line-height:1.3;font-weight:640;letter-spacing:-.012em}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1rem;text-decoration:none;padding:13px 22px;border-radius:12px;background:var(--rose);color:#FFFFFF;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px var(--rose)}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:600;font-size:1.06rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--rose),var(--rose)) center/12px 2px no-repeat, linear-gradient(var(--rose),var(--rose)) center/2px 12px no-repeat;transition:transform .2s ease}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{color:var(--ink-soft);padding:0 0 22px;max-width:60ch;margin-top:-4px}
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-block:28px 36px;font-size:.88rem;color:var(--ink-faint)}
footer .logo{height:30px}
footer nav{display:flex;gap:20px;margin-left:auto}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
@media (max-width:720px){ .top nav{display:none} .top .soon{margin-left:auto} }

/* ---------------- subpages only ---------------- */
footer nav{flex-wrap:wrap}
.doc{padding-block:clamp(44px,7vw,88px) clamp(64px,9vw,112px)}
.doc .wrap{max-width:860px}
.doc h1{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.07;letter-spacing:-.032em;font-weight:720;text-wrap:balance;margin-top:16px}
.doc .updated{margin-top:14px;color:var(--ink-faint);font-size:var(--fs-small)}
.doc .lead{margin-top:22px;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft);max-width:62ch}
.doc h2{font-family:var(--font-display);font-size:1.42rem;line-height:1.25;letter-spacing:-.02em;font-weight:680;margin-top:56px;color:var(--ink)}
.doc h3{margin-top:28px}
.doc p,.doc ul{margin-top:14px;max-width:66ch;color:var(--ink-soft)}
.doc li{position:relative;padding-left:20px;margin-top:8px}
.doc li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--rose)}
.doc strong{color:var(--ink);font-weight:620}
.doc p a,.doc li a,.doc td a{color:var(--rose-text);text-underline-offset:3px}
.doc .note{margin-top:20px;padding:16px 18px;border-radius:12px;background:var(--raised);border:1px solid var(--line);color:var(--ink-soft);max-width:66ch}
.perm{width:100%;border-collapse:collapse;margin-top:20px;font-size:.97rem}
.perm th{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--line)}
.perm td{vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.5}
.perm td:first-child{color:var(--ink);font-weight:620;white-space:nowrap}
@media (max-width:640px){
  .perm thead{display:none}
  .perm,.perm tbody,.perm tr,.perm td{display:block;width:100%}
  .perm tr{border-bottom:1px solid var(--line);padding:14px 0}
  .perm td{border:0;padding:2px 0}
  .perm td:first-child{white-space:normal}
  .perm td:nth-child(3)::before{content:"Leaves your iPhone: ";color:var(--ink-faint)}
}
.contact{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.contact .addr{font-family:var(--font-mono);font-size:.95rem;color:var(--ink-soft)}
.doc .qa{margin-top:22px}
.doc .qa details p{margin-top:-4px}
.lost{padding-block:clamp(80px,14vw,160px)}
.lost .btn{margin-top:28px}
mark.todo{background:#FFE58A;color:#3A2E00;padding:0 4px;border-radius:4px}