/* ── brand ───────────────────────────────────────────────────── */
  :root{
    --green:#1a3a2a; --green2:#2d6a4f; --green-d:#0e281a;
    --gold:#c9a96e; --rust:#c4622d; --cream:#f2ede0;
    --ink:#1d2823; --muted:#5f6b64; --line:#e4e9e6; --bg:#fbfaf7;
    --radius:14px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* ⚠ b487 — NOT WHILE SOMEBODY IS TYPING. Gordon's screen recording of
     the records sign-in form (2026-09-21): with the keyboard up, the page
     bounced between the top and the email box, over and over. iOS Safari
     scrolls a focused box into view; with smooth scrolling on, that
     scroll is ANIMATED, the keyboard and the collapsing toolbar resize the
     page mid-animation, and Safari starts over. The marketing pages want
     smooth scrolling for their in-page links; no form wants it. So it is
     switched off the moment any field on the page has focus. */
  html:focus-within{scroll-behavior:auto}
  body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
    line-height:1.62;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
  h1{font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:800}
  h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800}
  h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
  p{margin:0 0 1em}
  a{color:var(--green2)}
  /* ⚠ Handoff graphics, 2026-08-17. A fixed HEIGHT and auto width: these
     are illustrations of different proportions, and a fixed width would
     stretch some of them. loading="lazy" because there are eleven of
     them and none is above the fold. */
  /* ⚠ A BANNER, NOT AN ICON. The handoff's industry graphics are
     1400x500 with the name set inside them, so they are used full-bleed
     across the top of the card and the duplicate heading is gone. A
     negative margin pulls them out to the card's edges. */
  /* ⚠ THE PADDING IS 26px, NOT 22 — I guessed and the banner sat inset
     with a white gutter down one side. Measured, not assumed:
     .card{padding:26px}, so the pull-out is 26 each way and the width is
     100% + 52. `overflow:hidden` on the card is what makes the top
     corners actually clip; without it the image corners poke past the
     card's own radius. */
  .card:has(.indbanner){overflow:hidden;padding-top:0}
  /* ⚠ max-width:none IS LOAD-BEARING. The global img{max-width:100%}
     rule clamps the calc back to the content box, so the banner stopped
     26px short of the right edge and looked like a mistake rather than a
     bleed. Found by rendering it, not by reading it. */
  .indbanner{display:block;width:calc(100% + 52px);max-width:none;margin:0 -26px 16px}
  /* The wide explainers, used at the size they were drawn for. */
  .explain{display:block;width:100%;height:auto;border-radius:14px;
    border:1px solid var(--line);margin:0 0 18px}
  .wrap{max-width:1100px;margin:0 auto;padding:0 22px}
  .section{padding:84px 0}
  .section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .lead{font-size:1.12rem;color:var(--muted);max-width:640px}
  .center{text-align:center}
  .center .lead{margin-left:auto;margin-right:auto}
  .eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--green2);margin:0 0 12px}

  /* ── buttons ─────────────────────────────────────────────────── */
  .btn{display:inline-block;padding:15px 28px;border-radius:12px;font-weight:700;
    text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem}
  .btn-primary{background:var(--green2);color:#fff}
  .btn-primary:hover{background:var(--green)}
  .btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
  .btn-ghost:hover{border-color:var(--green2);color:var(--green2)}
  .btn-row{display:flex;gap:12px;flex-wrap:wrap}

  /* ── header ──────────────────────────────────────────────────── */
  header{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.94);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:14px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;
    color:var(--green);text-decoration:none;letter-spacing:-.02em}
  .brand img{width:30px;height:30px;border-radius:7px}
  /* ⚠ THE LOCKUP SIZE LIVES HERE NOW, NOT IN AN INLINE style=. It was
     inline at 46px, which beat every stylesheet rule — so at 360px the
     lockup and the nav links had no room and rendered on top of each
     other ("GoDuroPortal"). A size that has to change with the viewport
     cannot be an inline attribute. */
  .brand img.lockup{width:auto;height:46px;border-radius:0}
  /* ⚠ b487 — THE WORD LOGO ONLY, AND IT MAY NOT BE SQUEEZED. Gordon,
     2026-09-21 (3307): "the logo is compressed horizontally and looks poor.
     Just use word logo and remove the hammer head to save space." The
     lockup was a flex item with a fixed height and a shrinkable width, so a
     crowded phone header squashed it sideways. The wordmark is narrower to
     begin with, and flex-shrink:0 + object-fit keep its shape whatever the
     nav beside it needs. */
  .brand{flex-shrink:0}
  .brand img.wordmark{height:30px;width:auto;flex-shrink:0;object-fit:contain}
  .nav-links{display:flex;align-items:center;gap:26px}
  .nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
  .nav-links a:hover{color:var(--green2)}
  .nav-links a.cta{background:var(--green2);color:#fff;padding:10px 18px;border-radius:10px}
  .nav-links a.cta:hover{background:var(--green)}
  /* ⚠ THE PORTAL LINK IS NOT hide-sm, AND IT SHORTENS INSTEAD. Its
     neighbours are in-page anchors — hidden on a phone you still reach
     Pricing by scrolling. The portal is a different PAGE, so hiding it
     left the footer, at the bottom of a long page, as the only way in.
     But the full label collides with the lockup at 390px ("Portal de
     gerentes" wrapped onto three lines over the mascot), so the wide
     label is swapped for a short one rather than dropped. */
  /* ⚠ THE PORTAL LINK IS AN OUTLINED BUTTON, NOT A TEXT LINK. Gordon,
     2026-08-30: "make the portal button like the see how go duro works
     button keep the current location though" — that is .btn-ghost, and it
     stays where it is in the nav rather than moving into the hero.
     ⚠ NOT .btn ITSELF. That is 15px/28px at 1rem, sized for a hero next to
     a 68px-tall header — dropping one in here makes the header taller than
     the logo. This borrows the ghost's LOOK at the nav's SIZE: 8px+2px of
     border is the same outer height as a.cta's 10px, so the two buttons
     line up instead of one sitting a pixel proud of the other. */
  .nav-links a.ghost{border:2px solid var(--line);color:var(--ink);background:#fff;
    padding:8px 16px;border-radius:10px}
  .nav-links a.ghost:hover{border-color:var(--green2);color:var(--green2)}
  .nav-links a .lbl-narrow{display:none}
  @media(max-width:820px){ .brand img.lockup{height:34px} }
  @media(max-width:820px){ .brand img.wordmark{height:24px} }
  @media(max-width:820px){
    .nav-links a.hide-sm{display:none} .nav-links{gap:16px}
    .nav-links a .lbl-wide{display:none}
    .nav-links a .lbl-narrow{display:inline}
  }

  /* ── hero ────────────────────────────────────────────────────── */
  .hero{padding:80px 0 70px;background:
    radial-gradient(1100px 420px at 78% -8%, #eef4f0 0%, transparent 62%)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
  .hero-badge{display:inline-block;background:#e8f1ec;color:var(--green);
    padding:7px 14px;border-radius:999px;font-weight:700;font-size:.85rem;margin-bottom:20px}
  .hero p.sub{font-size:1.2rem;max-width:540px;color:#3c4a43}
  .hero .fine{margin-top:20px;font-size:.95rem;color:var(--muted)}

  /* ── the phone ───────────────────────────────────────────────── */
  /* ⚠ A DRAWING OF THE APP, NOT A SCREENSHOT. It is built from the real
     wording and the real layout, and it is honest — but it is a mock-up.
     Replace it with real screenshots when there are exported ones; the
     markup is deliberately simple so a swap is an <img> tag. */
  .phone{width:290px;margin:0 auto;background:#fff;border:1px solid var(--line);
    border-radius:30px;box-shadow:0 26px 60px rgba(20,45,32,.14);overflow:hidden}
  .phone .bar{background:var(--green-d);color:#fff;padding:16px 18px 13px;font-weight:800;
    font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
  .phone .body{padding:14px}
  .tcard{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}
  .tcard .t{font-weight:700;font-size:.95rem;margin-bottom:3px}
  .tcard .m{font-size:.82rem;color:var(--muted)}
  .pill{display:inline-block;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:7px;margin-top:8px}
  .pill.u{background:#fdeaea;color:#c0341d}
  .pill.w{background:#fdf8e3;color:#8a6d10}
  .pill.l{color:var(--muted)}

  /* ── strips, grids, cards ────────────────────────────────────── */
  .strip{background:var(--green-d);color:#dfe9e3}
  .strip .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:center;
    padding-top:20px;padding-bottom:20px;font-weight:600;font-size:.95rem}
  .strip b{color:#fff}
  .grid{display:grid;gap:22px}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
  .card h3{margin-bottom:8px}
  .card p{margin:0;color:var(--muted);font-size:.97rem}
  .card .ic{font-size:1.5rem;margin-bottom:12px}

  /* ── the four steps ──────────────────────────────────────────── */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px}
  @media(max-width:820px){.steps{grid-template-columns:1fr}}
  .step{padding:24px;border-left:3px solid var(--line)}
  .step:first-child{border-left-color:var(--green2)}
  .step .n{font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--green2);
    text-transform:uppercase;margin-bottom:8px}
  .step p{margin:0;color:var(--muted);font-size:.97rem}

  /* ── translation demo ────────────────────────────────────────── */
  .tr{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;align-items:stretch}
  @media(max-width:760px){.tr{grid-template-columns:1fr}}
  .tr .side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
  .tr .who{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin-bottom:14px}
  .tr .msg{font-size:1.06rem;line-height:1.55;color:var(--ink)}
  .tr .side.b{background:var(--green-d);border-color:var(--green-d)}
  .tr .side.b .who{color:#9dbdac}
  .tr .side.b .msg{color:#fff}
  .arrow{text-align:center;color:var(--muted);font-weight:700;margin:22px 0 0;font-size:.95rem}

  /* ── pricing ─────────────────────────────────────────────────── */
  .price-card{background:#fff;border:2px solid var(--green2);border-radius:20px;
    padding:38px;max-width:460px;margin:0 auto;text-align:center}
  .price{font-size:3rem;font-weight:800;color:var(--green);line-height:1;margin:6px 0 4px}
  .price small{display:block;font-size:.95rem;font-weight:600;color:var(--muted);margin-top:10px}
  .price-list{list-style:none;padding:0;margin:26px 0;text-align:left}
  .price-list li{padding:9px 0 9px 28px;position:relative;border-bottom:1px solid var(--line)}
  .price-list li:last-child{border-bottom:0}
  .price-list li:before{content:"✓";position:absolute;left:0;color:var(--green2);font-weight:800}

  /* ── faq ─────────────────────────────────────────────────────── */
  details{background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:18px 22px;margin-bottom:10px}
  details summary{font-weight:700;cursor:pointer;list-style:none}
  details summary::-webkit-details-marker{display:none}
  details summary:after{content:"+";float:right;color:var(--green2);font-weight:800}
  details[open] summary:after{content:"–"}
  details p{margin:12px 0 0;color:var(--muted)}

  /* ── final + footer ──────────────────────────────────────────── */
  .final{background:var(--green-d);color:#fff;text-align:center}
  .final h2{color:#fff}
  .final p{color:#b9cec3;max-width:560px;margin:0 auto 26px}
  .final .btn-ghost{background:transparent;border-color:#4c6d5c;color:#fff}
  .final .btn-ghost:hover{border-color:#fff;color:#fff}
  footer{background:#152a1f;color:#93a99d;padding:40px 0;font-size:.9rem}
  footer a{color:#cfe0d6}
  .fnav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:14px}

/* ══════════════════════════════════════════════════════════════
   ADDED 2026-08-26 for the localized pages.

   ⚠ THIS FILE EXISTS BECAUSE THERE ARE NOW TWO OF EVERY PAGE.
   The CSS lived inside index.html when there was one page. With an
   English page and a Spanish one, keeping it inline means every rule
   exists twice and the second copy is wrong the first time anybody
   edits the first. That is the same fault that produced two
   4,000-line portals eighteen functions apart.
   ══════════════════════════════════════════════════════════════ */

/* A product section: words on one side, real screenshots on the other,
   alternating sides down the page. */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature .copy h2{margin-bottom:.35em}
.feature .copy p{color:var(--muted);font-size:1.06rem;max-width:34em}
/* ⚠ ALTERNATE BY POSITION, NOT BY A CLASS ON EACH SECTION. A hand-applied
   .reverse gets forgotten the moment a section is inserted in the middle,
   and the page then has two identical sides in a row with nobody noticing. */
.feature:nth-of-type(even) .copy{order:2}

/* Screenshots are 780px wide portrait phone captures. They are shown at
   half that at most — a phone screen printed large reads as a mistake. */
.shots{display:flex;gap:16px;justify-content:center;align-items:flex-start;min-width:0}
/* ⚠ flex:1 1 0 AND min-width:0, BOTH REQUIRED, AND THIS WAS A REAL BUG.
   These files are 780px wide. A flex item's default basis is `auto`,
   which means its INTRINSIC width — so three of them demanded 2340px
   inside a 570px column, overflowed it, and printed the phones straight
   across the section's own heading. `max-width` does not save you: it
   caps the drawn width while the item still claims its content width
   for layout. Rendered and looked at in Chromium, not assumed. */
.shots img{flex:1 1 0;min-width:0;width:auto;height:auto;max-width:290px;
  border-radius:18px;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(20,40,30,.13)}
.shots.one img{max-width:340px}
.shots.three img{max-width:220px}
/* A grid column is min-width:auto by default, so a wide child can push
   the column past its share instead of being clipped or shrunk. */
.feature > *{min-width:0}

.langbar{display:flex;gap:2px;align-items:center;font-size:.86rem;
  border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff}
.langbar a{display:block;padding:3px 11px;border-radius:999px;text-decoration:none;
  color:var(--muted);font-weight:700}
.langbar a[aria-current="true"]{background:var(--green);color:#fff}

.capnote{color:var(--muted);font-size:.92rem;text-align:center;margin:10px 0 0}

@media (max-width:820px){
  .feature{grid-template-columns:1fr;padding:44px 0}
  .feature:nth-of-type(even) .copy{order:0}
  .shots.three img{max-width:170px}
}


/* ⚠ THE FULL MASCOT, NOT THE MICRO MARK. Gordon, 2026-08-26: "The full
   logo (hammer with clipboard and thumb and torso and hat) needs to be
   on the front page. don't just use the hammer head/hat mini logo."
   The header keeps the micro lockup — at 46px the clipboard is illegible
   scribble and the legs are mush, which was rendered and looked at, not
   assumed. The hero is where the character has room to be a character.
   goduro-lockup-clear.png is the supplied lockup with its opaque
   off-white background flood-filled away FROM THE CORNERS ONLY, so the
   white clipboard paper inside the drawing survives. Checked by
   sampling: corners transparent, paper still white, hat still gold. */
.hero-logo{display:block;width:min(360px,74%);height:auto;margin:0 0 20px}
@media (max-width:820px){ .hero-logo{width:min(300px,68%);margin-inline:auto} }


/* ── Long-form documents (privacy policy, terms) ────────────────
   ⚠ THE PRIVACY PAGE WAS A DEAD END. Gordon, 2026-08-26: "the privacy
   page is a dead end. it needs buttons to get back to the main
   website." It had no header, no footer and exactly ONE link on the
   whole page — a mailto. Somebody reading it before signing up had to
   use the back button or leave.
   These styles let it use the site's own header and footer instead of
   its own private stylesheet, so it is part of the site rather than a
   loose file that happens to be hosted next to it. */
.doc{max-width:720px;margin:0 auto;padding:38px 0 8px}
.doc h1{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.15em}
.doc h2{font-size:1.16rem;margin-top:2em;margin-bottom:.5em}
.doc .updated{color:var(--muted);font-size:.92rem;margin-top:0}
.doc ul{padding-left:1.25em}
.doc li{margin-bottom:.55em}
.doc p,.doc li{color:#2b332e}
.backbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:18px 0 0;font-weight:700}


/* ── The hero, centred, with the product directly underneath ────
   Gordon's structure, 2026-08-26: logo · "Built for hard work." · the
   four verbs · one plain sentence about what it is · then SHOW THE
   PRODUCT IMMEDIATELY. The screenshot used to sit beside the words in a
   two-column hero; it now sits under them, which is what he asked for
   and what makes the verbs the thing you read first. */
.hero-centre .hero-copy{max-width:780px;margin:0 auto;text-align:center}
.hero-centre .hero-logo{margin:0 auto 22px}
.hero-centre h1{margin-bottom:.18em}
.hero-centre .lead{margin-left:auto;margin-right:auto;max-width:38em}
.hero-centre .btn-row{justify-content:center}
.hero-centre .shots{margin-top:38px}

/* ⚠ THE VERBS ARE THE PROMISE, so they are set like one — heavier than
   the lead, in brand green, and above it. Assign it. Communicate it.
   Track it. Know it got done. Four short sentences that say what the
   product does, immediately under the line that says who it is for. */
.verbs{font-weight:800;color:var(--green2);letter-spacing:-.01em;
  font-size:clamp(1.08rem,2.3vw,1.45rem);margin:0 0 .7em}