/* mystudio.ooo — shared styling for content sub-pages, matching the homepage design.
   Used by the for-* and *-alternative pages (replaces the older marketing.css look). */
@font-face { font-family:'Mabry Pro'; src:url('fonts/mabrypro-light.woff2')  format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Mabry Pro'; src:url('fonts/mabrypro-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Mabry Pro'; src:url('fonts/mabrypro-italic.woff2')  format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Mabry Pro'; src:url('fonts/mabrypro-medium.woff2')  format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Mabry Pro'; src:url('fonts/mabrypro-bold.woff2')    format('woff2'); font-weight:700; font-display:swap; }

:root{
  --paper:#FBF7F0; --card:#fff; --card-soft:#FAF9FE;
  --ink:#17141F; --sub:#615C6E; --faint:#8b8598;
  --blue:#3B5BE8; --blue-ink:#2742C4; --amber:#F5A524; --coral:#E23A28; --violet:#7C5CFF;
  --line:#e7e2d8; --line-soft:#efeae0;
  /* page wash + soft radial tints — matches the homepage background */
  --wash:#F4F1FB; --tint-lilac:#EFEBFB; --tint-peach:#FCEEEC; --tint-sky:#EAF0FE;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Mabry Pro',system-ui,sans-serif;
  --shadow:0 18px 50px rgba(23,20,31,.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{color:var(--ink);font-family:var(--display);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;animation:pageIn .4s ease;overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 12% -5%, var(--tint-lilac) 0%, transparent 55%),
    radial-gradient(1000px 620px at 92% 8%, var(--tint-peach) 0%, transparent 50%),
    radial-gradient(1100px 800px at 50% 110%, var(--tint-sky) 0%, transparent 55%),
    var(--wash);
  background-attachment:fixed;}
/* Lenis smooth-scroll support (enabled by js/brand.js on these pages) */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:clip;}
@keyframes pageIn{from{opacity:0;}to{opacity:1;}}
a{color:var(--blue);text-decoration:none;}
::selection{background:var(--blue);color:#fff;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.mono{font-family:var(--mono);}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* ── topbar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.brandmark{font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink);letter-spacing:-.01em;}
.brandmark .dim{color:var(--sub);font-weight:300;} .brandmark .b{color:var(--blue);}
.topnav{display:flex;align-items:center;gap:24px;}
.topnav a:not(.btn){color:var(--sub);font-size:14.5px;} .topnav a:not(.btn):hover{color:var(--ink);}

/* ── pill buttons (homepage style) ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:15px;
  border:0;cursor:pointer;text-decoration:none;padding:14px 26px;border-radius:999px;white-space:nowrap;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,background .2s,color .2s;}
.btn-blue{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 var(--blue-ink);}
.btn-blue:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 0 var(--blue-ink);}
.btn-blue:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 var(--blue-ink);}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue);transform:translateY(-2px);}
.btn-sm{padding:10px 18px;font-size:14px;}

/* ── hero ── */
.hero{position:relative;padding:56px 0 30px;text-align:center;overflow:visible;}
.hero>*{position:relative;z-index:1;}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.display{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-.02em;
  margin:22px auto 0;max-width:17ch;}
.display em{font-style:italic;color:var(--blue);}
.lede{font-size:clamp(16px,2vw,18.5px);color:var(--sub);max-width:60ch;margin:20px auto 0;line-height:1.6;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.price-tag{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:18px;letter-spacing:.02em;}

/* floating shapes */
.shape{position:absolute;z-index:0;pointer-events:none;}
.shape-spin{transform-origin:50% 50%;animation:spin 22s linear infinite;}
.shape-float{animation:floaty 7s ease-in-out infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-8px) rotate(4deg);}}
@media (prefers-reduced-motion:reduce){.shape-spin,.shape-float{animation:none;} body{animation:none;}}

/* ── sections ── */
.section{padding:38px 0;}
.eyebrow-lbl{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
h2.h{font-family:var(--display);font-weight:400;font-size:clamp(25px,3.4vw,36px);letter-spacing:-.01em;line-height:1.12;margin:8px 0 0;max-width:24ch;}

/* checklist panel */
.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 34px;box-shadow:var(--shadow);}
.panel h2{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.01em;}
.checklist{list-style:none;margin:14px 0 0;}
.checklist li{position:relative;padding:14px 0 14px 34px;color:var(--sub);border-bottom:1px solid var(--line-soft);font-size:15.5px;line-height:1.55;}
.checklist li:last-child{border-bottom:0;}
.checklist li::before{content:"";position:absolute;left:3px;top:20px;width:13px;height:13px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent);}
.checklist li b{color:var(--ink);font-weight:500;}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0;}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 62px rgba(23,20,31,.12);}
.card .tag{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:color-mix(in srgb,var(--blue) 9%,var(--card));padding:4px 10px;border-radius:999px;}
.card h3{font-family:var(--display);font-weight:500;font-size:18px;margin:14px 0 6px;letter-spacing:-.01em;}
.card p{color:var(--sub);font-size:14.5px;line-height:1.55;}

.cta-band{text-align:center;margin:52px 0 10px;}

/* comparison table (alternative pages) */
.ctable{width:100%;border-collapse:collapse;margin:22px 0 8px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow);}
.ctable th,.ctable td{padding:14px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.5;}
.ctable thead th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-weight:600;background:var(--card-soft);}
.ctable thead th.us{color:var(--blue);}
.ctable tbody tr:last-child td{border-bottom:0;}
.ctable .row-label{font-weight:500;color:var(--ink);width:26%;}
.ctable td:nth-child(2){background:color-mix(in srgb,var(--blue) 5%,var(--card));color:var(--ink);}
.ctable td.yes{color:var(--ink);}
.fair{color:var(--faint);font-size:12.5px;line-height:1.6;max-width:72ch;margin:14px auto 0;text-align:center;}
@media(max-width:640px){ .ctable th,.ctable td{padding:10px 10px;font-size:12.5px;} }

/* ── megafoot ── */
.megafoot{border-top:1px solid var(--line);margin-top:48px;padding:34px 0 28px;overflow:hidden;}
.mf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.mf-brand{display:flex;flex-direction:column;gap:4px;}
.mf-mark{font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink);}
.mf-mark .dim{color:var(--sub);font-weight:300;} .mf-mark .b{color:var(--blue);}
.mf-mission{font-family:var(--mono);font-size:12px;color:var(--sub);}
.mf-links{display:flex;gap:22px;flex-wrap:wrap;padding-top:4px;}
.mf-links a{color:var(--sub);font-size:15px;} .mf-links a:hover{color:var(--ink);}
.mf-word{margin-top:22px;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(46px,14vw,160px);
  line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px var(--line);user-select:none;}

@media(max-width:880px){ .cards{grid-template-columns:1fr;} .topnav .hide-sm{display:none;} .mf-word{display:none;} }
@media(max-width:600px){ .display{font-size:clamp(30px,9vw,44px);} .btn{font-size:14px;padding:12px 20px;} }