/* ME (MOBILE EXTRA) v2: one page, three DESIGN.md files.
   Every colour, corner, weight and size below comes from a token block, and each block is read off
   one file in v2/design/ (from github.com/VoltAgent/awesome-design-md). Switching the file switches the page.
   What is not in the files and was added for this site:
   - Thai: the files name Latin faces only, so Noto Sans Thai sits beside Inter and line heights are opened up
   - Wise: the primary is the lime of the ME logo instead of #9fe870
   - no dark surfaces (the dark cards, bands and footers in the files are left out by request)
   - muted text is darkened where the file's value fails 4.5:1 */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/Inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/NotoSansThai-var-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

/* wise.DESIGN.md: lime pill, sage canvas, weight 900 display, 24px corners */
:root{
  --primary:#9CCC48; --on-primary:#0E0F0C; --primary-hover:#B7DC73; --primary-pale:#E6F2D0;
  --ink:#0E0F0C; --body:#454745; --mute:#646664;
  --canvas:#FFFFFF; --band:#E8EBE6; --soft:#E8EBE6; --hairline:#D5D9D2; --frame:#0E0F0C;
  --ok-bg:#E6F2D0; --ok-ink:#054D28; --warn-bg:#FFD11A; --warn-ink:#4A3B1C; --bad-bg:#F8DCDD; --bad-ink:#A72027;
  --r-card:24px; --r-btn:24px; --r-inset:16px; --r-chip:9999px;
  --w-display:900; --w-head:900; --w-strong:600; --w-body:400;
  --fs-display:clamp(40px,6.2vw,88px); --fs-h2:clamp(28px,3.4vw,40px); --fs-lead:20px; --fs-body:16px; --fs-figure:clamp(64px,8vw,96px);
  --font:Inter,'Noto Sans Thai',system-ui,-apple-system,sans-serif;
}
/* nerdwallet.DESIGN.md: spruce green, mint washes, near-square corners, weight 700 heads over light body */
[data-design="nerdwallet"]{
  --primary:#008254; --on-primary:#FFFFFF; --primary-hover:#006642; --primary-pale:#E3FAF2;
  --ink:#101312; --body:#3D4045; --mute:#64666A;
  --canvas:#FFFFFF; --band:#EFFCF8; --soft:#F7F7F7; --hairline:#D8D9DA; --frame:#D8D9DA;
  --ok-bg:#E3FAF2; --ok-ink:#006642; --warn-bg:#E8FDAC; --warn-ink:#00482F; --bad-bg:#FDEAEA; --bad-ink:#B81F1F;
  --r-card:8px; --r-btn:2px; --r-inset:4px; --r-chip:2px;
  --w-display:700; --w-head:700; --w-strong:700; --w-body:300;
  --fs-display:clamp(36px,3.8vw,52px); --fs-h2:clamp(26px,2.6vw,36px); --fs-lead:18px; --fs-body:16px; --fs-figure:clamp(56px,6vw,72px);
}
/* zapier.DESIGN.md: one orange, warm off-white canvas, coffee ink, weight 500 display, 12px corners */
[data-design="zapier"]{
  --primary:#FF4F00; --on-primary:#FFFEFB; --primary-hover:#E64600; --primary-pale:#FFE8DB;
  --ink:#201515; --body:#605D52; --mute:#736F64;
  --canvas:#FFFEFB; --band:#F8F4F0; --soft:#F8F4F0; --hairline:#C5C0B1; --frame:#C5C0B1;
  --ok-bg:#E9F3E3; --ok-ink:#2F6B2F; --warn-bg:#FFE8DB; --warn-ink:#8A3200; --bad-bg:#F9D8D0; --bad-ink:#A32A14;
  --r-card:12px; --r-btn:12px; --r-inset:6px; --r-chip:6px;
  --w-display:500; --w-head:500; --w-strong:600; --w-body:400;
  --fs-display:clamp(38px,4vw,56px); --fs-h2:clamp(26px,2.6vw,32px); --fs-lead:20px; --fs-body:18px; --fs-figure:clamp(56px,6vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);font:var(--w-body) var(--fs-body)/1.6 var(--font);font-feature-settings:"calt";-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--primary-pale);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-inset)}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.container{width:min(100% - 48px,1200px);margin-inline:auto}
.skip{position:absolute;left:16px;top:-56px;z-index:30;padding:8px 16px;border-radius:var(--r-btn);background:var(--ink);color:var(--canvas);text-decoration:none}
.skip:focus{top:12px}

h1{color:var(--ink);font-size:var(--fs-display);line-height:1.2;font-weight:var(--w-display);text-wrap:balance}
h2{max-width:20em;color:var(--ink);font-size:var(--fs-h2);line-height:1.28;font-weight:var(--w-head);text-wrap:balance}
h3{color:var(--ink);font-size:20px;line-height:1.4;font-weight:var(--w-strong)}
.lead{max-width:34rem;font-size:var(--fs-lead);line-height:1.6}
h2 + .lead{margin-top:12px}
p,li,figcaption{text-wrap:pretty}

/* the bar that names the file in use */
.design{background:var(--band);color:var(--ink);font-size:14px;line-height:20px}
.design-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 0}
.design-row p{font-weight:var(--w-strong)}
.design-row span{color:var(--body)}
.design-tabs{display:flex;gap:4px;margin-left:auto}
.design-tab{min-height:36px;padding:0 12px;border:1px solid var(--hairline);border-radius:var(--r-btn);background:var(--canvas);color:var(--ink);font:var(--w-strong) 14px/20px var(--font);white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out}
.design-tab:hover{background:var(--primary-pale)}
.design-tab[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}

/* bands and cards: surface contrast is the only elevation */
.band{padding:48px 0}
.band-tint{background:var(--band)}
.band-pale{background:var(--primary-pale)}
.band-head{margin-bottom:32px}
.card{padding:24px;border-radius:var(--r-card);background:var(--canvas)}
.card-soft{background:var(--soft)}
.card-pale{background:var(--primary-pale)}
.inset{margin-bottom:16px;padding:16px;border-radius:var(--r-inset);background:var(--primary-pale)}
.inset img{width:100%;max-width:320px;margin-inline:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* the drawings are shown in one ink over the file's pale tone, so they change with the file */
.duo img{filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:1px solid transparent;border-radius:var(--r-btn);font:var(--w-strong) 16px/24px var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-tertiary{border-color:var(--ink);background:var(--canvas);color:var(--ink)}
.btn-tertiary:hover{background:var(--primary-pale)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-chip);background:var(--soft);color:var(--ink);font:var(--w-strong) 14px/20px var(--font);white-space:nowrap}
.badge-neg{background:var(--bad-bg);color:var(--bad-ink)}
.badge-warn{background:var(--warn-bg);color:var(--warn-ink)}
.badge-pos{background:var(--ok-bg);color:var(--ok-ink)}
.badge-on-tint{background:var(--canvas)}

.nav{position:sticky;top:0;z-index:20;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.nav-row{display:flex;align-items:center;gap:24px;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:auto;height:40px}
.logo-text{display:flex;align-items:baseline;gap:8px}
.logo-name{color:var(--ink);font-size:20px;line-height:24px;font-weight:var(--w-display)}
.logo-full{font-size:14px;line-height:20px;font-weight:var(--w-strong)}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{color:var(--ink);font:var(--w-strong) 14px/20px var(--font);text-decoration:none}
.nav-links a:hover{text-decoration:underline;text-underline-offset:4px}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--ink);border-radius:var(--r-btn);background:var(--canvas);color:var(--ink);cursor:pointer}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero: the headline is the picture, the file's signature card sits beside it */
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.hero .lead{margin-top:24px}
.check-card{padding:24px;border:1px solid var(--frame);border-radius:var(--r-card);background:var(--canvas)}
.check-card h2{font-size:20px;line-height:1.4;font-weight:var(--w-strong)}
.field{display:grid;gap:4px;margin-top:16px}
.field label{color:var(--mute);font-size:14px;line-height:20px}
.field select{width:100%;height:48px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r-inset);background:var(--canvas);color:var(--ink);font:var(--w-strong) 16px/24px var(--font)}
.check-rows{margin-top:16px;border-top:1px solid var(--hairline)}
.check-rows div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-bottom:1px solid var(--hairline)}
.check-rows dt{color:var(--body);font-size:14px;line-height:20px}
.check-rows dd{margin:0;color:var(--ink);font-weight:var(--w-strong);text-align:right}
.check-note{margin-top:12px;color:var(--mute);font-size:12px;line-height:18px}

.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.split > h2{position:sticky;top:104px}
.outcomes{display:grid;gap:8px}
.outcome{display:grid;grid-template-columns:136px minmax(0,1fr) auto;gap:24px;align-items:center;padding:8px 24px;border-radius:var(--r-card);background:var(--soft)}
.outcome img{width:136px}
.outcome p{color:var(--ink);font-weight:var(--w-strong)}

.cats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px 16px}
.cats li{display:grid;gap:8px}
.cats img{width:100%}
.cats span{color:var(--ink);font:var(--w-strong) 14px/20px var(--font)}

.survey-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
.so-what{margin-top:24px}
.so-what h3{margin-top:16px;color:var(--mute);font-size:14px;line-height:20px}
.so-what p{margin-top:4px;color:var(--ink);font-size:18px;line-height:1.55;font-weight:var(--w-strong)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-content:center;padding:32px}
.figure{color:var(--ink);font-size:var(--fs-figure);line-height:1;font-weight:var(--w-display);letter-spacing:-.02em}
.figure span{font-size:.5em;letter-spacing:0}
.stat p:not(.figure){margin-top:12px;color:var(--ink)}
.dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:280px;margin-top:24px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--canvas)}
.dots .on{background:var(--primary)}

.answers-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.answer-list{display:grid;gap:8px}
.answer{display:block;width:100%;padding:16px 24px;border:0;border-radius:var(--r-inset);background:var(--canvas);color:var(--ink);font:var(--w-body) var(--fs-body)/1.6 var(--font);text-align:left;cursor:pointer;transition:background-color .15s ease-out}
.answer:hover{background:var(--primary-pale)}
.answer[aria-selected="true"]{background:var(--primary);color:var(--on-primary);font-weight:var(--w-strong)}
.report{overflow:hidden;padding:0}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px}
.report-title{color:var(--ink);font-weight:var(--w-strong)}
.report-sub{margin-left:8px;color:var(--body);font-weight:var(--w-body)}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
th,td{padding:12px 16px;text-align:left;vertical-align:middle;transition:background-color .15s ease-out}
tr > :first-child{padding-left:24px}
tr > :last-child{padding-right:24px}
thead th{background:var(--soft);color:var(--body);font-size:12px;line-height:18px;font-weight:var(--w-strong);white-space:nowrap;vertical-align:top}
th small{display:block;color:var(--mute);font-size:12px;line-height:18px;font-weight:var(--w-body)}
tbody th{color:var(--ink);font-weight:var(--w-strong)}
td{color:var(--ink)}
tbody tr + tr > *{border-top:1px solid var(--soft)}
.neg{color:var(--bad-ink);font-weight:var(--w-strong)}
.muted{color:var(--mute)}
.report[data-view="shelf"] tbody [data-col="shelf"],
.report[data-view="offtake"] tbody [data-col="offtake"],
.report[data-view="media"] tbody [data-col="media"],
.report[data-view="price"] tbody [data-col="price"]{background:var(--primary-pale)}
.report[data-view="shelf"] thead [data-col="shelf"],
.report[data-view="offtake"] thead [data-col="offtake"],
.report[data-view="media"] thead [data-col="media"],
.report[data-view="price"] thead [data-col="price"]{background:var(--primary);color:var(--on-primary)}
.report[data-view="shelf"] thead [data-col="shelf"] small,
.report[data-view="offtake"] thead [data-col="offtake"] small,
.report[data-view="media"] thead [data-col="media"] small,
.report[data-view="price"] thead [data-col="price"] small{color:var(--on-primary)}
.report-note{padding:12px 24px 16px;border-top:1px solid var(--soft);font-size:12px;line-height:18px;color:var(--mute)}

.q-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.q{padding:24px;border-radius:var(--r-card);background:var(--primary-pale);color:var(--ink);font-size:20px;line-height:1.5;font-weight:var(--w-strong)}

.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.track{display:flex;flex-direction:column}
.track img{width:100%;max-width:280px;margin:0 auto 16px}
.track p{margin-top:4px;font-size:14px;line-height:22px}
.track-wide{grid-column:span 2;flex-direction:row;align-items:center;gap:32px}
.track-wide > div:last-child{flex:1 1 0}
.cal{flex:0 1 420px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;align-items:center;color:var(--ink);font:var(--w-strong) 14px/20px var(--font)}
.cal-row{position:relative;height:28px;border-radius:var(--r-inset);background:repeating-linear-gradient(90deg,var(--soft) 0 calc(12.5% - 2px),transparent calc(12.5% - 2px) 12.5%)}
.cal-row i{position:absolute;top:6px;bottom:6px;left:calc(var(--a) * 12.5%);width:calc(var(--n) * 12.5% - 2px);border-radius:var(--r-inset);background:var(--mute)}
.cal .mine{background:var(--primary)}
.cal-weeks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));font-size:12px;line-height:16px;font-weight:var(--w-body);color:var(--mute);text-align:center}
.cal-weeks b{font-weight:var(--w-body)}
.cal > span:nth-last-child(2){font-size:12px;font-weight:var(--w-body);color:var(--mute)}
.track .cal-key{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;line-height:18px;color:var(--mute)}
.cal-key i{width:16px;height:8px;border-radius:4px;background:var(--mute)}
.cal-key i + i{margin-left:12px}
.cal-key .mine{background:var(--primary)}
.track-roles ul{margin-top:12px}
.track-roles li{padding:10px 0;border-top:1px solid var(--hairline);color:var(--ink);font-size:24px;line-height:1.3;font-weight:var(--w-strong)}

.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.facts li{grid-column:span 2}
.facts li:nth-child(n+4){grid-column:span 3}
.facts p{margin-top:4px;font-size:14px;line-height:22px}

.closing h2{max-width:14em;font-size:var(--fs-display);line-height:1.24;font-weight:var(--w-display)}
.closing .lead{margin-top:16px;color:var(--ink)}
.contact-note{margin-top:16px;color:var(--body);font-size:14px;line-height:20px}
.footer{background:var(--band);color:var(--body);font-size:14px;line-height:20px}
.footer-row{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:16px 48px;padding:32px 0 48px}
.footer-brand{display:flex;align-items:center;gap:12px;max-width:26rem}
.footer .logo-mark{height:28px}
.footer .logo-name{margin-right:4px;font-size:16px}
.versions{display:grid;gap:4px}
.versions b{color:var(--ink);font-weight:var(--w-strong)}
.versions a{text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:1023px){
  .hero-grid,.split,.survey-grid,.answers-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .split > h2{position:static}
  .check-card{max-width:560px}
  .cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .q-grid,.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li,.facts li:nth-child(n+4){grid-column:span 3}
}
@media (max-width:860px){
  .nav-row{gap:12px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:8px 24px 16px;background:var(--canvas);border-bottom:1px solid var(--hairline)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;font-size:16px;line-height:24px}
  .nav .btn{margin-left:auto}
  .menu-btn{display:inline-flex}
  .design-tabs{margin-left:0}
}
@media (max-width:767px){
  .container{width:min(100% - 32px,1200px)}
  .band{padding:40px 0}
  .band-head{margin-bottom:24px}
  .lead{font-size:18px}
  .logo-full{display:none}
  .card,.check-card{padding:16px}
  .report{padding:0}
  .outcome{grid-template-columns:96px minmax(0,1fr);gap:4px 16px;padding:12px 16px}
  .outcome img{grid-row:span 2;width:96px}
  .outcome p{align-self:end}
  .outcome .badge{grid-column:2;justify-self:start;align-self:start}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2,.q-grid,.tracks,.stats{grid-template-columns:minmax(0,1fr)}
  .stats{padding:24px}
  .track-wide{grid-column:auto;flex-direction:column;align-items:stretch;gap:16px}
  .cal{flex:none}
  .facts li,.facts li:nth-child(n+4){grid-column:1 / -1}
  .q{font-size:18px}
  .report [data-col]{display:none}
  .report[data-view="shelf"] [data-col="shelf"],
  .report[data-view="offtake"] [data-col="offtake"],
  .report[data-view="media"] [data-col="media"],
  .report[data-view="price"] [data-col="price"]{display:table-cell}
  .report-sub{display:block;margin-left:0}
  tr > :first-child{padding-left:16px}
  tr > :last-child{padding-right:16px}
  .report-head,.report-note{padding-inline:16px}
}