/* ═══════════════════════════════════════════════════════════════════════════════
   RENTAROBOTMAID.COM - the front door for Rosie.
   A 1962 domestic-employment placement card, for a robot. Cool blue-biased paper,
   Futura-era display (Jost), a typewriter for anything the agency would have
   stamped, and exactly ONE blue - hers, #0053cf, verbatim from the extension.
   Blue is for anything you can press, plus ONE bold emphasis per block of display
   type; when a sentence has to be blue, spend it on what she IS.
   Nine colours, three radii, one light world. tests/site.test.mjs is the referee
   and deploy.sh will not ship a page it rejects. README.md says why for each rule.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#eef1f6; --card:#fbfcfe; --ink:#0f172a; --muted:#5a6a80; --faint:#5f6d80;
  --rule:rgba(15,23,42,.14); --rule-soft:rgba(15,23,42,.07);
  --blue:#0053cf; --blue-deep:#0040a0; --blue-wash:rgba(0,83,207,.08);
  --brass:#8a6017; --brass-wash:rgba(138,96,23,.11);
  --shadow:0 1px 0 rgba(15,23,42,.05), 0 18px 40px -28px rgba(15,23,42,.45);
}
/* ⚠ ONE VISUAL WORLD, ON PURPOSE (2026-09-07). Ric: "the Rosie website on my desktop is
   white, on iPhone it's blue - why?" Because it carried a dark palette and his phone is in
   dark mode. Removed, and it should stay removed: this page is a printed placement card, and
   a card is paper in every light. A conversion page also has to look the SAME to every
   prospect - you cannot read a heat map or trust a test when half your visitors saw a
   different design. Every colour below is painted explicitly so the page holds on any host. */

/* ⚠ every ratio above was measured, light and dark: the smallest type on the page
   (11px typewriter labels) sits at 4.65:1 or better against whatever it is on. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 "Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.stamp{font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
h1,h2,h3{font-family:Jost,"Futura","Century Gothic",system-ui,sans-serif;font-weight:600;
  letter-spacing:-.015em;text-wrap:balance;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ── MASTHEAD ─────────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0 16px;
  border-bottom:1px solid var(--rule)}
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none}
/* her mark, flipped so the duster sweeps INTO the word - the extension's own trick */
/* 🚨 THE FLIP IS BAKED INTO THE FILE NOW (2026-09-09u). Ric: "when I try to search it, Rosie is
   facing the wrong way and when I share, Rosie's also facing the wrong way." He was right, and the
   cause was that only the CSS knew which way the brand faces: these three rules mirrored her on
   the SITE, while the favicon and the share card - which are image FILES no stylesheet can touch -
   shipped her raw. So she faced one way on the page and the other way in every tab, every Google
   suggestion and every text message. A direction that lives in a stylesheet is not a brand rule,
   it is a local correction. rosie-icon.png now faces right in the pixels. */
.lockup img{height:36px;width:auto;display:block;margin:0 -6px 0 0}
.lockup b{font-family:Jost,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em}
.lockup i{font-style:normal;color:var(--blue)}
.nav{display:flex;align-items:center;gap:8px}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;
  font-family:Jost,sans-serif;font-size:16px;font-weight:600;letter-spacing:.01em;
  padding:12px 21px;border-radius:2px;background:var(--blue);color:#fff;border:1px solid var(--blue);
  transition:background-color 140ms ease,transform 140ms ease}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--blue-wash);border-color:var(--blue);color:var(--blue);transform:none}
.btn.sm{font-size:14.5px;padding:8px 14px}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;align-items:center;
  padding:54px 0 44px}
/* 🚨 THE HEADLINE IS NO LONGER THE BIGGEST TYPE (2026-09-09y). It was 88px at weight 700, which
   is larger than every number on the page and is the mechanical cause of "cheap, not premium" -
   a numbers person reads type size as a claim about what matters, and the biggest claim was a
   joke. On the pages this buyer already trusts the largest type is a statistic. So the headline
   drops to 56-64px at 600 and the facts beside it carry the weight. */
/* ⚠ THE FACT MUST WIN AT EVERY WIDTH, which the first cut got wrong: the two clamps crossed at
   about 1200px and the headline went back to being the biggest thing on a desktop screen, which
   is the exact inversion this change exists to remove. The headline ceiling now sits below the
   fact ceiling and the vw slopes are matched. Checked at 800px and 1440px in a browser. */
.hero h1{font-size:clamp(32px,4vw,46px);line-height:1.06;font-weight:600;letter-spacing:-.028em}
.lede{margin:22px 0 0;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--muted);max-width:36ch}
.lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

/* THE QUOTE CARD - what stands beside the headline now.
   🚨 It replaced a column of industry statistics. Those were true and sourced, and they were also
   an argument about numbers standing next to a headline about going home, so the page was making
   two pitches at once and landing neither. The quote is the proof for THIS headline: the person
   who built it lived it.
   ⚠ Set large enough to be read as the second thing on the page, not as a testimonial footnote. */
.quote-card{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:30px 32px;
            align-self:center}
.qq{margin:0;font-size:clamp(19px,2.2vw,25px);line-height:1.42;font-weight:500;color:var(--ink);
    letter-spacing:-.012em}
.qw{margin:16px 0 0;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
@media (max-width:860px){ .quote-card{padding:22px 20px} }

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
section{padding:56px 0}
.head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.head h2{font-size:clamp(26px,3.4vw,34px);font-weight:600}
.head .rule{flex:1;height:1px;background:var(--rule)}

.duties{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));border:1px solid var(--rule);background:var(--card)}
.duty{padding:24px 22px;border-right:1px solid var(--rule-soft)}
.duty:last-child{border-right:0}
.duty .n{font-family:"Space Mono",monospace;font-size:11px;color:var(--blue);letter-spacing:.1em}
.duty h3{font-size:19px;margin:9px 0 7px;font-weight:600}
.duty p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ── TERMS ────────────────────────────────────────────────────────────────── */
.terms{border:2px solid var(--ink);background:var(--card);padding:34px 30px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.terms h2{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.03em}
.terms .fine{margin:12px 0 0;font-size:14.5px;color:var(--muted);max-width:46ch}
.terms .cta-row{grid-column:1/-1;margin-top:4px}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:26px 0 44px;display:flex;flex-wrap:wrap;gap:12px 22px;
  align-items:baseline;justify-content:space-between}
/* ⚠ NEVER text-transform this one: the company name is lowercase, always. */
.co{font-size:14px;color:var(--muted);text-transform:none}
.co b{color:var(--ink);font-weight:600}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted)}
.links a{text-decoration:none;border-bottom:1px solid var(--rule)}
.links a:hover{color:var(--blue);border-color:var(--blue)}

/* ── DOCUMENT PAGES (privacy, terms, 404) ────────────────────────────────── */
.doc{max-width:720px;margin:0 auto;padding:40px 22px 80px}
.doc h1{font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.03em;margin:12px 0 6px}
.doc h2{font-size:21px;margin:34px 0 10px}
.doc p,.doc li{font-size:16.5px;line-height:1.7;color:var(--muted);max-width:64ch}
.doc p b{color:var(--ink);font-weight:600}
.doc ul{padding-left:20px}
.doc .back{display:inline-block;margin-top:34px}
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 22px}
.lost .disc{width:120px;height:120px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,var(--blue-deep),var(--blue) 62%);box-shadow:0 0 0 6px var(--blue-wash)}
.lost .disc img{width:80px;height:80px}
.lost h1{font-size:clamp(30px,5vw,46px);font-weight:700;letter-spacing:-.03em}
.lost p{color:var(--muted);max-width:40ch;margin:10px auto 22px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:34px;padding:40px 0 34px}
  .terms{grid-template-columns:1fr;gap:20px}
  .duty{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .duty:last-child{border-bottom:0}
  .nav .btn.sm{padding:8px 12px}
  /* ⚠ measured at 9.2 screens before this. Desktop rhythm on a stacked phone layout is what
     makes a long page feel endless; the words are unchanged, only the air between them. */
  section{padding:34px 0}
  .head{margin-bottom:18px}
  .hero{padding:28px 0 26px}
}
@media (max-width:480px){ .nav .hide-sm{display:none} }
@media (prefers-reduced-motion:reduce){ .btn{transition:none} html{scroll-behavior:auto} }

/* ═══════════════════════════════════════════════════════════════════════════════
   STORYBRAND LAYER (2026-09-07). Ric: "can we make it like donald miller
   storytelling? i feel we can do better to get a higher conversion rate."
   The order is the framework's: a HERO with a problem, a GUIDE who has been
   there, a PLAN of three steps, a direct CTA and a transitional one, and the
   stakes on both sides. ⚠ The customer is the hero. Every headline says "you".
   Rosie is never the hero of her own page - the moment she is, it stops
   converting and starts describing.
   2026-09-12: the page is three sections now (the brief: headline, three sections,
   Hire Rosie). What survives of this layer is the two-door card (.pains) under the
   name section and the rule about who the hero is.
   ═══════════════════════════════════════════════════════════════════════════ */

/* THE PROBLEM - three costs, in the customer's own words */
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;
  border:1px solid var(--rule);background:var(--card)}
.pain{padding:24px 22px;border-right:1px solid var(--rule-soft)}
.pain:last-child{border-right:0}
.pain .k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}
.pain p{margin:10px 0 0;font-family:Jost,sans-serif;font-size:18.5px;line-height:1.4;font-weight:500;letter-spacing:-.01em}
.pain span{display:block;margin-top:8px;font-family:"Public Sans",sans-serif;font-size:14.5px;
  line-height:1.6;font-weight:400;color:var(--muted)}

/* THE MONEY, AGAINST A HIRE (2026-09-12) - two columns that must not look alike: the hire is
   plain, Rosie's column is the blue wash. Same bones as .pains so the page has one card. */
.versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--rule);background:var(--card)}
.vs{padding:24px 22px;border-right:1px solid var(--rule)}
.vs:last-child{border-right:0}
.vs.rosie{background:var(--blue-wash)}
.vs .k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.vs.rosie .k{color:var(--blue)}
.vs ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.vs li{font-size:15.5px;line-height:1.55;color:var(--muted);padding-left:18px;position:relative}
.vs li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1.5px;background:currentColor;opacity:.55}
.vs.rosie li{color:var(--ink)}
.vs .price{margin:16px 0 0;font-family:Jost,sans-serif;font-size:clamp(19px,2.4vw,24px);line-height:1.3;font-weight:600;letter-spacing:-.02em}
.vs.rosie .price{color:var(--blue)}
section .lede{margin:0 0 22px}
section .fine{margin:16px 0 0;font-size:14.5px;color:var(--muted);max-width:60ch}
.pains.two{margin:0 0 18px}

/* the language switch, in the masthead */
.lang{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.1em;padding:8px 11px;
  border:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer;border-radius:2px}
.lang:hover{border-color:var(--blue);color:var(--blue)}

@media (max-width:860px){
  .pain{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .pain:last-child{border-bottom:0}
  /* ⚠ THE VERSUS CARD MUST STACK, the same lesson the board taught at 390px on 09-07: a grid
     with minmax(0,…) tracks still lets its CONTENTS overflow. One column, the divider turns
     into a rule between the two.
     🚨 IN THIS BLOCK, NOT THE FIRST ONE. The base .versus rule sits after the first phone block
     in the file, so a stack rule placed there LOST on order (equal specificity, later wins) and
     the card shipped two columns wide at 390px for one render. The README's trap, met again. */
  .versus{grid-template-columns:1fr}
  .versus .vs{border-right:0;border-bottom:1px solid var(--rule)}
  .versus .vs:last-child{border-bottom:0}
}


/* ═══ THE HIRE FORM (2026-09-07, five fields since 09-12) ════════════════════════════════
   Every field you add costs you people, so these are the five a floor owner knows by heart:
   name, the floor, the dialer, the seats, how to reach you. Done in a minute. It posts to the
   same site-lead webhook the client sites use. */
.hireform{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:4px}
.hireform label{display:flex;flex-direction:column;gap:5px;min-width:0}
.hireform label.wide{grid-column:1/-1}
.hireform span{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.hireform input,.hireform select{font:inherit;font-size:15px;padding:11px 12px;border-radius:2px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);min-width:0;width:100%}
.hireform select{appearance:none;-webkit-appearance:none}
.hireform input:focus,.hireform select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.hireform input::placeholder{color:var(--faint);opacity:.75}
.hireform button{grid-column:1/-1;justify-content:center;margin-top:2px}
.hireform button[disabled]{opacity:.6;cursor:default}
/* the honeypot: off-screen rather than display:none, because some bots skip hidden fields */
.hireform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formnote{grid-column:1/-1;margin:0;font-size:14px;line-height:1.5;color:var(--muted);min-height:1.2em}
.formnote.ok{color:var(--blue);font-weight:600}
.formnote.bad{color:var(--brass);font-weight:600}
@media (max-width:640px){ .hireform{grid-template-columns:1fr} }