/* Local G5 Avenir fonts. Swap keeps text readable during download. */
@font-face{font-family:'Avenir LT Pro';src:url('../fonts/avenir-lt-pro.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir LT Pro';src:url('../fonts/avenir-demi.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Original landing page colours, spacing and responsive composition. */

:root{color-scheme:light;--ink:#142f25;--green:#07583b;--paper:#f5f6f7;--muted:#50645a;--gold:#f4ce4b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 'Avenir LT Pro','Segoe UI',Arial,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid #a66c00;outline-offset:6px}.shell{max-width:1200px;margin:auto;padding:0 48px}header{display:flex;justify-content:space-between;align-items:center;padding:31px 0;border-bottom:1px solid #d5ddd4;gap:20px}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;font-weight:750;letter-spacing:-.5px;font-size:22px}.flag{width:37px;height:25px;border-radius:3px}.header-note{font-size:16px;color:var(--muted)}main{padding:73px 0 60px}.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}.eyebrow{font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:9px;height:9px;border-radius:50%;background:#0c7549}h1{font-size:clamp(46px,5.3vw,70px);line-height:1.07;letter-spacing:-3px;font-weight:650;margin:23px 0}h1 span{color:var(--green)}.intro{font-size:19px;line-height:1.7;max-width:530px;color:var(--muted);margin:0 0 29px}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;background:var(--green);color:white;padding:16px 23px;text-decoration:none;border-radius:7px;font-weight:650;transition:background .15s}.cta:hover{background:#093e2e}.arrow{font-size:25px;line-height:1}.destination{font-size:16px;margin:12px 0 0;color:var(--muted)}.art{position:relative;min-height:354px;background:#e7eee8;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}.art:before,.art:after{content:'';position:absolute;width:510px;height:1px;background:#c7d4c4;transform:rotate(-36deg)}.art:after{transform:rotate(36deg)}.reader{z-index:1;width:80%;background:#fff;border:1px solid #d6decf;box-shadow:0 20px 35px #16352512;transform:rotate(-5deg);border-radius:9px;padding:28px}.reader-top{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700}.reader h2{font-size:34px;letter-spacing:-1px;line-height:1.2;margin:29px 0 21px}.reader hr{border:0;height:1px;background:#dce3d7;margin:0 0 18px}.reader p{margin:0;color:var(--muted);font-size:16px}.seal{position:absolute;bottom:24px;right:21px;border-radius:50%;width:66px;height:66px;background:var(--gold);display:grid;place-items:center;z-index:2;font-size:31px;transform:rotate(8deg)}.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:64px;border-top:1px solid #d5ddd4;padding-top:27px}.topic{display:flex;align-items:flex-start;gap:13px}.number{color:#506b59;font-size:16px;padding-top:2px}.topic h2{font-size:18px;margin:0 0 3px;font-weight:650}.topic p{font-size:16px;margin:0;color:var(--muted)}footer{border-top:1px solid #d5ddd4;padding:23px 0 27px;display:flex;justify-content:space-between;gap:20px;font-size:16px;color:var(--muted)}footer p{margin:0}footer a{text-underline-offset:4px}.skip{position:absolute;top:-100px;padding:10px;background:white}.skip:focus{top:5px;z-index:10}@media(max-width:800px){.shell{padding:0 25px}.hero{gap:30px;grid-template-columns:1fr 1fr}main{padding-top:48px}h1{font-size:49px}.art{min-height:310px}.reader{padding:20px}.reader h2{font-size:29px}.topics{gap:20px}.header-note{display:none}}@media(max-width:600px){header{padding:22px 0}.hero{grid-template-columns:1fr;gap:35px}h1{font-size:52px;letter-spacing:-2px}.intro{font-size:18px}.art{min-height:270px;max-width:430px;width:100%}.reader{width:76%;padding:24px}.reader h2{margin:20px 0;font-size:29px}.topics{grid-template-columns:1fr;margin-top:35px;gap:22px}main{padding:36px 0}.cta{width:100%;max-width:350px}footer{flex-direction:column;gap:10px}.eyebrow{font-size:16px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Shared G5 identity and the quotation form added below the footer. */
.arrow,.seal,.reader-top span:last-child{font-family:'Segoe UI Symbol','Arial Unicode MS',sans-serif}[hidden]{display:none!important}.g5-logo{width:170px;height:auto;display:block}.brand-pipe{color:#8b9c8e;font-weight:400}.brand{flex-wrap:wrap;font-size:19px}.quotation-section{background:#e9ece6;padding:55px max(24px,calc((100vw - 1104px)/2));margin:0}.quotation-section h2{font-size:clamp(28px,4vw,40px);line-height:1.2;letter-spacing:-1px;margin:10px 0 18px}.quotation-section>p{max-width:740px}.quotation-status{color:#41594d;font-size:16px}.pipedriveWebForms{width:100%;max-width:1000px;margin:25px auto 0;min-height:600px;background:#fff;border-radius:10px;overflow:hidden}.pipedriveWebForms iframe{width:100%!important;border:0;max-width:100%}footer{align-items:center;flex-wrap:wrap}.footer-brand{display:inline-flex;align-items:center;gap:14px}.header-note{max-width:260px;text-align:right}.dev-intro{padding:40px 0 0}.dev-intro h1{font-size:48px}.dev-intro p{max-width:800px}.dev-links{display:flex;gap:16px;flex-wrap:wrap}.variation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0}.variation-link{border:1px solid #bccabd;padding:25px;border-radius:8px;background:#fff}.variation-link h2{font-size:23px}.variation-back{display:block;background:#e6eadf;padding:14px 25px;text-underline-offset:4px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a66c00;outline-offset:4px}button{min-height:44px}a{touch-action:manipulation}main:focus{outline:0}
@media(max-width:600px){.g5-logo{width:135px}.brand{gap:9px;font-size:17px}.quotation-section{padding:35px 24px}.variation-grid{grid-template-columns:1fr}footer{align-items:flex-start}.pipedriveWebForms{min-height:650px}}
/* Responsive QA fixes: text can wrap without widening a page. */
.brand,.intro,.topic,.quotation-section{min-width:0}.reader p{overflow-wrap:anywhere}


/* Fit the public landing page to the visible viewport. Keep the guide link prominent
   when space is limited. The component and design reference pages can still scroll. */
.landing-screen,
.landing-screen body { height: 100%; overflow: hidden; }
.landing-screen .shell {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.landing-screen header,
.landing-screen footer { padding-block: clamp(9px, 2vh, 23px); }
.landing-screen main { align-self: center; min-width: 0; padding-block: 14px; }
.landing-screen .hero { gap: clamp(22px, 4vw, 56px); }
.landing-screen h1 { margin-block: clamp(10px, 2vh, 23px); font-size: clamp(38px, 7.5vh, 70px); }
.landing-screen .intro { margin-bottom: clamp(12px, 2.5vh, 27px); }
.landing-screen .art { min-height: clamp(220px, 42vh, 354px); }
.landing-screen .topics { margin-top: clamp(20px, 5vh, 52px); padding-top: 16px; }
@media (max-width: 650px) {
  .landing-screen .shell { padding-inline: clamp(15px, 5vw, 25px); }
  .landing-screen .hero { grid-template-columns: 1fr; gap: 17px; }
  .landing-screen .art { min-height: 125px; }
  .landing-screen .reader { width: 82%; padding: 10px 16px; transform: rotate(-2deg); }
  .landing-screen .reader h2 { font-size: 22px; margin: 6px 0; }
  .landing-screen .reader h2 br { display: none; }
  .landing-screen .reader h2 br::after { content: " "; }
  .landing-screen .reader hr, .landing-screen .reader p, .landing-screen .seal { display: none; }
  .landing-screen h1 { font-size: clamp(32px, 6vh, 51px); letter-spacing: -1.4px; }
  .landing-screen .intro { font-size: 16px; line-height: 1.45; }
  .landing-screen .eyebrow { font-size: 14px; letter-spacing: .6px; }
  .landing-screen .topics { grid-template-columns: 1fr; gap: 6px; }
  .landing-screen .topic { gap: 9px; }
  .landing-screen .topic h2 { margin: 0; font-size: 16px; }
  .landing-screen .topic p, .landing-screen .number { display: none; }
  .landing-screen footer { flex-direction: row; align-items: center; font-size: 14px; gap: 8px; }
  .landing-screen footer .g5-logo { width: 90px; }
  .landing-screen footer > p:last-child { display: none; }
}
@media (max-width: 650px) and (max-height: 780px) {
  .landing-screen .art { display: none; }
}
@media (max-height: 540px) {
  .landing-screen .topics, .landing-screen .art { display: none; }
  .landing-screen .hero { display: block; }
  .landing-screen .destination { display: none; }
  .landing-screen .cta { padding-block: 10px; }
  .landing-screen footer .g5-logo { width: 90px; }
}
@media (max-height: 370px) {
  .landing-screen footer { display: none; }
  .landing-screen .shell { grid-template-rows: auto minmax(0, 1fr); }
  .landing-screen h1 { font-size: 29px; }
  .landing-screen .intro { font-size: 16px; line-height: 1.35; }
}
@media (max-height: 285px) {
  .landing-screen .eyebrow, .landing-screen .intro { display: none; }
}

/* Compact the secondary content before it can overlap the footer. */
@media (max-width: 650px) {
  .landing-screen main { padding-block: 8px; }
  .landing-screen h1 { font-size: clamp(32px, 5.4vh, 43px); }
  .landing-screen .destination { display: none; }
  .landing-screen .topics { margin-top: 15px; padding-top: 10px; }
}
@media (max-width: 650px) and (max-height: 610px) {
  .landing-screen .topics { display: none; }
}
@media (min-width: 651px) and (max-height: 680px) {
  .landing-screen h1 { font-size: clamp(30px, 6vh, 45px); }
  .landing-screen .topics { display: none; }
  .landing-screen .intro { font-size: 17px; line-height: 1.5; }
}
@media (max-height: 450px) {
  .landing-screen main { padding-block: 6px; }
  .landing-screen h1 { font-size: 30px; }
  .landing-screen .intro { font-size: 16px; line-height: 1.35; }
}