/* ==========================================================================
   ABDUL BUILDS — design system v2
   Rebuilt 2026-08-30 for the teaching offer.

   What changed and why: the old site sold "I install an AI in your business".
   The real offer is knowledge. Abdul teaches you to drive any model, on your
   own work, and you walk out able to do it alone. So the page is built like a
   syllabus you can read in one scroll: a numbered spine down the left, hairline
   rules, real artifacts, one lime signal per zone, and a single path that ends
   at payment.

   Brand source of truth: Abdul Builds/Brand/ABDUL-BUILDS-BRAND-SPEC.md.
   Ink + bone + one electric lime. Space Grotesk display, Space Mono labels.
   Hard offset shadows, never blurry. Radius only on the terminal card.
   The BLANQ orange riso system never appears here.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/SpaceMono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/SpaceMono-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0C0C0D; --ink-2:#131317; --ink-3:#1A1A20;
  --bone:#F4F1EA; --bone-2:#E8E3D6;
  --lime:#C9FF3D; --lime-dk:#6F9500;
  --muted:#8E8E86; --soft:#B9B6AE;
  --line:#26262B; --hair:rgba(244,241,234,.12);
  --hair-l:#DAD4C6; --muted-l:#7C7C74;

  --disp:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;

  --pad:clamp(20px,4.2vw,60px);
  --maxw:1240px;
  --narrow:760px;
  --spine:132px;

  --sec:clamp(52px,5.4vw,88px);
  --sec-tight:clamp(40px,4.2vw,62px);

  --ease:cubic-bezier(.16,1,.3,1);
  --t:280ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--disp);font-weight:400;
  font-size:clamp(16px,.28vw + 15px,17.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
::selection{background:var(--lime);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--lime);color:var(--ink);
  font-family:var(--mono);font-size:13px;font-weight:700;padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------- layout ---------- */
.shell{width:min(100% - var(--pad)*2,var(--maxw));margin-inline:auto}
.shell-narrow{width:min(100% - var(--pad)*2,var(--narrow));margin-inline:auto}
section{padding-block:var(--sec);position:relative}
section.tight{padding-block:var(--sec-tight)}

/* the spine: the numbered rail that turns the page into a syllabus */
.rec{display:grid;grid-template-columns:var(--spine) 1fr;gap:0 clamp(24px,3.4vw,56px);
  border-top:1px solid var(--hair);padding-top:clamp(26px,3vw,40px)}
.rec-rail{position:sticky;top:92px;align-self:start;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.rec-rail .no{display:block;color:var(--lime);font-weight:700;font-size:13px;margin-bottom:8px}
.rec-rail .lb{display:block;color:var(--muted);line-height:1.5}
@media (max-width:860px){
  .rec{grid-template-columns:1fr;gap:16px}
  .rec-rail{position:static;display:flex;gap:12px;align-items:baseline}
  .rec-rail .no{margin:0}
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.024em;line-height:1.04}
h1{font-size:clamp(37px,6.2vw,76px)}
h2{font-size:clamp(28px,3.8vw,48px);line-height:1.06}
h3{font-size:clamp(19px,1.6vw,24px);line-height:1.18;letter-spacing:-.015em}
.lede{font-size:clamp(17px,1.3vw,21px);line-height:1.55;color:var(--soft);font-weight:400}
.ey{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lime);display:inline-block}
.dim{color:var(--muted)}
.small{font-size:14.5px;line-height:1.6}
.kw{background:var(--lime);color:var(--ink);font-weight:700;padding:0 6px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.uk{color:var(--bone);font-weight:700;box-shadow:inset 0 -2px 0 var(--lime)}
.blink{display:inline-block;width:8px;height:1.05em;background:var(--lime);
  vertical-align:-2px;margin-left:3px;animation:bl 1.05s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:0 20px;min-height:50px;border:1.5px solid transparent;
  transition:transform var(--t) var(--ease),background var(--t),color var(--t),box-shadow var(--t)}
.btn .arw{width:12px;height:12px;flex:none;transition:transform var(--t) var(--ease)}
.btn:hover .arw{transform:translate(2px,-2px)}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:5px 5px 0 rgba(201,255,61,.22)}
.btn-lime:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(201,255,61,.3)}
.btn-ghost{border-color:var(--hair);color:var(--bone)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(12,12,13,.84);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}
.mark{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:7px}
.caret{width:9px;height:19px;background:var(--lime);display:inline-block;animation:bl 1.05s steps(1) infinite}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px)}
.nav-links a:not(.btn){font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--soft)}
.nav-links a:not(.btn):hover{color:var(--lime)}
.nav .btn{min-height:42px;padding:0 16px}
.lang{font-weight:700}
@media (max-width:860px){.hide-sm{display:none}}
.mnav{position:relative}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;
  display:grid;place-items:center;border:1.5px solid var(--hair)}
.mnav summary::-webkit-details-marker{display:none}
.bars,.bars::before,.bars::after{display:block;width:17px;height:1.5px;background:var(--bone);content:''}
.bars::before{transform:translateY(-5.5px)}
.bars::after{transform:translateY(4px)}
.mnav-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:216px;
  background:var(--ink-2);border:1.5px solid var(--line);padding:8px;display:grid}
.mnav-link{font-family:var(--mono);font-size:13px;padding:11px 12px;color:var(--bone) !important}
.mnav-link:hover{background:var(--ink-3);color:var(--lime) !important}
@media (min-width:861px){.mnav{display:none}}
@media (max-width:760px){.nav .btn-lime{display:none}.nav-in{min-height:58px}}

/* ---------- fold ---------- */
.fold{padding-block:clamp(48px,7vw,96px) clamp(40px,5.4vw,74px);position:relative;overflow:hidden;isolation:isolate}
.fold-grid{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.055;color:var(--bone);
  background-image:linear-gradient(currentColor 1px,transparent 1px),
                   linear-gradient(90deg,currentColor 1px,transparent 1px);
  background-size:46px 46px}
.fold-glow{position:absolute;z-index:-1;pointer-events:none;width:min(900px,92vw);aspect-ratio:1;
  right:-14%;top:-34%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,255,61,.15),transparent 70%)}
.fold-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:960px){.fold-in{grid-template-columns:1fr}}

.tag{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tag b{color:var(--bone);font-weight:700}
.tag i{width:3px;height:3px;background:var(--muted);display:block;flex:none}
.led{width:7px;height:7px;background:var(--lime);display:inline-block;margin-right:7px;
  animation:pulse 2.1s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}

/* ---------- terminal card ---------- */
.term{background:var(--ink-2);border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.term-dot{width:9px;height:9px;border-radius:50%;background:#3a3a40;display:block;flex:none}
.term-bar span:last-child{margin-left:6px}
.term-body{padding:15px 17px;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#D7D7CF}
.term-body .p{color:var(--lime)}
.term-body .c{color:#5F5F66}
.term-body b{color:var(--bone)}

/* ---------- band ---------- */
.band{border-block:1px solid var(--hair);background:var(--ink-2)}
.band-in{display:grid;grid-template-columns:repeat(4,1fr)}
.band-cell{padding:clamp(20px,2.4vw,32px) clamp(14px,1.8vw,26px);border-left:1px solid var(--hair)}
.band-cell:first-child{border-left:0}
.band-cell .k{font-weight:700;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;line-height:1}
.band-cell .k.lime{color:var(--lime)}
.band-cell .v{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:10px;line-height:1.5}
@media (max-width:760px){
  .band-in{grid-template-columns:repeat(2,1fr)}
  .band-cell:nth-child(3){border-left:0}
  .band-cell:nth-child(n+3){border-top:1px solid var(--hair)}
}

/* ---------- numbered rows ---------- */
.recs{display:grid}
.row{display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,2vw,30px);
  padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--hair)}
.row:first-child{border-top:1px solid var(--hair)}
.row .n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--lime);letter-spacing:.08em;padding-top:5px}
.row p{color:var(--soft);margin-top:9px;max-width:64ch}
.row .out{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
  margin-top:13px;display:block}
.row .out b{color:var(--bone);display:block;margin-top:5px;font-size:13px;letter-spacing:0}

/* ---------- is / is not ----------
   He asked for this explicitly. Two columns, lime for what it is, plain for
   what it is not, so nobody arrives at a session expecting the wrong thing. */
.isnot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (max-width:760px){.isnot{grid-template-columns:1fr}}
.isnot > div{background:var(--ink);padding:clamp(22px,2.6vw,32px)}
.isnot h3{margin-bottom:18px}
.isnot ul{list-style:none;display:grid;gap:13px}
.isnot li{display:flex;gap:12px;align-items:flex-start;color:var(--soft)}
.isnot li::before{content:'';flex:none;width:9px;height:9px;margin-top:9px;background:var(--line)}
.isnot .yes li::before{background:var(--lime)}
.isnot .yes h3 span{color:var(--lime)}

/* ---------- syllabus grid ---------- */
.syl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.syl article{background:var(--ink);padding:clamp(20px,2.2vw,26px)}
.syl .n{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--lime)}
.syl h3{margin-top:12px;font-size:clamp(17px,1.35vw,20px)}
.syl p{color:var(--soft);margin-top:10px;font-size:15.5px;line-height:1.58}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.quote{background:var(--ink);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.quote blockquote{font-size:17px;line-height:1.56;color:var(--bone);flex:1}
.quote figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);line-height:1.6}

/* ---------- price ---------- */
.price{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,64px);
  border:1.5px solid var(--line);background:var(--ink-2);padding:clamp(24px,3.4vw,48px)}
@media (max-width:820px){.price{grid-template-columns:1fr;gap:26px}}
.fig{font-weight:700;font-size:clamp(54px,8.4vw,98px);line-height:.9;letter-spacing:-.045em;color:var(--lime)}
.cur{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:16px;line-height:1.7}
.inc{display:grid;gap:13px;list-style:none}
.inc li{display:flex;gap:13px;align-items:flex-start;color:var(--soft)}
.inc li::before{content:'';flex:none;width:9px;height:9px;background:var(--lime);margin-top:9px}

/* ---------- FAQ ---------- */
details.q{border-bottom:1px solid var(--hair)}
details.q:first-of-type{border-top:1px solid var(--hair)}
details.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding-block:clamp(17px,1.9vw,23px);
  font-weight:700;font-size:clamp(17px,1.45vw,20px);letter-spacing:-.014em}
details.q summary::-webkit-details-marker{display:none}
details.q summary:hover{color:var(--lime)}
details.q .chev{width:19px;height:19px;flex:none;color:var(--lime);transition:transform var(--t) var(--ease)}
details.q[open] .chev{transform:rotate(45deg)}
details.q p{color:var(--soft);padding-bottom:clamp(17px,1.9vw,23px);max-width:72ch}
details.q p+p{padding-bottom:0;margin-bottom:clamp(17px,1.9vw,23px)}
details.q a{box-shadow:inset 0 -1px 0 var(--lime)}

/* ---------- media plates ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:center}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.plate{background:var(--ink-2);border:1.5px solid var(--line);padding:clamp(12px,1.4vw,18px);position:relative}
.plate figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:12px}
/* height:auto matters. The HTML height attribute stays in force without it,
   so a 998x1400 file renders in a 1400px tall box and object-fit crops it
   into a meaningless zoom on small screens. */
.plate img{width:100%;height:auto;object-fit:cover}
.plate.portrait img{aspect-ratio:4/5;object-position:50% 22%;max-height:min(60vh,540px)}

/* ---------- receipts ---------- */
.receipts{display:grid;border:1px solid var(--hair)}
.receipts a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px);border-bottom:1px solid var(--hair);
  transition:background var(--t)}
.receipts a:last-child{border-bottom:0}
.receipts a:hover{background:var(--ink-2)}
.receipts .t{font-weight:700;letter-spacing:-.015em}
.receipts .s{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:6px}
.receipts .arw{width:13px;height:13px;color:var(--lime);flex:none}

/* ---------- breadcrumbs ---------- */
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding-block:16px;border-bottom:1px solid var(--hair)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a:hover{color:var(--lime)}
.crumb .sep{color:var(--line)}
.crumb [aria-current]{color:var(--bone)}

/* ---------- sticky pay dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(12,12,13,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--hair)}
.dock .btn{flex:1;justify-content:center;min-height:48px}
.dock .dock-price{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:grid;place-content:center;padding-inline:4px;text-align:center;line-height:1.3}
.dock .dock-price b{display:block;color:var(--bone);font-size:14px;letter-spacing:0}
@media (max-width:760px){.dock{display:flex}body{padding-bottom:80px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);padding-block:clamp(32px,3.6vw,52px);background:var(--ink-2)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(22px,3vw,48px);
  padding-bottom:clamp(24px,2.8vw,38px);border-bottom:1px solid var(--hair)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:15px}
.foot-list{display:grid;gap:10px;list-style:none}
.foot-list a{font-size:14.5px;color:var(--soft)}
.foot-list a:hover{color:var(--lime)}
.foot-bot{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;
  padding-top:clamp(18px,2.2vw,28px);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--muted)}
.foot-ico{width:34px;height:34px;border:1px solid var(--hair);display:grid;place-items:center;color:var(--soft)}
.foot-ico:hover{border-color:var(--lime);color:var(--lime)}
.foot-ico svg{width:16px;height:16px}
.foot-social{display:flex;gap:9px}

/* ---------- entrance ---------- */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.rise.in{opacity:1;transform:none}
.d1{transition-delay:70ms}.d2{transition-delay:140ms}.d3{transition-delay:210ms}
.d4{transition-delay:280ms}.d5{transition-delay:350ms}
.no-js .rise{opacity:1;transform:none}

/* ---------- prose pages (disclaimer, terms, privacy) ---------- */
.prose h2{font-size:clamp(21px,2.1vw,28px);margin-top:clamp(34px,3.6vw,48px)}
.prose h3{margin-top:26px}
.prose p,.prose li{color:var(--soft);margin-top:13px}
.prose ul,.prose ol{margin-top:13px;padding-left:22px}
.prose li{margin-top:8px}
.prose strong{color:var(--bone)}
.prose a{box-shadow:inset 0 -1px 0 var(--lime)}
.prose .updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.callout{border:1.5px solid var(--line);background:var(--ink-2);padding:clamp(18px,2.2vw,26px);
  margin-top:clamp(26px,3vw,36px)}
.callout p:first-child{margin-top:0}

/* ==========================================================================
   PHONE PASS
   Most of the traffic arrives from a reel, so this is the primary surface,
   not an afterthought. Fixes here are all things that were measurably wrong:
   19px tap targets, a hard shadow clipping out of the fixed dock, and cards
   whose desktop padding made every section endless on a 375px screen.
   ========================================================================== */
@media (max-width:640px){

  /* the offset shadow reads as a rendering glitch inside a fixed bar */
  .dock .btn-lime,
  .dock .btn-lime:hover{box-shadow:none;transform:none}
  .dock{gap:12px;padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
  .dock .dock-price{font-size:10px;letter-spacing:.08em}
  .dock .dock-price b{font-size:15px}
  .dock .btn{flex:1;min-height:50px;font-size:13.5px}

  /* every link in a list becomes a real 44px target */
  .foot-list a{display:inline-block;padding-block:11px;min-height:44px}
  .foot-list{gap:2px}
  .receipts a{padding-block:18px}
  .mark{padding-block:8px}

  /* stacked calls to action should look deliberate, not orphaned */
  .cta-row{gap:10px}
  .cta-row .btn{width:100%;justify-content:center}
  .cta-row .btn .arw{margin-left:2px}

  /* tighten the reading rhythm so sections stop feeling endless */
  body{font-size:16.5px;line-height:1.56}
  h1{font-size:clamp(33px,8.6vw,40px);line-height:1.06}
  h2{font-size:clamp(25px,6.6vw,31px)}
  h3{font-size:18px}
  .lede{font-size:17px;line-height:1.5}
  :root{--sec:clamp(42px,9vw,58px);--sec-tight:clamp(34px,7vw,46px)}

  .isnot > div{padding:20px 18px}
  .isnot ul{gap:11px}
  .syl article{padding:20px 18px}
  .syl p{font-size:15px}
  .row{padding-block:20px;grid-template-columns:40px 1fr;gap:12px}
  .quote{padding:20px 18px}
  .price{padding:22px 18px}
  .fig{font-size:clamp(46px,13vw,60px)}
  .term-body{font-size:11.5px;padding:13px 14px;line-height:1.7}

  /* the fold sits under a sticky header, so it does not need a big top gap */
  .fold{padding-block:32px 40px}

  /* a lime highlight that wraps mid phrase looks broken at this width */
  .kw{padding:0 4px}
}

/* very small phones. 375 is the most common width in the wild, so the price
   anchor stays visible there and only drops below 340. */
@media (max-width:400px){
  .dock .dock-price{font-size:9.5px}
  .dock .dock-price b{font-size:14px}
  .term-body{font-size:11px}
}
@media (max-width:340px){
  .dock .dock-price{display:none}
}