/* ============================================================
   Ease of Business — company site
   ------------------------------------------------------------
   Read by shop and service owners on a phone, often on patchy
   data, usually while deciding whether to trust us with the
   thing that brings them customers. So: no hero photography, no
   sliders, nothing that has to load before the argument does.
   Type and numbers carry it.

   The page alternates deep pine sections with white ones. That
   rhythm does the work a dozen bordered cards would otherwise
   do — you always know which part of the argument you are in.
   One accent, and it is the same green the products use, so the
   company and its software read as one thing.
   ============================================================ */

:root {
    /* ------------------------------------------------------------
       Palette, second pass.
       ------------------------------------------------------------
       Moved off the near-black pine to a deep forest green and built a
       tinted mint to sit sections on. The previous scheme was white
       throughout with a dark band or two, so every section read at the
       same weight and the page had no rhythm — you could not tell by
       glancing where one idea ended and the next began.
       ------------------------------------------------------------ */
    --ink:      #08221A;   /* headings — near-black with green in it */
    --ink-2:    #40544C;   /* body */
    --ink-3:    #74877F;   /* captions */
    --line:     #DCE9E3;

    --paper:    #FFFFFF;
    /* The tint that alternating sections sit on. Kept very pale: at any
       real saturation a full-width panel of it fights the text. */
    --mint:     #E8F5EF;
    --mint-2:   #D3EBE0;   /* cards inside a tinted section */
    --mint-3:   #F3FAF6;   /* the lightest wash, for insets */

    --forest:   #0A3527;   /* dark sections and primary buttons */
    --forest-2: #0F4632;
    --accent:   #0E7A57;
    --accent-2: #0B6146;

    --sand:     #F4F1E8;
    --wrap:     1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3 {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.08;
}
h1 { font-size: clamp(2.1rem, 7.4vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 5.2vw, 2.6rem); }
h3 { font-size: 1.06rem; letter-spacing: -.01em; line-height: 1.35; }
p  { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.co-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(18px, 5vw, 34px); }
.co-sec  { padding: clamp(52px, 9vw, 96px) 0; }
.co-dark { background: var(--forest); color: #EAF2EE; }
.co-dark h1, .co-dark h2, .co-dark h3 { color: #fff; }
.co-tint { background: var(--mint); }

/* A section given its own rounded panel, floated on the tint. Each block of
   the argument becomes a distinct object, so scrolling feels like turning
   cards over rather than falling down one long page. */
.co-panel {
    background: var(--paper);
    border-radius: 22px;
    padding: clamp(24px, 5vw, 40px);
    border: 1px solid var(--line);
}
.co-tint .co-panel { border-color: transparent; }

/* Feature card with the icon in a soft circle above the heading. */
.co-feat {
    background: var(--paper);
    border-radius: 18px;
    padding: 22px 22px 24px;
    border: 1px solid var(--line);
    height: 100%;
}
.co-tint .co-feat { border-color: transparent; box-shadow: 0 1px 2px rgba(8,34,26,.04); }
.co-feat-ico {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--mint-2);
    color: var(--accent-2);
    margin-bottom: 14px;
}
.co-feat-ico svg { width: 22px; height: 22px; }
.co-feat h3 { margin: 0 0 6px; font-size: 1.06rem; letter-spacing: -.01em; }
.co-feat p  { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.62; }

/* The strip of short claims that runs across between sections. It is a
   plain scrolling row, not a live ticker: an animation that never stops is
   a battery cost and a distraction on a page people are reading. */
.co-claims {
    background: var(--mint-2);
    color: var(--forest);
    padding: 11px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.co-claims::-webkit-scrollbar { display: none; }
.co-claims-in {
    display: flex;
    gap: 26px;
    width: max-content;
    padding: 0 clamp(18px, 5vw, 34px);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
/* Spacing set with margin as well as gap. Flex `gap` is fine on any current
   phone, but it is a newer property than margin and this strip is the one
   place where losing it turns the words into one run-on string. */
.co-claims-in span { display: flex; align-items: center; margin-right: 26px; }
.co-claims-in span:last-child { margin-right: 0; }
.co-claims-in span::before { margin-right: 7px; }
.co-strip-in span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex: 0 0 auto;
}

/* The cards need to read as separate objects on the tint. A shadow alone is
   nearly invisible against a pale green, so they also carry a hairline in a
   tone taken from the tint itself rather than the grey used on white. */
.co-tint .co-work-item,
.co-tint .co-plan { border: 1px solid #CFE6DA; }

/* A quote from an owner. Kept visually quieter than the feature cards —
   it is supporting evidence, not the argument itself. */
.co-quote {
    background: var(--mint-3);
    border-radius: 18px;
    padding: 24px;
    border: 1px solid var(--line);
}
.co-quote p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.7; color: var(--ink); }
.co-quote cite { font-style: normal; font-size: .9rem; color: var(--ink-2); }
.co-quote cite b { display: block; color: var(--ink); font-size: .96rem; }

.co-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(18,133,95,.10);
    color: var(--accent-2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.co-dark .co-eyebrow { background: rgba(255,255,255,.12); color: #9FE3C6; }

.co-lede { margin-top: 16px; font-size: clamp(1rem, 2.6vw, 1.16rem); line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.co-dark .co-lede { color: #B7CEC4; }

/* ---------- Header ---------- */

.co-nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.co-nav-in { display: flex; align-items: center; gap: 20px; height: 62px; }
.co-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.co-logo-mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--accent); color: #fff;
    display: grid; place-items: center;
    font-size: .9rem; font-weight: 700;
}
.co-nav-links { display: none; gap: 22px; margin-left: auto; }
.co-nav-links a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink-2); }
.co-nav-links a:hover { color: var(--ink); }
.co-nav-cta { margin-left: auto; }

.co-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: .95rem; font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--accent);
}
.co-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.co-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.co-btn-ghost:hover { background: var(--mint-3); border-color: var(--ink-3); }
.co-dark .co-btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.co-dark .co-btn-ghost:hover { background: rgba(255,255,255,.08); }
.co-btn-sm { padding: 9px 16px; font-size: .88rem; }
.co-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Hero ---------- */

.co-hero { padding: clamp(46px, 9vw, 92px) 0 clamp(38px, 7vw, 70px); }
.co-hero h1 { max-width: 16ch; }
.co-hero-note { margin-top: 18px; font-size: .88rem; color: var(--ink-3); }

/* The five things we run, stated immediately — the page's whole
   proposition is the list, so it appears before any persuasion. */
.co-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1px;
    margin-top: 44px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.co-strip div { background: var(--paper); padding: 18px 18px 20px; }
.co-strip b { display: block; font-size: .95rem; font-weight: 600; }
.co-strip span { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- The problem, in numbers ---------- */

.co-cost { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-top: 34px; }
.co-cost-item { padding: 20px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.co-cost-item b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.co-cost-item span { display: block; margin-top: 5px; font-size: .87rem; line-height: 1.55; color: #B7CEC4; }
.co-cost-note { margin-top: 20px; font-size: .82rem; color: #8FAEA1; }

/* ---------- What we run ---------- */

.co-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 38px; }
.co-work-item { padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.co-work-num {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; margin-bottom: 14px;
    border-radius: 9px;
    background: var(--sand);
    font-size: .82rem; font-weight: 700; color: var(--ink);
}
.co-work-item p { margin-top: 8px; font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
.co-work-item ul { margin: 12px 0 0; padding: 0; list-style: none; }
.co-work-item li { position: relative; padding: 4px 0 4px 20px; font-size: .87rem; line-height: 1.5; color: var(--ink-2); }
.co-work-item li::before {
    content: ''; position: absolute; left: 2px; top: 12px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5;
}

/* ---------- Steps ---------- */

.co-steps { counter-reset: s; display: grid; gap: 2px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.co-step { counter-increment: s; background: var(--paper); padding: 22px clamp(18px, 4vw, 26px); display: flex; gap: 16px; align-items: flex-start; }
.co-step::before {
    content: counter(s);
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--forest); color: #fff;
    font-size: .82rem; font-weight: 700;
}
.co-step p { margin-top: 5px; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- Plans ---------- */

.co-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 38px; align-items: start; }
.co-plan { padding: 26px 22px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.co-plan.is-lead { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,133,95,.10); }
.co-plan-tag { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; }
.co-plan-price { margin-top: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; }
.co-plan-price small { font-family: 'Inter', sans-serif; font-size: .86rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.co-plan ul { margin: 16px 0 0; padding: 0; list-style: none; }
.co-plan li { position: relative; padding: 5px 0 5px 22px; font-size: .89rem; line-height: 1.5; color: var(--ink-2); }
.co-plan li::before {
    content: ''; position: absolute; left: 3px; top: 12px;
    width: 6px; height: 10px; border: solid var(--accent);
    border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.co-plan .co-btn { width: 100%; margin-top: 20px; }
.co-plans-note { margin-top: 22px; font-size: .87rem; line-height: 1.65; color: var(--ink-2); }

/* ---------- Proof ---------- */

.co-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin-top: 34px; }
.co-proof-item h3 { color: #fff; }
.co-proof-item p { margin-top: 7px; font-size: .92rem; line-height: 1.65; color: #B7CEC4; }

/* ---------- Questions ---------- */

.co-faq { margin-top: 32px; border-top: 1px solid var(--line); }
.co-faq details { border-bottom: 1px solid var(--line); }
.co-faq summary {
    list-style: none; cursor: pointer;
    padding: 18px 34px 18px 0;
    position: relative;
    font-weight: 600; font-size: 1rem;
}
.co-faq summary::-webkit-details-marker { display: none; }
.co-faq summary::after {
    content: '+'; position: absolute; right: 4px; top: 15px;
    font-size: 1.3rem; font-weight: 400; color: var(--ink-3);
}
.co-faq details[open] summary::after { content: '\2212'; }
.co-faq p { padding: 0 0 20px; font-size: .93rem; line-height: 1.7; color: var(--ink-2); max-width: 68ch; }

/* ---------- Close + footer ---------- */

.co-close { text-align: center; }
.co-close h2 { max-width: 18ch; margin: 0 auto; }
.co-close .co-btns { justify-content: center; }

.co-foot { padding: 40px 0 46px; border-top: 1px solid var(--line); font-size: .87rem; color: var(--ink-2); }
.co-foot-top { display: flex; flex-wrap: wrap; gap: 18px 34px; justify-content: space-between; }
.co-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.co-foot a { text-decoration: none; }
.co-foot a:hover { color: var(--ink); }
.co-foot-legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); }

@media (min-width: 860px) {
    .co-nav-links { display: flex; }
    .co-nav-cta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Service cards, now that the section behind them is tinted. A border on a
   tinted panel reads as a box drawn round the text; a plain white card with
   a soft lift reads as an object sitting on the page. */
.co-tint .co-work-item {
    border-color: transparent;
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(8,34,26,.05);
}
.co-tint .co-work-num {
    background: var(--mint-2);
    color: var(--accent-2);
    border-color: transparent;
}

/* Plan cards on the tint get the same treatment, so the two sections do not
   use two different ideas of what a card is. */
.co-tint .co-plan {
    border-color: transparent;
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(8,34,26,.05);
}

/* The hero keeps a plain white ground: the eye should land on the sentence,
   not on a colour. */
.co-hero { background: var(--paper); }


/* Example websites on the company page. Four covers, two by two on a phone,
   because a row of four on a 390px screen makes each one too small to read
   and the point is that they are legible. */
.co-demos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 22px; }
.co-demo { display: block; text-decoration: none; color: inherit; background: #fff;
           border: 1px solid var(--co-line, #DFEAE7); border-radius: 12px; overflow: hidden;
           transition: transform .12s ease, box-shadow .12s ease; }
.co-demo:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.co-demo img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.co-demo__t { display: block; padding: 10px 12px 0; font-weight: 650; font-size: 14px; }
.co-demo__n { display: block; padding: 1px 12px 12px; font-size: 12px; color: #7A8784; }
@media (max-width: 760px) { .co-demos { grid-template-columns: 1fr 1fr; gap: 11px; } }