/* Shared shell for the product pages.
   The landing page carries the sketchbook engine and needs all of its CSS
   inline; these pages need none of it, so they get their own sheet rather
   than a copy of that one. Same paper, same faces, same measurements. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:block;
  src:url(/landing-pages/meng-to-sketchbook/instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:block;
  src:url(/landing-pages/meng-to-sketchbook/instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(/landing-pages/meng-to-sketchbook/newsreader.woff2) format('woff2')}

:root{
  --paper:#ece7dc;
  --ink:#2b2721;
  --ink-soft:rgba(43,39,33,.78);
  --ink-faint:rgba(43,39,33,.70);
  --hairline:rgba(43,39,33,.14);
  --earth:#9a6a3e;
  --accent:#9a3412;
  --display:'Instrument Serif',"New York",Georgia,'Times New Roman',serif;
  --font:'Newsreader',"New York",Georgia,'Times New Roman',serif;
  --track-caps:.24em;
  --track-nav:.06em;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:104px}
@media (max-width:640px){html{scroll-padding-top:78px}}
body{
  font-family:var(--font);font-weight:400;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(43,39,33,.85);color:var(--paper)}

/* The landing page's painting, held to a band behind the masthead only —
   enough to say it is the same house, not enough to sit under any prose. */
.paper-top{
  position:absolute;inset:0 0 auto;height:clamp(320px,42vh,460px);z-index:-1;pointer-events:none;
  background:url(/landing-pages/meng-to-sketchbook/bg-wash.jpg) center top / cover no-repeat;
  opacity:.55;
}
.paper-top:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(236,231,220,.55) 0%,rgba(236,231,220,.86) 55%,var(--paper) 100%);
}

/* ---------------- masthead ---------------- */
.top{
  position:sticky;top:0;z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding-inline:clamp(16px,4vw,48px);padding-block:18px 22px;text-align:center;
  background:linear-gradient(180deg,rgba(240,236,226,.96),rgba(240,236,226,.78));
  -webkit-backdrop-filter:blur(14px) saturate(.95);backdrop-filter:blur(14px) saturate(.95);
  border-bottom:1px solid var(--hairline);
}
.top .name{display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);font-size:clamp(24px,2.4vw,30px);letter-spacing:.01em;line-height:1}
.top .name .mark{height:1.15em;width:auto;display:block}
.top nav{display:flex;gap:clamp(14px,2vw,26px);font-size:15px;align-items:center;letter-spacing:var(--track-nav)}
.top nav a{color:var(--ink);transition:color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--earth)}
.nav-products{display:none}
@media (max-width:640px){
  .top{padding-block:13px 16px;gap:8px}
  .top .name{font-size:20px}
  .top nav{gap:12px;font-size:13px;flex-wrap:wrap;justify-content:center}
}
/* Five items will not sit on a phone line: at 375 they touch both edges and
   by 360 "Contact" orphans onto a row of its own. Below this the three
   product links fold into the single Products link they came from, which
   also matches how the landing page reads. */
@media (max-width:560px){
  .top{padding-inline:20px}
  .top nav{gap:16px;font-size:13.5px}
  .nav-prod{display:none}
  .nav-products{display:inline}
}
/* Wide tracking on a small screen costs more than it buys. */
@media (max-width:430px){
  .eyebrow{letter-spacing:.14em}
  .crumb{letter-spacing:.14em}
}

/* ---------------- page ---------------- */
.wrap{max-width:920px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.crumb{
  font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-faint);margin:clamp(34px,6vh,64px) 0 14px;
}
.crumb a:hover{color:var(--ink)}
.eyebrow{
  font-size:clamp(10px,1.4vw,11px);font-weight:600;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--accent);margin:0 0 8px;
}
h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,7vw,68px);line-height:1.02;letter-spacing:.005em;margin:0 0 4px;
}
h1 .sub{font-size:.4em;color:var(--ink-soft);letter-spacing:0;display:block;margin-top:8px}
.lede{
  font-size:clamp(17px,2.1vw,21px);line-height:1.6;color:var(--ink-soft);
  margin:14px 0 22px;max-width:60ch;
}
.live{
  display:inline-block;font-size:clamp(12px,1.5vw,13px);letter-spacing:var(--track-nav);
  text-decoration:underline;text-decoration-color:rgba(154,52,18,.5);text-underline-offset:5px;
  transition:text-decoration-color .2s;
}
.live:hover{text-decoration-color:var(--accent)}

.rule{height:1px;background:var(--hairline);margin:clamp(34px,6vh,56px) 0}
h2{
  font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;margin:0 0 18px;
}
h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,3vw,27px);line-height:1.2;margin:0 0 10px;
}
p{font-size:clamp(14.5px,1.8vw,16.5px);line-height:1.72;color:var(--ink-soft);margin:0 0 14px;max-width:70ch}
b,strong{font-weight:600;color:var(--ink)}

.highlights{list-style:none;margin:0 0 18px;padding:0}
.highlights li{
  position:relative;padding-left:17px;margin-bottom:11px;
  font-size:clamp(14px,1.7vw,15.5px);line-height:1.66;color:var(--ink-soft);max-width:70ch;
}
.highlights li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#c2673a;
}

.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,46px)}
@media (max-width:760px){.cols{grid-template-columns:1fr;gap:26px}}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.chips li{
  font-size:clamp(10.5px,1.3vw,11.5px);padding:4px 11px;border-radius:999px;
  border:1px solid rgba(194,103,58,.42);color:var(--accent);background:rgba(253,245,239,.6);
}

/* Numbers the cover pages actually measured. */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(10px,1.6vw,16px)}
.metric{
  border:1px solid var(--hairline);border-radius:3px;padding:clamp(14px,2vw,20px);
  background:rgba(253,250,245,.5);text-align:center;
}
.metric b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(26px,4vw,36px);line-height:1;color:var(--ink);margin-bottom:7px;
}
.metric span{
  font-size:10px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-faint);
}

.cta{
  border-top:1px solid var(--hairline);margin-top:clamp(34px,6vh,56px);
  padding:clamp(28px,5vh,48px) 0 clamp(40px,7vh,72px);text-align:center;
}
.cta h3{margin-bottom:6px}
.cta p{margin-inline:auto;text-align:center}
/* The second, quieter ask under a primary button — the service enquiry on a
   page whose main job is now a sign-up. Small enough not to compete with it. */
.cta-alt{font-size:13.5px;color:var(--ink-faint);margin-top:18px}
.cta-alt a{text-decoration:underline;text-decoration-color:rgba(154,52,18,.5);text-underline-offset:4px}
.cta-alt a:hover{text-decoration-color:var(--accent)}
.btn{
  display:inline-block;margin-top:10px;padding:12px 26px;border:1px solid var(--ink);
  border-radius:999px;font-size:clamp(13px,1.6vw,14px);letter-spacing:var(--track-nav);
  color:var(--ink);transition:background .2s,color .2s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
/* The one action we most want taken on a page. Filled by default so it reads
   as primary next to an outlined .btn; hover inverts back to the outline so
   the pair still behaves like one family. */
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{background:transparent;color:var(--ink)}

/* ---------------- sign-up: buttons, trial line, plan grid ---------------- */
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.entry-note{
  font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-faint);margin:16px 0 0;
}
@media (max-width:430px){.entry-note{letter-spacing:.12em}}

/* Three or one, never two: with three plans an auto-fit grid drops to two
   columns on tablets and leaves the third card orphaned on a row of its own. */
.plans{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.8vw,18px)}
@media (min-width:840px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--hairline);border-radius:3px;padding:clamp(18px,2.4vw,24px);
  background:rgba(253,250,245,.5);
}
/* The recommended plan carries the accent the rest of the page reserves for
   links, so it reads as the suggestion without a second colour entering. */
.plan.featured{border-color:rgba(194,103,58,.5);background:rgba(253,245,239,.62)}
.plan-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  margin:0;padding:2px 11px;border-radius:999px;background:var(--accent);color:var(--paper);
  font-size:9.5px;letter-spacing:var(--track-caps);text-transform:uppercase;white-space:nowrap;
}
.plan-name{
  font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 8px;
}
.plan-price{
  font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(28px,3.6vw,38px);line-height:1;margin:0 0 8px;
}
.plan-price small{
  font-family:var(--font);font-size:13px;color:var(--ink-faint);margin-left:5px;letter-spacing:0;
}
/* The annual rate, under the monthly headline. It carries the accent because
   it is the one line on the card that argues for spending more up front.
   Two lines tall whether or not it wraps, so cards stay level: at a 262px
   column it wraps, and a card whose rate fits one line must not ride up. */
.plan-save{font-size:12.5px;line-height:1.4;color:var(--accent);margin:-3px 0 10px;min-height:2.8em}
/* Enterprise has no annual rate to show, so it holds the space one occupies:
   2.8em of text plus that margin pair. Without this its bullets start 42px
   above its neighbours'. Same reason .plan-for is held to two lines. */
.plan:not(:has(.plan-save)) .plan-for{margin-top:42px}
.plan-for{font-size:13.5px;line-height:1.5;color:var(--ink-faint);margin:0 0 14px;min-height:3em}
.plan ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.plan li{
  position:relative;padding-left:15px;margin-bottom:8px;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}
.plan li::before{
  content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:#c2673a;
}
/* Buttons sit on the card's own baseline, so drop .btn's own top margin and
   let them fill the card instead of centring at their text width. */
.plan .btn{margin-top:0;text-align:center;padding-inline:14px}
.plan-foot{font-size:13px;line-height:1.65;color:var(--ink-faint);margin-top:18px;max-width:70ch}
.plan-foot a{text-decoration:underline;text-decoration-color:rgba(43,39,33,.28);text-underline-offset:4px}
.plan-foot a:hover{text-decoration-color:var(--ink)}
/* One column below 840px, so nothing needs to line up with anything and the
   space reserved for alignment only opens gaps. */
@media (max-width:839px){
  .plan-for{min-height:0}
  .plan-save{min-height:0}
  .plan:not(:has(.plan-save)) .plan-for{margin-top:0}
}

/* Same sign-off as the landing page, brush stroke and all, so the pages read
   as one site rather than three. Values copied from verbodh.html's .rule.short
   and .foot rather than approximated. */
.rule-brush{
  display:block;width:min(420px,52vw);margin:clamp(30px,6vh,64px) auto;
  height:clamp(26px,4vw,46px);
  background:url(/landing-pages/meng-to-sketchbook/divider.png) center / 100% auto no-repeat;
  opacity:.4;
}
.foot{
  font-size:11.5px;letter-spacing:clamp(.10em,1.4vw,.24em);text-transform:uppercase;
  color:var(--ink-faint);text-align:center;padding:0 clamp(16px,5vw,48px) 44px;
  overflow-wrap:anywhere;line-height:1.9;
  /* .foot is a <p>, so the 70ch measure meant for prose was boxing it to
     roughly 380px on the left and centring the text inside that box. */
  max-width:none;
}
.foot a{text-decoration:underline;text-decoration-color:rgba(43,39,33,.28);text-underline-offset:4px}
.foot a:hover{text-decoration-color:var(--ink)}
.foot-legal{font-size:.86em;letter-spacing:var(--track-nav);text-transform:none}