/* MISHH — static product and legal site. No JavaScript, cookies or analytics. */
:root{
  color-scheme:dark;
  --navy:#071b4f;
  --navy-deep:#031238;
  --navy-soft:#102965;
  --cream:#fff5df;
  --cream-2:#f5e7ca;
  --muted:#b9c4db;
  --blue:#2962ff;
  --teal:#1fc6ba;
  --coral:#ff5a4f;
  --yellow:#ffc629;
  --line:rgba(255,245,223,.18);
  --card:rgba(14,39,93,.72);
  --shadow:0 24px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-wrap:anywhere}
body{
  margin:0;
  color:var(--cream);
  background:
    radial-gradient(55rem 35rem at 100% 0,rgba(31,198,186,.14),transparent 65%),
    radial-gradient(46rem 32rem at -8% 21%,rgba(41,98,255,.18),transparent 70%),
    var(--navy-deep);
  font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

img{display:block;max-width:100%}
a{color:var(--yellow);text-underline-offset:4px}
a:hover{color:#ffe083}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:8px}
p{margin:0 0 1em}
h1,h2,h3{line-height:1.05;letter-spacing:-.045em;margin-top:0}
h1{font-size:clamp(3.1rem,7vw,6.8rem);margin-bottom:24px}
h2{font-size:clamp(2rem,4vw,3.65rem);margin-bottom:20px}
h3{font-size:1.35rem;margin-bottom:10px}
strong{color:var(--cream)}

.page-shell{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);font-size:1.2rem;font-weight:950;letter-spacing:.08em}
.brand img{width:42px;height:42px;object-fit:contain}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:.83rem;font-weight:850;text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{color:var(--yellow)}

main{padding:44px 0 78px}
main>section{margin-top:96px;scroll-margin-top:24px}
.hero{margin-top:10px;min-height:690px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);align-items:center;gap:58px}
.hero-copy{position:relative;z-index:2}
.eyebrow{color:var(--yellow);font-size:.76rem;font-weight:950;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.wordmark{width:min(525px,94%);height:auto;margin:0 0 24px}
.hero h1{font-weight:950;max-width:760px}
.lead,.section-lead{color:var(--muted);font-size:clamp(1.05rem,1.8vw,1.28rem);max-width:750px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0}
.chips span{border:1px solid var(--line);background:rgba(16,41,101,.68);border-radius:999px;padding:8px 13px;color:var(--cream);font-size:.78rem;font-weight:850}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 21px;
  border-radius:14px;
  color:var(--navy-deep);
  background:var(--yellow);
  border:2px solid var(--yellow);
  box-shadow:0 6px 0 #a96e00,0 18px 35px rgba(0,0,0,.22);
  font-weight:950;
  text-decoration:none;
}
.button:hover{color:var(--navy-deep);filter:brightness(1.08)}
.button:active{transform:translateY(3px);box-shadow:0 3px 0 #a96e00}
.button-secondary{color:var(--cream);background:transparent;border-color:var(--line);box-shadow:none}
.button-secondary:hover{color:var(--cream);border-color:var(--teal)}
.store-note{margin-top:22px;color:var(--muted);font-size:.88rem;max-width:640px}

.card-stage{position:relative;height:620px;isolation:isolate}
.fan-card{position:absolute;left:50%;top:48%;width:244px;height:auto;filter:drop-shadow(0 28px 28px rgba(0,0,0,.42));transform-origin:50% 90%}
.fan-card-green{z-index:1;transform:translate(-89%,-49%) rotate(-11deg)}
.fan-card-red{z-index:2;transform:translate(-11%,-49%) rotate(11deg)}
.fan-card-blue{z-index:3;transform:translate(-50%,-51%)}
.app-badge{position:absolute;right:0;bottom:8px;z-index:5;width:118px;height:118px;border-radius:28px;box-shadow:0 18px 35px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12)}
.confetti{position:absolute;z-index:0;display:block}
.confetti-one{width:90px;height:90px;border-radius:50%;background:var(--teal);right:0;top:38px;opacity:.9}
.confetti-two{width:54px;height:54px;background:var(--coral);border-radius:18px;left:8px;bottom:45px;transform:rotate(18deg)}
.confetti-three{width:22px;height:80px;border-radius:99px;background:var(--yellow);left:40px;top:65px;transform:rotate(44deg)}

.intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;border-top:1px solid var(--line);padding-top:74px}
.intro h2{margin-bottom:0}
.intro .section-lead{margin-bottom:4px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.feature,.deck-grid article,.policy-links a,.legal-card{
  background:linear-gradient(150deg,rgba(20,51,119,.88),rgba(5,24,67,.96));
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.feature{padding:28px;min-height:250px;position:relative;overflow:hidden}
.feature:after{content:"";position:absolute;right:-45px;bottom:-55px;width:150px;height:150px;border-radius:50%;opacity:.17}
.feature-blue:after{background:var(--blue)}
.feature-teal:after{background:var(--teal)}
.feature-coral:after{background:var(--coral)}
.feature-number{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--cream);color:var(--navy);font-weight:950;margin-bottom:32px}
.feature p,.deck-grid p{color:var(--muted);margin-bottom:0}

.section-heading{max-width:790px;margin-bottom:34px}
.how-to{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{position:relative;display:grid;grid-template-columns:210px 1fr;gap:22px;padding:22px 22px 22px 68px;border-top:1px solid var(--line);counter-increment:step}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li:before{content:counter(step);position:absolute;left:10px;top:18px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--navy);font-weight:950}
.steps span{color:var(--muted)}

.deck-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.deck-grid article{grid-column:span 2;padding:25px;min-height:220px}
.deck-grid article:nth-last-child(2){grid-column:2/span 2}
.deck-grid article:last-child{grid-column:4/span 2}
.deck-grid article>span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--cream);color:var(--navy);font-size:1.25rem;font-weight:950;margin-bottom:24px}
.deck-grid article:nth-child(1)>span{color:var(--coral)}
.deck-grid article:nth-child(2)>span{color:var(--coral)}
.deck-grid article:nth-child(3)>span{color:var(--teal)}
.deck-grid article:nth-child(4)>span{color:var(--blue)}
.deck-grid article:nth-child(5)>span{color:#bd8a00}

.privacy-banner{display:grid;grid-template-columns:1.2fr .8fr;gap:52px;padding:44px;border-radius:30px;background:var(--cream);color:var(--navy);box-shadow:var(--shadow)}
.privacy-banner .eyebrow{color:#174aae}
.privacy-banner h2,.privacy-banner p{color:var(--navy)}
.privacy-banner p{margin-bottom:0;font-size:1.08rem}
.privacy-banner ul{display:grid;gap:10px;align-content:center;list-style:none;padding:0;margin:0}
.privacy-banner li{position:relative;padding-left:29px;font-weight:850}
.privacy-banner li:before{content:"✓";position:absolute;left:0;color:#087e75;font-weight:950}
.languages{text-align:center;max-width:900px;margin-inline:auto}
.languages p:last-child{color:var(--muted);font-size:1.06rem;line-height:2}
.ad-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.ad-rules article{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.ad-rules strong{display:block;font-size:1.12rem;margin-bottom:7px}
.ad-rules span{display:block;color:var(--muted)}

.policy-section{border-top:1px solid var(--line);padding-top:74px}
.policy-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.policy-links a{display:block;padding:24px;text-decoration:none;color:var(--cream);transition:transform .18s ease,border-color .18s ease}
.policy-links a:hover{transform:translateY(-3px);border-color:var(--yellow)}
.policy-links span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.contact-strip{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px;border-radius:28px;border:1px solid var(--line);background:rgba(16,41,101,.66)}
.contact-strip h2{font-size:clamp(1.8rem,3.2vw,3rem);margin-bottom:10px}
.contact-strip p:last-child{color:var(--muted);margin-bottom:0}

footer{border-top:1px solid var(--line);padding:30px 0 44px;text-align:center;color:var(--muted);font-size:.83rem}
.footer-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer p{margin:10px 0 0;font-size:.76rem}

/* Legal and support pages */
.legal-main{max-width:900px;margin:auto;padding-top:54px}
.legal-hero{margin:0 0 42px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(2.8rem,6vw,5rem);margin-bottom:14px}
.legal-hero .meta{color:var(--muted)}
.legal-main h2{font-size:clamp(1.55rem,3vw,2.25rem);margin:48px 0 16px}
.legal-main h3{margin-top:30px}
.legal-main p,.legal-main li{color:var(--muted)}
.legal-main ul,.legal-main ol{padding-left:24px}
.legal-main li{margin-bottom:10px}
.legal-main li::marker{color:var(--yellow)}
.legal-card{padding:24px;margin:24px 0}
.legal-card h2,.legal-card h3{margin-top:0}
.notice{border-left:5px solid var(--teal);background:rgba(31,198,186,.1);padding:18px 20px;border-radius:12px;margin:24px 0;color:var(--cream)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;margin:20px 0 30px}
table{border-collapse:collapse;width:100%;min-width:610px;font-size:.9rem}
th,td{text-align:left;vertical-align:top;padding:14px;border-bottom:1px solid var(--line)}
th{color:var(--yellow);background:rgba(16,41,101,.9)}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
.contact-info{margin-top:46px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.contact-info h2{font-size:1.25rem;margin:0 0 12px}
.contact-info p{margin:0}
.inline-address{display:inline;font-style:normal}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:25px 0}
.support-grid .legal-card{margin:0}
.support-grid h3{margin-top:0}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:12px;text-align:center}
  .hero-copy{max-width:760px;margin:auto}
  .wordmark{margin-inline:auto}
  .lead,.store-note{margin-inline:auto}
  .chips,.hero-actions{justify-content:center}
  .card-stage{height:520px;max-width:570px;width:100%;margin:auto}
  .fan-card{width:210px}
  .app-badge{right:6%;bottom:18px;width:94px;height:94px;border-radius:23px}
  .intro,.how-to{grid-template-columns:1fr;gap:28px}
  .feature-grid{grid-template-columns:1fr}
  .ad-rules{grid-template-columns:1fr}
  .feature{min-height:0}
  .privacy-banner{grid-template-columns:1fr}
}

@media(max-width:680px){
  .page-shell{width:min(100% - 28px,1180px)}
  .topbar{padding:15px 0;align-items:flex-start;flex-direction:column;gap:12px}
  .nav{gap:8px 15px}
  .nav a{font-size:.78rem}
  main{padding-top:28px}
  main>section{margin-top:68px}
  .hero{min-height:0}
  .hero h1{font-size:clamp(2.75rem,14vw,4.25rem)}
  .card-stage{height:430px}
  .fan-card{width:170px}
  .app-badge{width:76px;height:76px;border-radius:18px}
  .confetti-one{width:66px;height:66px}
  .confetti-two{width:40px;height:40px}
  .deck-grid{grid-template-columns:1fr}
  .deck-grid article,.deck-grid article:nth-last-child(2),.deck-grid article:last-child{grid-column:auto;min-height:0}
  .steps li{grid-template-columns:1fr;padding-left:62px;gap:5px}
  .policy-links,.support-grid{grid-template-columns:1fr}
  .privacy-banner,.contact-strip{padding:27px}
  .contact-strip{align-items:flex-start;flex-direction:column}
}

@media(max-width:420px){
  .brand img{width:36px;height:36px}
  .card-stage{height:370px}
  .fan-card{width:146px}
  .app-badge{display:none}
  .button{width:100%}
  .chips span{font-size:.72rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .policy-links a,.button{transition:none}
}