/* Standard website view (#plain in index.html): the accessible, easier-to-navigate site, and what search engines read.
   Look: an old tube TV. Glowing blue screens on a dark room, channel labels, a power-on and a news crawl.
   Brand: navy #021E59 and gold #E2B740 from the logo. Space Grotesk (display), Geist (text), IBM Plex Mono (labels), VT323 (TV readouts).
   Every effect is decoration: scanlines sit behind the text, nothing flashes, motion stops for "reduce motion", and
   "more contrast" removes the scanlines and glow. Sizes are in px because the desktop's style.css sets the root
   font size to 12px. The phone clones #plain sections, so the markup stays plain and semantic. */
#plain{
  --room:#111216;--room-2:#181A20;--room-3:#20232B;--line:rgba(255,255,255,.11);--line-2:rgba(255,255,255,.2);
  --ink:#F3F5FC;--ink-2:#B4BACB;--ink-3:#8E95AA;
  --navy:#021E59;--navy-deep:#01133B;--blue:#0E37B0;--glow:#5B8CFF;--on-screen:#F5F7FF;--on-screen-2:#C9D2F5;
  --gold:#E2B740;--gold-2:#F0CB5C;--gold-hi:#F2CC5E;
  --paper:#F4F1E8;--paper-2:#E9E3D3;--paper-line:#D3CAB6;--paper-ink:#0D1B3E;--paper-ink-2:#46506E;--field:#7A705D;
  --screen:radial-gradient(130% 95% at 50% 32%,#1342C4 0%,#0B2F98 34%,#05226F 66%,#021849 100%);
  --scan:repeating-linear-gradient(180deg,rgba(0,8,30,.22) 0 1px,transparent 1px 3px);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bezel:0 0 0 clamp(6px,.9vw,12px) #0A0B0E,0 0 0 calc(clamp(6px,.9vw,12px) + 1px) #2C2F38,0 30px 80px -20px rgba(0,0,0,.8),0 0 90px -10px rgba(40,90,255,.28);
  --display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tv:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --maxw:1180px;--gut:clamp(16px,3vw,36px);--pad:max(var(--gut),calc(50% - var(--maxw) / 2));--space:clamp(44px,min(9vw,9svh),128px);
  --r:14px;--rs:clamp(18px,2.6vw,34px);
  display:none;background:var(--noise),var(--room);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;user-select:text;text-align:left;counter-reset:ch;overflow-x:clip}
body.plain{overflow:visible;height:auto;min-height:100%;background:#111216}
body.plain #plain{display:block}
body.plain #os{display:none}
html:has(body.plain){overflow:auto;height:auto;scroll-padding-top:84px;background:#111216}
/* a menu jump lands with the section's heading just under the bar, so the whole section is in view */
@media (min-width:901px){#plain > section{scroll-margin-top:calc(8px - var(--space))}#plain > :is(#find-offer,#crm,#contact){scroll-margin-top:-10px}}
#plain *,#plain *::before,#plain *::after{box-sizing:border-box}
#plain ::selection{background:var(--gold);color:var(--navy)}
#plain img{image-rendering:auto;max-width:100%;height:auto}
#plain a{color:var(--gold-hi);text-decoration-thickness:1px;text-underline-offset:.22em}
#plain a:hover{text-decoration-thickness:2px}
#plain :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
#plain #plain-top:focus{outline:none} /* focus target when the view opens; not in the tab order */
#plain h1,#plain h2,#plain h3,#plain h4{font-family:var(--display);font-weight:500;color:inherit;line-height:1.05;letter-spacing:-.02em;margin:0 0 .45em;text-wrap:balance}
#plain h1{font-size:clamp(40px,22px + 4.4vw,84px);letter-spacing:-.038em;line-height:.98}
#plain h2{font-size:clamp(31px,min(20px + 2.5vw,6.2svh),53px);letter-spacing:-.032em}
#plain h3{font-size:clamp(19px,17px + .45vw,23px);font-weight:700;letter-spacing:-.012em;line-height:1.2}
#plain p{margin:0 0 1em;max-width:68ch;text-wrap:pretty}
#plain b,#plain strong{font-weight:600}
#plain button{font-family:var(--body)}

/* every block runs full width, with its content held to one measure */
#plain>*{padding-inline:var(--pad)}
#plain section{padding-block:var(--space);margin:0;max-width:none;border-top:0;position:relative}
#plain section > h2[data-eyebrow]::after{content:"";display:block;height:1px;margin:.42em 0 0;background:linear-gradient(90deg,var(--line-2),transparent 70%)}
/* the phosphor glow on headings */
#plain h1,#plain h2{text-shadow:0 0 18px rgba(91,140,255,.28)}
#plain .p-hl{font-style:normal;color:var(--gold-hi);text-shadow:0 0 22px rgba(242,204,94,.35)}

/* ---------- labels and buttons ---------- */
.p-eyebrow,.p-tag{font:500 13px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.p-eyebrow::before,.p-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(226,183,64,.6);flex:none}
#plain .p-cta{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--navy);font:600 17px/1.2 var(--body);text-decoration:none;padding:15px 22px 15px 24px;border:0;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 4px 0 #6E5210,0 0 26px -4px rgba(226,183,64,.55);transition:transform .15s,box-shadow .15s,background-color .15s;cursor:pointer;margin:0}
#plain .p-cta::after{content:"↗";font-family:var(--display);transition:transform .15s}
#plain .p-cta:hover{background:var(--gold-2);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 5px 0 #6E5210,0 0 34px -2px rgba(226,183,64,.7);text-decoration:none;text-shadow:-1px 0 rgba(200,0,70,.35),1px 0 rgba(0,120,255,.35)}
#plain .p-cta:hover::after{transform:translate(2px,-2px)}
#plain .p-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #6E5210}
#plain .p-cta:focus-visible{outline-color:#fff}
#plain .p-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.3em}
#plain .p-link::after{content:"↗";font-family:var(--display);color:var(--gold-hi);transition:transform .15s}
#plain .p-link:hover::after{transform:translate(2px,-2px)}
#plain .p-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:30px 0 0;max-width:none}
#plain .p-alt{font-weight:600;color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
#plain .p-alt:hover{text-decoration-thickness:2.5px}
#plain .p-login{font-size:16px;color:var(--on-screen-2)}
#plain .p-switch{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.2 var(--mono);color:var(--ink-2);background:none;border:0;padding:8px 0;cursor:pointer;white-space:nowrap}
#plain .p-switch::before{content:"";width:18px;height:14px;flex:none;border:1.5px solid currentColor;border-radius:2px;background:linear-gradient(var(--gold),var(--gold)) 2px 2px/5px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 3px/100% 1.5px no-repeat}
#plain .p-switch:hover{color:var(--ink);text-decoration:underline}
/* the TV effects switch: a little power light shows whether it's on */

/* ---------- header ---------- */
#plain .p-head{position:relative;z-index:20;display:flex;align-items:center;gap:28px;min-height:72px;max-width:none;margin:0;padding-block:0;padding-inline:var(--gut);background:rgba(14,15,19,.9);border-bottom:1px solid var(--line);counter-reset:nav}
@media (min-width:761px){#plain .p-head{position:sticky;top:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
#plain .p-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 20px/1 var(--display);letter-spacing:-.02em;flex:none}
#plain .p-brand img{width:34px;height:34px;border-radius:7px;display:block;box-shadow:0 0 18px -2px rgba(91,140,255,.5)}
#plain .p-head nav{display:flex;gap:4px 18px;flex:1;flex-wrap:wrap}
#plain .p-head nav a{display:inline-flex;align-items:baseline;gap:6px;color:var(--ink);text-decoration:none;font-weight:500;font-size:15.5px;padding:6px 0;border-bottom:2px solid transparent}
#plain .p-head nav a:hover{border-bottom-color:var(--gold)}
#plain .p-head-acts{display:flex;align-items:center;gap:16px;flex:none}
#plain .p-head-cta{font-weight:600;font-size:15px;color:var(--navy);background:var(--gold);text-decoration:none;padding:9px 15px;border-radius:999px;white-space:nowrap}
#plain .p-head-cta:hover{background:var(--gold-2);color:var(--navy)}
@media (max-width:1400px){#plain .p-head-cta{display:none}}
@media (max-width:1200px){
  #plain .p-head{flex-wrap:wrap;gap:0 16px;padding-top:12px}
  #plain .p-head-acts{margin-left:auto}
  #plain .p-head nav{order:3;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding:6px 0 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  #plain .p-head nav::-webkit-scrollbar{display:none}
  #plain .p-head nav a{white-space:nowrap}
  html:has(body.plain){scroll-padding-top:120px}
}
@media (max-width:520px){#plain .p-head-acts{gap:10px}#plain .p-switch{font-size:12px}#plain .p-head .p-switch{display:none}}
@media (max-width:400px){#plain .p-brand{font-size:18px;gap:8px}#plain .p-brand img{width:30px;height:30px}#plain .p-head{gap:0 10px}}

/* ---------- glowing screens: the hero, the Find, the CRM, contact and a few cards ---------- */
#plain :is(.tv-screen,#find-offer,#crm,#contact){background:var(--scan),var(--noise),var(--screen);color:var(--on-screen)}
#plain :is(#find-offer,#crm,#contact){margin:clamp(24px,4vw,56px) var(--gut);padding-inline:calc(var(--pad) - var(--gut));border-radius:var(--rs);box-shadow:var(--bezel),inset 0 0 140px rgba(0,6,30,.6);overflow:hidden}
#plain :is(#find-offer,#crm,#contact) h2{color:#fff}
#plain :is(#find-offer,#crm,#contact) .p-tag{color:var(--on-screen-2)}
#plain :is(.tv-screen,#find-offer,#crm,#contact) a:not(.p-cta){color:var(--gold-hi)}

/* ---------- hero: the TV set ---------- */
#plain .p-hero{padding-block:clamp(16px,min(4vw,3svh),56px) clamp(28px,min(5vw,5svh),72px);padding-inline:var(--gut)}
#plain .tv{max-width:1340px;margin:0 auto;padding:clamp(10px,1.6vw,22px);border-radius:clamp(22px,3vw,44px);background:linear-gradient(180deg,#2A2D35,#16181D 30%,#0E0F13);box-shadow:0 0 0 1px #33363F,0 1px 0 1px rgba(255,255,255,.06) inset,0 50px 100px -30px #000,0 0 120px -20px rgba(40,90,255,.3)}
#plain .tv-screen{position:relative;overflow:hidden;border-radius:clamp(16px,2.4vw,34px) / clamp(20px,3vw,40px);padding:clamp(26px,min(5vw,6svh),72px) clamp(22px,5vw,72px) clamp(70px,min(8vw,10svh),100px);display:grid;grid-template-columns:minmax(0,12fr) minmax(0,9fr);column-gap:clamp(32px,5vw,72px);align-items:start;
  grid-template-areas:"eyebrow fig" "h1 fig" "lead fig" "steps fig" "acts fig";box-shadow:inset 0 0 160px rgba(0,6,30,.75),inset 0 0 0 1px rgba(255,255,255,.08)}
/* the slow bright band that rolls down an old screen */
#plain .tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(170,200,255,.07) 50%,transparent) 0 -40%/100% 26% no-repeat;z-index:3}
#plain .p-hero .p-eyebrow{grid-area:eyebrow;color:var(--on-screen-2)}
#plain .p-hero h1{grid-area:h1;font-size:clamp(36px,min(16px + 3.5vw,7.2svh),72px);max-width:15ch;margin-bottom:.45em;color:#fff;text-shadow:0 0 24px rgba(120,160,255,.45)}
#plain .p-lead{grid-area:lead;font-size:clamp(18px,min(17px + .4vw,2.7svh),22px);line-height:1.5;margin-bottom:.6em;color:var(--on-screen)}
#plain .p-sub{grid-area:sub;color:var(--on-screen-2);max-width:58ch}
#plain .p-steps{grid-area:steps;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;font:500 21px/1.2 var(--display);letter-spacing:-.02em;margin:8px 0 0;color:#fff}
#plain .p-steps span{display:inline-flex;align-items:center}
#plain .p-steps span:not(:last-child)::after{content:"";width:34px;height:1.5px;margin:0 12px;background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 9px)}
#plain .p-hero-acts{grid-area:acts}
#plain .p-hero .p-link{color:#fff}
/* two screenshots, picture-in-picture */
#plain .p-hero-fig{grid-area:fig;align-self:center;margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
#plain .p-shot{display:flex;flex-direction:column;position:relative;z-index:1;border-radius:10px;overflow:hidden;background:#0A0B0E;padding:0 6px 6px;box-shadow:0 0 0 1px #2C2F38,0 30px 60px -24px rgba(0,0,0,.9)}
#plain .p-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:6px}
#plain .p-shot em{order:-1;display:flex;align-items:center;gap:8px;padding:7px 4px;font:400 15px/1.1 var(--tv);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
#plain .p-shot em::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#E5484D;box-shadow:0 0 8px 1px rgba(229,72,77,.7)}
#plain .p-shot-a{grid-column:1 / span 10;grid-row:1;align-self:start}
#plain .p-shot-b{grid-column:4 / span 9;grid-row:1;align-self:start;margin-top:40%;z-index:2}
#plain .p-hero-fig figcaption{grid-column:1 / -1;grid-row:2;font-size:14px;color:var(--on-screen-2);margin-top:18px;max-width:52ch}
/* the news crawl along the bottom of the screen (decorative; the same words are on the page) */
#plain .tv-crawl{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;overflow:hidden;padding-block:12px;background:rgba(1,10,40,.72);border-top:1px solid rgba(255,255,255,.14)}
#plain .tv-crawl p{flex:none;display:flex;gap:28px;margin:0;padding-right:28px;max-width:none;white-space:nowrap;font:400 clamp(18px,1vw + 12px,22px)/1 var(--tv);letter-spacing:.1em;text-transform:uppercase;color:var(--on-screen)}
#plain .tv-crawl b{font-weight:400;color:var(--gold-hi)}
/* the cabinet below the screen: brand plate, readouts, two knobs */
#plain .tv-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px clamp(18px,3vw,40px);padding:clamp(10px,min(2vw,2svh),24px) clamp(8px,2vw,24px) clamp(6px,1vw,10px)}
#plain .tv-brand{font:700 clamp(16px,1vw + 10px,20px)/1 var(--display);letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(180deg,#F4F5F8,#8A8F9C 55%,#D9DCE3);-webkit-background-clip:text;background-clip:text;color:transparent}
#plain .tv-knobs{display:flex;gap:14px}
#plain .tv-knobs i{width:clamp(30px,3vw,40px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4A4E58,#14161B 70%);box-shadow:0 0 0 2px #0A0B0E,0 3px 6px rgba(0,0,0,.6);position:relative}
#plain .tv-knobs i::after{content:"";position:absolute;left:50%;top:12%;width:2px;height:32%;margin-left:-1px;border-radius:2px;background:var(--gold)}
#plain .tv-knobs i + i::after{transform:rotate(130deg);transform-origin:50% 120%}
#plain .p-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#plain .p-facts li{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:8px;background:#0A0B0E;box-shadow:inset 0 0 0 1px #262932}
#plain .p-facts span{font:500 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
#plain .p-facts b{font:400 clamp(17px,min(.8vw + 13px,2.6svh),23px)/1.15 var(--tv);letter-spacing:.04em;color:var(--gold-hi);text-shadow:0 0 10px rgba(242,204,94,.35)}
@media (max-width:1000px){#plain .p-facts{grid-template-columns:repeat(2,minmax(0,1fr))}#plain .tv-panel{grid-template-columns:minmax(0,1fr) auto}#plain .tv-panel .p-facts{grid-column:1 / -1;grid-row:2}}
@media (max-width:900px){
  #plain .tv-screen{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "h1" "lead" "steps" "acts" "fig"}
  #plain .p-hero h1{max-width:16ch}
  #plain .p-hero-fig{margin-top:40px}
}
@media (max-width:520px){#plain .p-facts{grid-template-columns:minmax(0,1fr)}#plain .tv-knobs i{width:26px}}
/* laptop screens: keep the whole TV, facts panel included, above the fold */
@media (min-width:901px) and (max-height:1000px){
  #plain .p-hero{padding-block:clamp(12px,2svh,24px) clamp(20px,3svh,40px)}
  #plain .tv{padding:clamp(10px,min(1.6vw,1.8svh),22px)}
  #plain .tv-screen{grid-template-columns:minmax(0,13fr) minmax(0,8fr);padding-top:clamp(22px,4.5svh,48px);padding-bottom:clamp(64px,8.5svh,84px)}
  #plain .p-hero h1{font-size:clamp(34px,min(16px + 3.5vw,6.4svh),64px);margin-bottom:.35em}
  #plain .p-shot-b{margin-top:30%}
  #plain .p-hero-fig figcaption{margin-top:10px;line-height:1.45}
  #plain .tv-panel{padding-top:clamp(8px,1.4svh,16px)}
  #plain .p-facts li{padding:8px 12px;gap:2px}
}

/* ---------- Sound familiar? channel tiles ---------- */
#plain #problems{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:14px clamp(32px,5vw,80px);align-items:end}
#plain #problems > h2{margin:0}
#plain #problems > .p-intro{margin:0;color:var(--ink-2);font-size:clamp(17px,16px + .3vw,19px);max-width:46ch}
#plain .p-problems{grid-column:1 / -1;list-style:none;padding:0;margin:clamp(28px,4vw,52px) 0 0;counter-reset:pr;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
#plain .p-problems li{counter-increment:pr;position:relative;display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px);background:var(--room-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);font-size:16px;line-height:1.55;transition:transform .2s,box-shadow .2s,border-color .2s}
#plain .p-problems li:hover{transform:translateY(-2px);border-color:rgba(91,140,255,.55);box-shadow:0 0 0 1px rgba(91,140,255,.25),0 20px 40px -20px rgba(40,90,255,.5)}
#plain .p-problems li b{display:block;font:700 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
/* the one most firms start with is on a lit screen */
#plain .p-problems li:first-child{grid-column:span 2;min-height:min(230px,30svh);justify-content:flex-end;background:var(--scan),var(--noise),var(--screen);border-color:transparent;box-shadow:0 0 0 6px #0A0B0E,0 0 0 7px #2C2F38,inset 0 0 90px rgba(0,6,30,.6);color:var(--on-screen-2);font-size:18px}
#plain .p-problems li:first-child b{font:500 clamp(25px,18px + 1.2vw,36px)/1.12 var(--display);letter-spacing:-.03em;color:#fff;max-width:26ch;text-shadow:0 0 20px rgba(120,160,255,.4)}
#plain .p-problems li.p-problems-cta{background:transparent;border:1.5px dashed var(--line-2);justify-content:center;align-items:flex-start;gap:12px}
#plain .p-problems li.p-problems-cta:hover{transform:none;box-shadow:none;border-color:var(--gold)}
@media (max-width:1000px){#plain .p-problems{grid-template-columns:repeat(2,minmax(0,1fr))}#plain .p-problems li:first-child{grid-column:1 / -1}}
@media (max-width:900px){#plain #problems{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){#plain .p-problems{grid-template-columns:minmax(0,1fr)}#plain .p-problems li:first-child{min-height:0}}

/* ---------- Find. Fix. Support.: three sets, the middle one switched on ---------- */
#plain #how{background:linear-gradient(180deg,transparent,rgba(40,90,255,.06) 50%,transparent)}
#plain .p-process{--g:clamp(18px,2.4vw,32px);list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;gap:0 var(--g);counter-reset:s}
#plain .p-process li{counter-increment:s;grid-row:span 4;display:grid;grid-template-rows:subgrid;position:relative;background:var(--room-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
#plain .p-process li::before{content:counter(s);font:400 clamp(40px,7svh,56px)/.9 var(--tv);color:var(--gold-hi);margin-bottom:18px;text-shadow:0 0 16px rgba(242,204,94,.35)}
#plain .p-process h3{margin:0 0 .4em;font-size:clamp(24px,20px + .8vw,30px);font-weight:500;letter-spacing:-.025em;color:var(--ink)}
#plain .p-process p{color:var(--ink-2);font-size:16px;margin:0 0 22px}
#plain .p-process .p-get{align-self:end;margin:0;padding:14px 16px;border-radius:10px;background:#0C0D11;box-shadow:inset 0 0 0 1px var(--line);font:400 13.5px/1.55 var(--mono);color:var(--ink)}
#plain .p-process li:nth-child(2){background:var(--scan),var(--noise),var(--screen);border-color:transparent;box-shadow:0 0 0 6px #0A0B0E,0 0 0 7px #2C2F38,inset 0 0 90px rgba(0,6,30,.6),0 0 60px -10px rgba(40,90,255,.4)}
#plain .p-process li:nth-child(2) h3{color:#fff}
#plain .p-process li:nth-child(2) p{color:var(--on-screen-2)}
#plain .p-process li:nth-child(2) .p-get{background:rgba(1,10,40,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--on-screen)}
#plain .p-process li:not(:last-child)::after{content:"→";content:"→" / "";position:absolute;z-index:2;top:50%;right:calc(var(--g) / -2 - 18px);width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--navy);font:700 18px/1 var(--display);box-shadow:0 0 0 4px var(--room),0 0 16px rgba(226,183,64,.5)}
@media (max-width:900px){
  #plain .p-process{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:calc(var(--g) + 8px)}
  #plain .p-process li{grid-row:auto;grid-template-rows:none}
  #plain .p-process li:not(:last-child)::after{content:"↓";content:"↓" / "";top:auto;right:auto;bottom:calc(var(--g) / -2 - 22px);left:50%;margin:0 0 0 -18px}
}

/* ---------- the Find: a broadcast with its ticket ---------- */
#plain #find-offer{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(36px,6vw,96px);align-items:start}
#plain #find-offer > *{grid-column:1}
#plain #find-offer > p{color:var(--on-screen);font-size:18px}
#plain #find-offer .p-cta{justify-self:start;margin-top:12px}
#plain #find-offer .p-list{grid-column:2;grid-row:1 / span 6;list-style:none;margin:0;padding:22px 26px 0;background:var(--paper);color:var(--paper-ink);border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.2),10px 12px 0 rgba(1,10,40,.65);overflow:hidden;transform:rotate(1deg)}
#plain #find-offer .p-list::before{content:"THE FIND · INCLUDED";content:"THE FIND · INCLUDED" / "";display:block;font:400 20px/1.2 var(--tv);letter-spacing:.1em;color:var(--paper-ink-2);padding-bottom:8px}
#plain #find-offer .p-list li{padding:12px 0 12px 30px;border-top:1px dashed var(--paper-line);font-size:16px;position:relative}
#plain #find-offer .p-list li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23E2B740' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
#plain #find-offer .p-list li:first-child{border-top:0}
/* the price is the ticket's tear-off stub */
#plain #find-offer .p-list li:last-child{margin:12px -26px 0;padding:22px 26px 24px;background:radial-gradient(circle at 0 0,#0B2F98 11px,transparent 11.5px),radial-gradient(circle at 100% 0,#0B2F98 11px,transparent 11.5px),var(--paper-2);border-top:2px dashed var(--paper-line)}
#plain #find-offer .p-list li:last-child::before{display:none}
#plain #find-offer .p-list li:last-child b{display:block;font:500 clamp(30px,22px + 1.6vw,44px)/1.05 var(--display);letter-spacing:-.05em;color:var(--navy);margin-bottom:8px}
#plain #find-offer .p-list a{color:var(--navy)}
@media (max-width:900px){#plain #find-offer{grid-template-columns:minmax(0,1fr)}#plain #find-offer .p-list{grid-column:1;grid-row:auto;margin:20px 0 28px;transform:none}}

/* ---------- How a project starts: the TV guide ---------- */
#plain .p-list{padding-left:20px}
#plain .p-numbered{--ip:clamp(24px,3vw,40px);list-style:none;position:relative;margin:clamp(28px,4vw,48px) 0 0;padding:var(--ip);counter-reset:st;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;background:var(--room-2);border:1px solid var(--line);border-radius:18px}
#plain .p-numbered::before{content:"";position:absolute;top:calc(var(--ip) + 19px);left:calc(var(--ip) + 20px);right:calc(var(--ip) + (100% - 2 * var(--ip) - 80px) / 5 - 20px);height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px)}
#plain .p-numbered li{counter-increment:st;position:relative;padding-top:60px;font:500 18px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink)}
#plain .p-numbered li::before{content:counter(st);position:absolute;top:0;left:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--room);border:1.5px solid var(--gold);font:400 20px/1 var(--tv);color:var(--gold-hi)}
#plain .p-numbered li:first-child::before{background:var(--gold);color:var(--navy);box-shadow:0 0 14px rgba(226,183,64,.6)}
#plain .p-numbered li[data-note]::after{content:attr(data-note);display:table;margin-top:12px;padding:4px 9px;border-radius:6px;background:#0C0D11;box-shadow:inset 0 0 0 1px var(--line-2);font:400 17px/1.15 var(--tv);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#plain .p-numbered .p-why{display:block;margin-top:8px;font:400 15px/1.5 var(--body);letter-spacing:0;color:var(--ink-2)}
#plain .p-numbered li:nth-child(2)::after{background:var(--gold);box-shadow:none;color:var(--navy)}
@media (max-width:900px){
  #plain .p-numbered{grid-template-columns:minmax(0,1fr);gap:0}
  #plain .p-numbered::before{top:calc(var(--ip) + 20px);bottom:calc(var(--ip) + 20px);left:calc(var(--ip) + 19px);right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 11px)}
  #plain .p-numbered li{padding:8px 0 28px 60px;min-height:40px}
  #plain .p-numbered li:last-child{padding-bottom:0;background:var(--room-2)}
}

/* ---------- Projects: monitors ---------- */
#plain #work > p{color:var(--ink-2);font-size:18px}
#plain .pj-plain-h{margin:clamp(40px,5vw,64px) 0 6px;font-size:clamp(22px,18px + .8vw,28px);font-weight:500;letter-spacing:-.025em}
#plain .pj-plain-sub{margin:0 0 24px;color:var(--ink-2);opacity:1}
#plain .pj-plain{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
#plain .pj-plain li{background:var(--room-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
#plain .pj-plain li:hover{transform:translateY(-3px);border-color:rgba(91,140,255,.55);box-shadow:0 0 0 1px rgba(91,140,255,.25),0 24px 48px -24px rgba(40,90,255,.55)}
#plain .pj-plain img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border:0;background:#0A0B0E;box-shadow:inset 0 0 0 1px var(--line)}
#plain .pj-plain .pj-pb{padding:20px 22px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
#plain .pj-plain h4{font:500 22px/1.15 var(--display);letter-spacing:-.02em;margin:2px 0 0;color:var(--ink)}
#plain .pj-plain p{margin:0;font-size:15.5px;color:var(--ink-2)}
#plain .pj-plain p b{color:var(--ink)}
#plain .pj-kind{display:inline-flex;align-items:center;gap:7px;font:400 16px/1.1 var(--tv);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:#0C0D11;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
#plain .pj-kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
#plain .pj-kind.client::before{background:#E5484D;box-shadow:0 0 6px 1px rgba(229,72,77,.7)}
#plain .pj-kind.crm{background:var(--gold);color:var(--navy);box-shadow:none}
#plain .pj-kind.crm::before{background:var(--navy)}
#plain .pj-plain .pj-meta{font:400 13px/1.5 var(--mono);opacity:1;color:var(--ink-3)}
#plain .pj-plain .pj-meta + .pj-meta,#plain .pj-pb .pj-meta:last-child{font:italic 400 14px/1.5 var(--body);margin-top:auto;padding-top:8px}
#plain .pj-plain .p-case-link{margin-top:6px}
#plain .pj-soonbox{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--scan),var(--noise),#0C0D11;font:400 20px var(--tv);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* client work, and the flagship demo: wide cards with the picture beside the words */
#plain #work > ul:first-of-type{grid-template-columns:minmax(0,1fr)}
#plain #work > ul:first-of-type li,#plain #work > ul:last-of-type li:first-child{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
#plain #work > ul:last-of-type li:first-child{grid-column:1 / -1}
#plain #work > ul:first-of-type img,#plain #work > ul:first-of-type .pj-soonbox,#plain #work > ul:last-of-type li:first-child img{height:100%}
#plain #work > ul:first-of-type .pj-pb,#plain #work > ul:last-of-type li:first-child .pj-pb{padding:clamp(22px,3vw,40px);justify-content:center}
#plain #work > ul:first-of-type h4,#plain #work > ul:last-of-type li:first-child h4{font-size:clamp(24px,20px + .9vw,32px)}
#plain #work > p:last-child{margin-top:clamp(36px,5vw,56px)}
@media (max-width:1000px){#plain .pj-plain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#plain .pj-plain{grid-template-columns:minmax(0,1fr)}}
@media (max-width:800px){
  #plain #work > ul:first-of-type li,#plain #work > ul:last-of-type li:first-child{display:flex}
  #plain #work > ul:first-of-type img,#plain #work > ul:first-of-type .pj-soonbox,#plain #work > ul:last-of-type li:first-child img{height:auto}
}
/* the coaching build has no screenshots to show, so it gets a lit screen */
#plain .pj-plain li.pj-textonly{background:var(--scan),var(--noise),var(--screen);border-color:transparent;color:var(--on-screen-2)}
#plain .pj-plain li.pj-textonly:hover{border-color:var(--gold)}
#plain .pj-plain li.pj-textonly .pj-pb{padding:clamp(26px,3.4vw,48px);gap:10px}
#plain .pj-plain li.pj-textonly .pj-pb > *{max-width:66ch}
#plain .pj-plain li.pj-textonly h4{color:#fff;font-size:clamp(24px,20px + .9vw,32px)}
#plain .pj-plain li.pj-textonly p,#plain .pj-plain li.pj-textonly .pj-meta{color:var(--on-screen-2)}
#plain .pj-plain li.pj-textonly p b{color:#fff}
#plain .pj-plain li.pj-textonly .pj-kind{background:rgba(1,10,40,.6)}
#plain .pj-plain li.pj-textonly .p-quote blockquote p{color:#fff}

/* ---------- Projects on a TV: one project per channel, and a remote beside the set to change it (plain.js) ---------- */
#plain #work.has-tv > :is(h3.pj-plain-h,p.pj-plain-sub,ul.pj-plain,p.pj-intro){display:none}
#plain .pj-tv{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"set dock";gap:clamp(18px,2.6vw,40px);align-items:center;margin-top:clamp(18px,min(3.4vw,3.4svh),44px)}
/* the line about the remote sits right above it, so you can read it and press a button without scrolling */
#plain .pj-dock{grid-area:dock;display:grid;justify-items:center;align-content:center;gap:clamp(12px,2.2svh,22px);width:clamp(210px,19vw,256px)}
#plain .pj-hint{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
#plain .pj-more{display:none}
#plain .pj-set{grid-area:set;min-width:0;padding:clamp(10px,1.4vw,18px);border-radius:clamp(20px,2.8vw,40px);background:linear-gradient(180deg,#2A2D35,#16181D 30%,#0E0F13);box-shadow:0 0 0 1px #33363F,0 1px 0 1px rgba(255,255,255,.06) inset,0 40px 80px -30px #000,0 0 110px -24px rgba(40,90,255,.32)}
#plain .pj-screen{position:relative;overflow:hidden;display:grid;border-radius:clamp(14px,2.2vw,30px) / clamp(18px,2.8vw,36px);background:var(--scan),var(--noise),var(--screen);box-shadow:inset 0 0 150px rgba(0,6,30,.75),inset 0 0 0 1px rgba(255,255,255,.08);color:var(--on-screen-2);touch-action:pan-y}
/* every channel sits in the same spot, so the set keeps one height whichever channel is on */
#plain .pj-ch{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.6vw,40px);align-items:center;padding:clamp(18px,min(3.4vw,4svh),48px) clamp(20px,3vw,44px);visibility:hidden;opacity:0}
#plain .pj-ch.is-on{visibility:visible;opacity:1}
#plain .pj-ch.pj-ch-text{grid-template-columns:minmax(0,1fr);padding-inline:clamp(28px,5vw,80px)}
#plain .pj-ch-art img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:10px;background:#0A0B0E;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 26px 50px -22px rgba(0,0,20,.85)}
#plain .pj-ch .pj-pb{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
#plain .pj-ch h4{font:500 clamp(24px,min(16px + 1.2vw,4.4svh),38px)/1.08 var(--display);letter-spacing:-.025em;color:#fff;margin:4px 0 2px;text-shadow:0 0 22px rgba(120,160,255,.45)}
#plain .pj-ch p{margin:0;font-size:15px;line-height:1.5;color:var(--on-screen-2);max-width:62ch}
#plain .pj-ch p b{display:block;margin-bottom:6px;font:500 17px/1.35 var(--display);letter-spacing:-.01em;color:#fff}
#plain .pj-ch .pj-kind{background:rgba(1,10,40,.6)}
#plain .pj-ch .pj-kind.crm{background:var(--gold)}
#plain .pj-ch .pj-meta{margin-top:2px;font:italic 400 13px/1.45 var(--body);color:var(--on-screen-2);opacity:.85}
#plain .pj-ch .p-quote blockquote p{color:#fff}
#plain .pj-osd{position:absolute;z-index:4;top:clamp(10px,1.4vw,18px);right:clamp(16px,2.2vw,28px);font:400 clamp(20px,1.6vw,26px)/1 var(--tv);letter-spacing:.08em;color:var(--gold-hi);text-shadow:0 0 8px rgba(242,204,94,.7);pointer-events:none}
/* a burst of static when the channel changes */
#plain .pj-screen::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:var(--noise),repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),#3F4A66}
@keyframes pj-zap{0%{opacity:1;background-position:0 0,0 0}40%{opacity:.85;background-position:60px 90px,0 2px}100%{opacity:0;background-position:120px 30px,0 0}}
@media (prefers-reduced-motion:no-preference){#plain .pj-screen.pj-zap::before{animation:pj-zap .34s steps(5) both}}
/* the remote */
#plain .pj-remote{width:clamp(150px,12vw,184px);padding:22px 18px 20px;border-radius:46px 46px 38px 38px;background:linear-gradient(160deg,#2C2F38,#17191F 55%,#101115);box-shadow:0 0 0 1px #34373F,inset 0 1px 0 rgba(255,255,255,.08),0 34px 60px -26px #000;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"led led" "lcd lcd" "prev next" "keys keys" "brand brand";justify-items:center;gap:14px 12px}
#plain .pj-led{grid-area:led;width:8px;height:8px;border-radius:50%;background:#4D1B1D;box-shadow:inset 0 0 2px #000}
#plain .pj-led.on{background:#FF5A5C;box-shadow:0 0 8px 2px rgba(255,90,92,.75)}
#plain .pj-lcd{grid-area:lcd;justify-self:stretch;min-width:0;margin:0;padding:8px 10px 7px;border-radius:8px;background:#0B1528;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 6px rgba(0,0,0,.6);text-align:center}
#plain .pj-lcd b{display:block;font:400 24px/1 var(--tv);letter-spacing:.08em;color:var(--gold-hi)}
#plain .pj-lcd small{display:block;margin-top:5px;font:400 12px/1.25 var(--mono);color:var(--on-screen-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#plain .pj-prev{grid-area:prev}
#plain .pj-next{grid-area:next}
#plain :is(.pj-prev,.pj-next){width:54px;height:54px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--navy);background:radial-gradient(circle at 50% 32%,#F6D77A,#E2B740 58%,#BC9124);box-shadow:0 4px 0 #7A5E14,0 10px 18px -8px #000}
#plain :is(.pj-prev,.pj-next) svg{width:24px;height:24px}
#plain :is(.pj-prev,.pj-next):hover{filter:brightness(1.07)}
#plain :is(.pj-prev,.pj-next):active{transform:translateY(3px);box-shadow:0 1px 0 #7A5E14,0 4px 10px -6px #000}
#plain .pj-keys{grid-area:keys;justify-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#plain .pj-keys button{height:34px;padding:0;border:0;border-radius:10px;cursor:pointer;background:#2B2E37;color:var(--ink);font:400 21px/1 var(--tv);box-shadow:0 3px 0 #0E0F12,inset 0 1px 0 rgba(255,255,255,.08)}
#plain .pj-keys button:hover{background:#353945}
#plain .pj-keys button[aria-pressed=true]{background:#3A4152;color:var(--gold-hi)}
#plain .pj-keys button:active{transform:translateY(2px);box-shadow:0 1px 0 #0E0F12}
#plain .pj-remote button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
#plain .pj-brand{grid-area:brand;font:600 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
#plain .pj-say{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:901px) and (max-height:820px){#plain .pj-remote{padding:16px 16px 14px;row-gap:10px}#plain .pj-keys button{height:28px;font-size:19px}#plain :is(.pj-prev,.pj-next){width:48px;height:48px}}
@media (max-width:900px){
  /* on a narrow screen the remote sits above the set, so its buttons stay put while the channel changes height */
  #plain .pj-tv{grid-template-columns:minmax(0,1fr);grid-template-areas:"dock" "set"}
  #plain .pj-dock{width:100%;gap:14px}
  #plain .pj-hint{max-width:56ch;text-align:center;font-size:14.5px}
  #plain .pj-ch:not(.pj-open) :is(.pj-desc,.pj-meta){display:none}
  #plain .pj-ch-art img{max-height:20svh}
  #plain .pj-ch{gap:14px;padding:16px 18px 18px}
  #plain .pj-ch .pj-pb{gap:8px}
  #plain .pj-ch .p-case-link{margin-top:2px}
  #plain .pj-hint{font-size:14px;line-height:1.45}
  #plain .pj-tv{gap:16px}
  #plain .pj-more{display:inline-block;padding:0;border:0;background:none;cursor:pointer;font:500 15px/1.4 var(--body);color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
  #plain .pj-ch{grid-template-columns:minmax(0,1fr);align-items:start}
  #plain .pj-ch:not(.is-on){display:none}
  #plain .pj-remote{width:min(100%,420px);grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev lcd next";align-items:center;padding:10px 12px;border-radius:999px;gap:12px}
  #plain .pj-led,#plain .pj-keys,#plain .pj-brand,#plain .pj-osd{display:none}
}
/* short phones: a smaller picture so the remote and the whole channel fit together */
@media (max-width:900px) and (max-height:760px){
  #plain .pj-ch-art img{max-height:15svh}
  #plain .pj-ch{gap:10px;padding:12px 14px 14px}
  #plain .pj-dock{gap:10px}
  #plain .pj-hint{font-size:13px}
}
@media (max-width:900px) and (max-height:700px){#plain .pj-ch-art img{max-height:11svh}#plain .pj-remote{padding-block:6px}}
#plain .pj-plain li.pj-textonly .p-quote figcaption{color:var(--on-screen-2)}

/* ---------- the CloseEase CRM: a lit band, two demo screens stacked on the right ---------- */
#plain #crm{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(36px,6vw,96px);align-items:start}
#plain #crm > *{grid-column:1}
#plain #crm > p:not(.p-tag):not(.p-acts){color:var(--on-screen-2)}
#plain #crm::before,#plain #crm::after{content:"";grid-column:2;grid-row:1 / span 8;align-self:center;aspect-ratio:16/10;border-radius:10px;box-shadow:0 0 0 6px #0A0B0E,0 0 0 7px #2C2F38,0 40px 80px -30px #000}
#plain #crm::before{width:86%;margin-bottom:22%;background:#0A0B0E url("assets/projects/flows-1.webp") top left/cover no-repeat}
#plain #crm::after{position:relative;z-index:1;width:78%;margin:24% 0 0 22%;background:#0A0B0E url("assets/projects/quote-1.webp") top left/cover no-repeat}
#plain #crm ul{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:12px}
#plain #crm ul li{position:relative;padding-left:32px;color:var(--on-screen-2)}
#plain #crm ul li b{color:#fff}
#plain #crm ul li::before{content:"";position:absolute;left:0;top:.36em;width:18px;height:18px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23021E59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
#plain #crm .p-price{color:var(--gold-hi)}
#plain #crm .p-quote blockquote p{color:#fff}
#plain #crm .p-quote figcaption{color:var(--on-screen-2)}
@media (max-width:900px){#plain #crm{grid-template-columns:minmax(0,1fr)}#plain #crm::before,#plain #crm::after{grid-column:1;grid-row:auto}#plain #crm::before{order:1;margin:44px 0 0;width:88%}#plain #crm::after{order:2;margin:-34% 0 0 12%;width:88%}}

/* ---------- blog: listings ---------- */
#plain .p-posts{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);border:0}
#plain .p-posts li{position:relative;display:flex;flex-direction:column;gap:14px;min-height:210px;padding:clamp(20px,2.2vw,28px);background:var(--room-2);border:1px solid var(--line);border-radius:var(--r);transition:transform .2s,box-shadow .2s,border-color .2s}
#plain .p-posts li:hover{transform:translateY(-2px);border-color:rgba(91,140,255,.55);box-shadow:0 0 0 1px rgba(91,140,255,.25),0 20px 40px -20px rgba(40,90,255,.5)}
#plain .p-posts li:focus-within{outline:3px solid var(--gold);outline-offset:3px}
#plain .p-posts li::after{content:"Read the post ↗";content:"Read the post ↗" / "";margin-top:auto;font:600 15px/1.2 var(--body);color:var(--gold-hi)}
#plain .p-posts a{font:500 clamp(20px,18px + .4vw,23px)/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);text-decoration:none}
#plain .p-posts a::before{content:"";position:absolute;inset:0;border-radius:inherit}
#plain .p-posts a:focus-visible{outline:none}
#plain .p-date{order:-1;font:400 19px/1.2 var(--tv);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);white-space:nowrap}
#plain #blog > p a{font-weight:600;color:var(--ink);text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.3em}
@media (max-width:900px){#plain .p-posts{grid-template-columns:minmax(0,1fr)}#plain .p-posts li{min-height:0}}

/* ---------- about: a small set with the founder on it, then the one line that sums it up ---------- */
#plain #about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(36px,6vw,96px);align-items:start}
#plain #about > *{grid-column:2}
#plain #about > .p-founder{grid-column:1;grid-row:1 / span 4}
#plain #about > p{color:var(--ink-2)}
#plain #about > p:first-of-type{font-size:clamp(19px,17px + .45vw,22px);line-height:1.5;color:var(--ink)}
#plain #about a{color:var(--gold-hi)}
#plain .p-founder{margin:0;position:relative;aspect-ratio:4/5;border-radius:22px / 28px;overflow:hidden;background:var(--scan),var(--noise),var(--screen);display:grid;place-items:center;box-shadow:0 0 0 clamp(8px,1vw,12px) #0A0B0E,0 0 0 calc(clamp(8px,1vw,12px) + 1px) #2C2F38,inset 0 0 100px rgba(0,6,30,.7),0 30px 70px -24px #000,0 0 70px -10px rgba(40,90,255,.35)}
#plain .p-founder img{width:100%;height:100%;object-fit:cover}
#plain .p-founder .mono-g{width:44%;filter:drop-shadow(0 0 14px rgba(140,175,255,.6))}
#plain .p-founder figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 12px;border-radius:8px;background:rgba(1,10,40,.78);font:400 17px/1.2 var(--tv);letter-spacing:.08em;text-transform:uppercase;color:var(--on-screen-2)}
#plain .p-founder figcaption b{font-weight:400;color:#fff}
#plain #about > .p-pull{grid-column:1 / -1;position:relative;margin:clamp(48px,6vw,80px) 0 0;padding:clamp(32px,4vw,52px) 0 0 .62em;border-top:1px solid var(--line-2);max-width:30ch;font:500 clamp(30px,18px + 2.4vw,52px)/1.1 var(--display);letter-spacing:-.03em;color:#fff;text-shadow:0 0 22px rgba(120,160,255,.4)}
#plain #about > .p-pull::before{content:"“";position:absolute;left:0;color:var(--gold-hi)}
@media (max-width:900px){#plain #about{grid-template-columns:minmax(0,1fr)}#plain #about > *,#plain #about > .p-founder{grid-column:1;grid-row:auto}#plain #about > .p-founder{width:min(100%,300px);margin:12px 0 40px 12px}}

/* ---------- FAQ ---------- */
#plain .p-faq{display:block;margin:clamp(28px,4vw,48px) 0 0;columns:3 280px;column-gap:clamp(14px,1.6vw,20px)}
#plain .p-faq > div{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,20px);padding:clamp(20px,2.2vw,26px);background:var(--room-2);border:1px solid var(--line);border-radius:var(--r)}
#plain .p-faq dt{font:600 19px/1.3 var(--display);letter-spacing:-.01em;margin:0 0 10px;padding:0;border:0;color:var(--ink)}
#plain .p-faq dt::before{content:"Q.";content:"Q." / "";margin-right:8px;font:400 21px/1 var(--tv);color:var(--gold-hi)}
#plain .p-faq dd{margin:0;padding:0;border:0;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:none}
#plain .p-faq a{color:var(--gold-hi)}

/* ---------- contact: the last lit screen, with a paper form ---------- */
#plain #contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:clamp(32px,6vw,96px);align-items:start}
#plain #contact > *{grid-column:1}
#plain #contact h2[data-eyebrow]::after{background:linear-gradient(90deg,rgba(255,255,255,.3),transparent 70%)}
#plain #contact .p-form{grid-column:2;grid-row:1 / -1}
#plain .p-contact-lead{font-size:clamp(18px,16px + .4vw,21px);line-height:1.55;color:var(--on-screen)}
#plain .p-next{list-style:none;margin:10px 0 30px;padding:0;counter-reset:nx;max-width:52ch}
#plain .p-next li{counter-increment:nx;position:relative;padding:14px 0 14px 48px;border-top:1px solid rgba(255,255,255,.16);color:var(--on-screen-2);font-size:16px}
#plain .p-next li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
#plain .p-next li::before{content:counter(nx);position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--navy);font:400 20px/1 var(--tv)}
#plain .p-next li b{color:#fff;font-weight:600}
#plain .p-email{font:500 15px/1.4 var(--mono);color:var(--on-screen-2);margin:0 0 10px}
@media (max-width:900px){#plain #contact{grid-template-columns:minmax(0,1fr);grid-template-rows:none}#plain #contact .p-form{grid-column:1;grid-row:auto;margin-top:24px}}
#plain .p-form{display:grid;gap:6px;max-width:none;background:var(--paper);color:var(--paper-ink);border-radius:16px;padding:clamp(22px,3.4vw,40px);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 30px 60px -30px rgba(0,0,0,.7)}
#plain .p-form label{font-weight:600;font-size:15px;margin-top:10px}
#plain .p-form label:first-of-type{margin-top:0}
#plain .opt{font-weight:400;color:var(--paper-ink-2);font-size:.9em}
#plain .p-form input,#plain .p-form textarea{font:400 16px/1.4 var(--body);color:var(--paper-ink);background:#fff;border:1.5px solid var(--field);border-radius:10px;padding:12px 14px;width:100%;min-height:48px;box-shadow:none;margin:0}
#plain .p-form textarea{resize:vertical;min-height:132px}
#plain .p-form :focus-visible{outline:3px solid var(--navy);outline-offset:2px}
#plain .p-form input:focus-visible,#plain .p-form textarea:focus-visible{border-color:var(--navy)}
#plain .p-form button[type=submit]{justify-self:start;margin-top:18px}
/* laptop screens: tighter framed sections so each one fits on a single screen */
@media (min-width:901px) and (max-height:1000px){
  #plain :is(#find-offer,#crm,#contact){padding-block:clamp(32px,5svh,72px)}
  #plain #crm{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  #plain #crm ul{gap:6px;margin-bottom:.9em}
  #plain #crm :is(p,li){font-size:16px;line-height:1.5}
  #plain #crm h2{margin-bottom:.4em}
  #plain #crm .p-price{margin-top:6px;font-size:26px}
  #plain #crm .p-acts{margin-top:18px;gap:10px 22px}
  #plain .p-problems{margin-top:clamp(16px,2.4svh,36px);gap:14px}
  #plain .p-problems li{padding:20px 24px;line-height:1.5}
  #plain .p-problems li:first-child{min-height:0}
  #plain .p-faq{margin-top:clamp(16px,2.4svh,36px)}
  #plain .p-faq > div{padding:16px 22px;margin-bottom:12px}
  #plain .p-faq dt{margin-bottom:6px}
  #plain .p-faq dd{line-height:1.5}
  #plain #about > .p-founder{grid-row:1 / span 5}
  #plain #about > .p-pull{grid-column:2;margin-top:clamp(12px,2.4svh,28px);padding:clamp(14px,2.4svh,24px) 0 0 .62em;max-width:none;font-size:clamp(22px,min(1.4vw + 10px,3.8svh),34px)}
  #plain .p-posts li:nth-child(n+4){display:none}
  #plain .p-next{margin-bottom:20px}
  #plain .p-next li{padding-block:10px}
  #plain .p-form{gap:4px;padding:clamp(20px,3svh,32px) clamp(22px,3vw,36px)}
  #plain .p-form label{margin-top:6px}
  #plain .p-form input{min-height:42px;padding-block:9px}
  #plain .p-form textarea{min-height:96px;height:104px}
  #plain .p-form button[type=submit]{margin-top:12px}
}
#plain .p-form button[type=submit]:focus-visible{outline-color:var(--navy)}
#plain .p-form button[type=submit]:disabled{opacity:.6;cursor:progress}
#plain .p-form a{color:var(--navy)}
#plain .p-note{font-size:14px;color:var(--paper-ink-2);opacity:1;margin:14px 0 0}
#plain .p-status{font:500 14px/1.45 var(--mono);color:var(--navy);margin:6px 0 0}
#plain .p-status:empty{display:none}

/* ---------- footer: end of the broadcast ---------- */
#plain .p-foot{position:relative;display:block;max-width:none;margin:0;background:#0A0B0E;color:var(--ink-2);padding-block:clamp(56px,7vw,88px) 28px;font-size:16px;border-top:1px solid var(--line);overflow:hidden}
#plain .p-foot::after{content:"CloseEase";content:"CloseEase" / "";display:block;margin:clamp(28px,4vw,48px) 0 -0.24em;font:700 clamp(64px,17vw,250px)/.9 var(--display);letter-spacing:-.05em;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(150,180,255,.28);text-shadow:0 0 40px rgba(40,90,255,.25);white-space:nowrap;user-select:none}
#plain .p-foot a{color:var(--ink);text-decoration:none}
#plain .p-foot a:hover{color:var(--gold-hi);text-decoration:underline}
.p-foot-cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:32px 48px;padding-bottom:40px;border-bottom:1px solid var(--line)}
#plain .p-foot-brand{margin:0;line-height:1.7}
#plain .p-foot-brand b{display:inline-flex;align-items:center;gap:10px;margin-bottom:6px;font:700 24px/1.2 var(--display);letter-spacing:-.02em;color:#fff}
#plain .p-foot-brand b::before{content:"";width:30px;height:30px;border-radius:6px;background:url("assets/logo.svg") center/cover}
#plain .p-foot nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;align-content:start}
#plain .p-foot-contact{margin:0;line-height:2}
#plain .p-linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
#plain .p-linkish:hover{color:var(--gold-hi);text-decoration:underline}
#plain .p-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin:0;padding-top:24px;max-width:none;font:500 13px/1.4 var(--mono);letter-spacing:.04em}
#plain .p-foot .p-switch{color:var(--ink);padding:4px 0}
#plain .p-foot .p-switch:hover{color:var(--gold-hi)}
@media (max-width:860px){.p-foot-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){#plain .p-foot nav{grid-template-columns:minmax(0,1fr)}}


/* ---------- motion: power-on, the rolling band, the crawl and sections tuning in ---------- */
@keyframes tv-on{0%{transform:scale(1.04,.006);filter:brightness(2.2) saturate(.2)}40%{transform:scale(1,.006);filter:brightness(2)}70%{transform:scale(1,1.015);filter:brightness(1.25)}100%{transform:none;filter:none}}
@keyframes tv-fade{from{opacity:0}to{opacity:1}}
@keyframes tv-roll{from{background-position:0 -40%}to{background-position:0 140%}}
@keyframes tv-crawl{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:no-preference){
  #plain .tv-screen{animation:tv-on .85s cubic-bezier(.2,.7,.2,1) both}
  #plain .tv-screen > :not(.tv-crawl){animation:tv-fade .5s .55s both}
  #plain .tv-screen::after{animation:tv-roll 9s 1.2s linear infinite}
  #plain .tv-crawl p{animation:tv-crawl 36s linear infinite}
  #plain .tv-crawl:hover p{animation-play-state:paused}
  #plain.fx-tune > section:not(.p-hero):not(.is-tuned) > *{opacity:0;transform:translateY(16px);filter:blur(4px)}
  #plain.fx-tune > section:not(.p-hero) > *{transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}
  html:has(body.plain){scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){#plain *,#plain *::before,#plain *::after{transition:none!important;animation:none!important}}

/* ---------- a high-contrast preference: plain screens, no glow ---------- */
@media (prefers-contrast:more){
  #plain{--scan:linear-gradient(transparent,transparent);--noise:linear-gradient(transparent,transparent);--ink-2:#D6DAE6;--on-screen-2:#E4E9FB}
  #plain :is(h1,h2,.p-hl,.p-pull){text-shadow:none}
}
@media (forced-colors:active){#plain .tv-crawl,#plain .tv-screen::after{display:none}}

/* ---------- odds and ends ---------- */
#plain .ph{background:#fff3a6;border:1px dashed #b38f00;padding:0 4px;color:#000}
.skip{position:fixed;left:12px;top:-80px;z-index:10000;background:#E2B740;color:#021E59;padding:10px 14px;border:2px solid #021E59;border-radius:8px;font:600 15px/1.2 system-ui,sans-serif;text-decoration:none}
.skip:focus{top:12px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Without JavaScript, small screens still get the standard site (phone.js takes over when it runs) */
@media (max-width:760px){html:not(.m) body:not(.plain) #os{display:none}html:not(.m) body:not(.plain) #plain{display:block}html:not(.m) body:not(.plain){overflow:auto;height:auto}html:not(.m){overflow:auto;height:auto}html:not(.m) #plain .p-switch{display:none}}

/* the CRM price line */
#plain .p-price{margin:22px 0 0;font:400 30px/1.2 var(--tv);letter-spacing:.04em;color:var(--gold-hi)}
#plain .p-price-more{display:block;margin-top:6px;font:400 15px/1.45 var(--body);letter-spacing:0;color:var(--on-screen-2)}

/* client quotes (CE_CONFIG.quotes): drafts only show with ?quotes=draft */
#plain .p-quote{margin:22px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold);max-width:62ch}
#plain .p-quote blockquote{margin:0}
#plain .p-quote blockquote p{margin:0;font:500 1.06rem/1.55 var(--body);color:var(--ink);text-wrap:pretty}
#plain .p-quote.big blockquote p{font:500 clamp(1.15rem,1rem + .5vw,1.4rem)/1.45 var(--display);letter-spacing:-.01em}
#plain .p-quote figcaption{margin-top:10px;font:500 .8rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#plain .q-draft{display:inline-block;margin-bottom:10px;padding:3px 9px;border-radius:6px;background:#FDF0C4;border:1px dashed #9A6B00;color:#5C4000;font:600 .74rem/1.3 var(--mono);letter-spacing:.04em}
/* small laptop screens (about 760px tall or less once the browser bar is counted): tighter still, so each
   section fits in one view; the project details fold behind "More about this project", as on phones */
@media (min-width:901px) and (max-height:760px){
  #plain .p-hero-fig figcaption{display:none}
  #plain .p-hero .p-eyebrow{margin-bottom:12px}
  #plain .p-hero-acts{margin-top:18px}
  #plain .p-problems{gap:10px;margin-top:12px}
  #plain .p-problems li{padding:14px 18px;font-size:15px;gap:6px}
  #plain .p-problems li b{font-size:17.5px}
  #plain .p-problems li:first-child{font-size:16px}
  #plain .p-problems li:first-child b{font-size:clamp(22px,4.2svh,30px)}
  #plain .p-process li{padding:14px 22px}
  #plain .p-process li::before{font-size:36px;margin-bottom:10px}
  #plain :is(#find-offer,#crm,#contact){padding-block:24px}
  #plain #crm ul{gap:2px}
  #plain #crm :is(p,li){line-height:1.45}
  #plain #crm .p-price{font-size:24px}
  #plain #crm .p-acts{margin-top:12px}
  #plain .pj-ch:not(.pj-open) :is(.pj-desc,.pj-meta){display:none}
  #plain .pj-more{display:inline-block;padding:0;border:0;background:none;cursor:pointer;font:500 15px/1.4 var(--body);color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
  #plain .pj-keys{display:none}
  #plain #crm h2{margin-bottom:.3em}
  #plain #about > p:first-of-type{font-size:18px}
  #plain .p-faq > div{padding:12px 18px;margin-bottom:10px}
  #plain .p-faq dt{font-size:17px}
  #plain .p-faq dd{font-size:15px;line-height:1.45}
  #plain .p-contact-lead{font-size:18px}
  #plain .p-next li{padding-block:8px}
  #plain .p-form input{min-height:38px;padding-block:7px}
  #plain .p-form textarea{min-height:72px;height:84px}
  #plain .p-posts li{min-height:0;padding:18px 22px}
}