/* ==========================================================================
   OFFLINE — shared stylesheet
   Outsourced operations for growing Australian businesses.

   Refactored from the approved reference build (per-page .o0–.o13 classes +
   inline styles) into one readable, scoped stylesheet. Rendering is unchanged.
   All rules are scoped under #offline-site.

   Colour tokens (the only five in use):
     paper    #F5F3EF   page background / text on dark
     ink      #1C1B19   primary text
     grey     #8A867F   labels, secondary text, link underlines
     hairline #D6D3CC   1px rules, form field underlines
     black    #2A2723   dark sections + primary button
   Fonts: Archivo (display) + IBM Plex Mono (everything else).
   ========================================================================== */

:root{
  --paper:#F5F3EF;
  --ink:#1C1B19;
  --grey:#8A867F;
  --hairline:#D6D3CC;
  --black:#2A2723;
}

/* --- Base / reset ------------------------------------------------------- */
#offline-site{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
#offline-site *{box-sizing:border-box}

#offline-site a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--grey);
}
#offline-site a:hover{color:var(--grey)}

#offline-site input,
#offline-site textarea,
#offline-site select,
#offline-site button{font-family:'IBM Plex Mono',monospace}

#offline-site input:focus,
#offline-site textarea:focus{border-bottom:1px solid var(--ink) !important}

#offline-site button[type=submit]:hover{background:var(--ink) !important}

/* Visible keyboard focus (accessibility). Inputs keep the ink underline above. */
#offline-site a:focus-visible,
#offline-site button:focus-visible,
#offline-site [tabindex]:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
#offline-site .band-dark a:focus-visible,
#offline-site .section-dark a:focus-visible,
#offline-site .section-dark button:focus-visible,
#offline-site .footer a:focus-visible,
#offline-site .footer button:focus-visible,
#offline-site .cta-light:focus-visible{outline-color:var(--paper)}

/* Button-as-text reset */
#offline-site .btn-reset{
  background:none;border:none;margin:0;padding:0;
  font:inherit;cursor:pointer;text-align:left;
}

/* --- Layout ------------------------------------------------------------ */
#offline-site main{flex:1}

/* --- Shared containers ------------------------------------------------- */
#offline-site .wrap{max-width:1080px;margin:0 auto}
#offline-site .rows{margin-top:clamp(32px,5vw,56px)}
#offline-site .tiers{margin-top:clamp(24px,3.5vw,40px)}
#offline-site .row-desc{line-height:1.8}

/* --- Header ------------------------------------------------------------ */
#offline-site .header{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  padding:18px clamp(24px,6vw,96px) 12px;
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;
}
#offline-site .wordmark{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.02em;font-size:16px;
  color:var(--ink);cursor:pointer;border-bottom:none;
}
#offline-site .nav-toggle{
  display:none;cursor:pointer;
  font-size:8px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--grey);
}
#offline-site .nav{
  display:flex;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap;
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}
#offline-site .nav-link{
  cursor:pointer;color:var(--grey);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
#offline-site .nav-link[aria-current="page"]{
  color:var(--ink);border-bottom-color:var(--ink);
}

/* --- Typography / labels ----------------------------------------------- */
#offline-site .label{
  font-size:10px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--grey);
}
#offline-site .micro{
  font-size:8px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--grey);
}

/* Home hero display */
#offline-site .display{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.04em;line-height:0.9;
  font-size:clamp(46px,9vw,104px);margin:clamp(28px,5vw,56px) 0 0;
}
#offline-site .lede{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.02em;line-height:1.16;
  font-size:clamp(19px,2.7vw,34px);margin:clamp(24px,4vw,44px) 0 0;
  max-width:26ch;text-wrap:pretty;
}

/* Inner-page title + intro */
#offline-site .page-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.04em;line-height:0.92;
  font-size:clamp(40px,7.5vw,88px);margin:clamp(24px,4vw,44px) 0 0;
}
#offline-site .hero-intro{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  max-width:52ch;margin:clamp(28px,4vw,44px) 0 0;
}
#offline-site .intro{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  max-width:56ch;margin:clamp(28px,4vw,44px) 0 0;
}

/* Section H2 */
#offline-site .section-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.03em;line-height:1;
  font-size:clamp(26px,4.4vw,52px);margin:0;
}
#offline-site .section-dark .section-title{color:var(--paper)}

/* --- Section padding helpers ------------------------------------------- */
#offline-site .hero{padding:clamp(64px,11vw,140px) clamp(24px,6vw,96px) clamp(40px,6vw,72px)}
#offline-site .hero-home{padding:clamp(72px,14vw,180px) clamp(24px,6vw,96px) clamp(56px,10vw,120px)}
#offline-site .section{padding:0 clamp(24px,6vw,96px) clamp(48px,8vw,96px)}
#offline-site .section-lg{padding:clamp(56px,9vw,120px) clamp(24px,6vw,96px)}
#offline-site .section-pad-bottom{padding:0 clamp(24px,6vw,96px) clamp(72px,12vw,160px)}
#offline-site .section-faq{padding:0 clamp(24px,6vw,96px) clamp(56px,9vw,120px)}
#offline-site .band{padding:clamp(64px,11vw,140px) clamp(24px,6vw,96px)}
#offline-site .band-dark{
  background:var(--black);color:var(--paper);
  padding:clamp(64px,11vw,140px) clamp(24px,6vw,96px);
}
#offline-site .section-dark{
  background:var(--black);color:var(--paper);
  padding:clamp(56px,9vw,120px) clamp(24px,6vw,96px);
}

/* Bordered blocks */
#offline-site .block-top{
  max-width:1080px;margin:0 auto;border-top:1px solid var(--hairline);
  padding-top:clamp(36px,5vw,64px);
}
#offline-site .block-top-lg{
  max-width:1080px;margin:0 auto;border-top:1px solid var(--hairline);
  padding-top:clamp(40px,6vw,72px);
}

/* --- Home: problem band ------------------------------------------------ */
#offline-site .lead-dark{
  font-size:clamp(12px,1.5vw,16px);letter-spacing:0.02em;line-height:1.9;
  color:var(--paper);max-width:56ch;margin:clamp(28px,4vw,44px) 0 0;
}
#offline-site .statement{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.02em;line-height:1.2;
  font-size:clamp(19px,2.6vw,33px);margin:clamp(32px,5vw,52px) 0 0;
  max-width:30ch;color:var(--paper);text-wrap:pretty;
}

/* --- Numbered 3-column rows (home "what OFFLINE handles") --------------- */
#offline-site .row{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.2fr);
  gap:20px;align-items:baseline;padding:clamp(20px,3vw,32px) 0;
  border-top:1px solid var(--hairline);
  font-size:8px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--grey);
}
#offline-site .row--close{border-bottom:1px solid var(--hairline)}
#offline-site .row-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  letter-spacing:-0.02em;font-size:clamp(18px,2.4vw,26px);
  line-height:1.05;color:var(--ink);
}

/* --- Home: alternatives ------------------------------------------------ */
#offline-site .alt-grid{
  margin-top:clamp(28px,4vw,48px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(28px,4vw,56px);
}
#offline-site .alt-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.02em;
  font-size:clamp(15px,1.8vw,20px);line-height:1.1;
}
#offline-site .alt-body{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;margin:16px 0 0;
}
#offline-site .alt-close{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  max-width:56ch;margin:clamp(32px,5vw,52px) 0 0;
}

/* --- Links & CTAs ------------------------------------------------------ */
#offline-site .cta{cursor:pointer;color:var(--ink);border-bottom:1px solid var(--grey);padding-bottom:2px}
#offline-site .cta-muted{cursor:pointer;color:var(--grey)}
#offline-site .cta-light{cursor:pointer;color:var(--paper);border-bottom:1px solid var(--grey);padding-bottom:2px}
#offline-site .link{cursor:pointer;border-bottom:1px solid var(--grey)}

#offline-site .cta-row{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:clamp(40px,7vw,80px);
  padding-top:14px;border-top:1px solid var(--hairline);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}
#offline-site .cta-after{
  margin-top:clamp(32px,5vw,48px);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}
#offline-site .cta-after-lg{
  margin-top:clamp(40px,6vw,72px);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}
#offline-site .cta-footer{
  margin-top:clamp(40px,6vw,72px);padding-top:14px;border-top:1px solid var(--hairline);
  display:flex;gap:26px;flex-wrap:wrap;
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}
#offline-site .cta-footer-dark{
  margin-top:clamp(40px,6vw,72px);padding-top:14px;border-top:1px solid var(--grey);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}
#offline-site .cta-wide{
  max-width:1080px;margin:clamp(48px,7vw,88px) auto 0;padding-top:14px;
  border-top:1px solid var(--hairline);display:flex;gap:26px;flex-wrap:wrap;
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
}

/* --- Services: numbered sections + item lists -------------------------- */
#offline-site .numbered{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px}
#offline-site .list-grid{
  margin-top:clamp(24px,3.5vw,40px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0 clamp(24px,4vw,48px);
}
#offline-site .list-item{
  padding:11px 0 10px;border-top:1px solid var(--hairline);
  font-size:clamp(11px,1.2vw,12.5px);letter-spacing:0.02em;line-height:1.7;
}
#offline-site .list-item-dark{
  padding:11px 0 10px;border-top:1px solid var(--grey);
  font-size:clamp(11px,1.2vw,12.5px);letter-spacing:0.02em;line-height:1.7;color:var(--paper);
}
#offline-site .note{
  font-size:clamp(10.5px,1.15vw,12px);letter-spacing:0.02em;line-height:1.85;
  color:var(--grey);max-width:52ch;margin:clamp(24px,3.5vw,36px) 0 0;
}

/* --- How it works: step rows + 30 days --------------------------------- */
#offline-site .step-row{
  display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.3fr);
  gap:20px;align-items:baseline;padding:clamp(26px,4vw,44px) 0;
  border-top:1px solid var(--hairline);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
#offline-site .step-row--close{border-bottom:1px solid var(--hairline)}
#offline-site .step-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  letter-spacing:-0.02em;font-size:clamp(22px,3.4vw,38px);line-height:1.02;color:var(--ink);
}
#offline-site .card-body-light{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  margin:14px 0 0;color:var(--paper);
}
#offline-site .thirty-grid{
  margin-top:clamp(28px,4vw,48px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(28px,4vw,48px);
}

/* --- Pricing ----------------------------------------------------------- */
#offline-site .tier-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr) auto;
  gap:20px;align-items:baseline;padding:clamp(18px,2.8vw,30px) 0;
  border-top:1px solid var(--grey);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
#offline-site .tier-row--close{border-bottom:1px solid var(--grey)}
#offline-site .tier-name{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  letter-spacing:-0.02em;font-size:clamp(19px,2.6vw,30px);line-height:1.05;color:var(--paper);
}
#offline-site .tier-price{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  letter-spacing:-0.02em;font-size:clamp(19px,2.6vw,30px);line-height:1.05;
  color:var(--paper);text-align:right;
}
#offline-site .price-cols{
  max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(28px,4vw,64px);
}

/* --- FAQ --------------------------------------------------------------- */
#offline-site .faq-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.4fr);
  gap:20px;align-items:baseline;padding:clamp(20px,3vw,30px) 0;
  border-top:1px solid var(--hairline);
}
#offline-site .faq-row--close{border-bottom:1px solid var(--hairline)}
#offline-site .faq-q{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.02em;
  font-size:clamp(15px,1.9vw,21px);line-height:1.08;color:var(--ink);
}
#offline-site .faq-a{
  font-size:clamp(11px,1.2vw,12.5px);letter-spacing:0.02em;line-height:1.9;
}

/* --- Contact form ------------------------------------------------------ */
#offline-site .form{
  max-width:1080px;margin:0 auto;border-top:1px solid var(--hairline);
  padding-top:clamp(36px,5vw,64px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(24px,3.5vw,44px);
}
#offline-site .field{
  display:flex;flex-direction:column;gap:10px;
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
#offline-site .field-full{grid-column:1/-1}
#offline-site .input,
#offline-site .select,
#offline-site .textarea{
  border:none;border-bottom:1px solid var(--hairline);background:transparent;
  padding:8px 0;font-size:13px;letter-spacing:0.02em;color:var(--ink);
  outline:none;border-radius:0;
}
#offline-site .textarea{line-height:1.8;resize:vertical}
#offline-site .form-actions{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;
  flex-wrap:wrap;align-items:center;padding-top:14px;border-top:1px solid var(--hairline);
}
#offline-site .btn-dark{
  background:var(--black);color:var(--paper);border:none;border-radius:0;
  padding:16px 30px;font-size:8px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;cursor:pointer;
}
#offline-site .btn-dark:disabled{opacity:0.6;cursor:default}
#offline-site .form-error{display:none;color:var(--ink)}

/* Contact success block */
#offline-site .thanks-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.02em;line-height:1.16;
  font-size:clamp(19px,2.7vw,34px);margin:clamp(24px,4vw,40px) 0 0;
  max-width:26ch;text-wrap:pretty;
}
#offline-site .thanks-body{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  max-width:56ch;margin:clamp(24px,3.5vw,36px) 0 0;
}

/* --- Footer ------------------------------------------------------------ */
#offline-site .footer{
  background:var(--black);color:var(--paper);
  padding:clamp(48px,8vw,96px) clamp(24px,6vw,96px) clamp(28px,4vw,44px);
}
#offline-site .footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(32px,5vw,64px);
}
#offline-site .footer-mark{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.03em;
  font-size:clamp(26px,4vw,44px);line-height:0.95;color:var(--paper);
}
#offline-site .footer-tagline{
  font-size:clamp(10.5px,1.15vw,12px);letter-spacing:0.02em;line-height:1.85;
  color:var(--grey);max-width:34ch;margin:16px 0 0;
}
#offline-site .footer-col{
  display:flex;flex-direction:column;gap:9px;
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
#offline-site .footer-link{cursor:pointer;color:var(--paper)}
#offline-site .footer-email{
  color:var(--paper);border-bottom:1px solid var(--grey);
  text-transform:none;letter-spacing:0.02em;font-size:11px;align-self:flex-start;
}
#offline-site .footer-legal{cursor:pointer;color:var(--grey);border-bottom:none}
#offline-site .footer-legal.is-privacy{margin-top:6px}
#offline-site .footer-meta{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,64px);padding-top:14px;border-top:1px solid var(--grey);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}

/* --- Legal overlay (Privacy / Terms) ----------------------------------- */
#offline-site .legal-overlay{display:none;position:fixed;inset:0;z-index:40;background:var(--paper);overflow:auto;padding:clamp(40px,7vw,88px) clamp(24px,6vw,96px)}
#offline-site .legal-overlay.is-open{display:block}
#offline-site .legal-inner{max-width:720px;margin:0 auto}
#offline-site .legal-head{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--hairline);
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
#offline-site .legal-close{cursor:pointer;color:var(--ink)}
#offline-site .legal-title{
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;letter-spacing:-0.04em;line-height:0.95;
  font-size:clamp(30px,5vw,56px);margin:clamp(28px,4vw,44px) 0 0;
}
#offline-site .legal-body{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  margin:clamp(24px,3.5vw,36px) 0 0;white-space:pre-line;
}
#offline-site .legal-foot{
  font-size:8px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--grey);line-height:1.9;margin:clamp(28px,4vw,44px) 0 0;
}

/* --- Standalone legal pages (/privacy/, /terms/) ----------------------- */
#offline-site .legal-page-body{
  font-size:clamp(11px,1.25vw,13px);letter-spacing:0.02em;line-height:1.9;
  margin:clamp(24px,3.5vw,36px) 0 0;max-width:720px;
}
#offline-site .legal-page-body p{margin:0 0 clamp(18px,2.5vw,26px)}
#offline-site .legal-page-body p:last-child{margin-bottom:0}

/* --- Mobile (<=820px) -------------------------------------------------- */
@media (max-width:820px){
  #offline-site .row,
  #offline-site .tier-row,
  #offline-site .faq-row,
  #offline-site .step-row{grid-template-columns:44px minmax(0,1fr) !important}
  #offline-site .row>:nth-child(n+3),
  #offline-site .tier-row>:nth-child(n+3),
  #offline-site .faq-row>:nth-child(n+3),
  #offline-site .step-row>:nth-child(n+3){grid-column:2/-1}
  #offline-site .nav-toggle{display:block}
  #offline-site .nav{display:none !important;width:100%}
  #offline-site .nav[data-open="1"]{display:flex !important;flex-direction:column;gap:14px;padding:18px 0 6px}
}