/* TULIR SYSTEMS | About V1 candidate (page-scoped; homepage unchanged)
   Reuses site.css?v=25 for all shared components. All selectors are
   namespaced by .about-page and .about-* to avoid modifying other pages. */
.about-page { --about-border:#dfeae7; --about-blue:#eaf4fb; --about-sage:#eef7f1; }
.about-page .main-nav > a[href="about.html"] { color:var(--forest); position:relative; }
.about-page .main-nav > a[href="about.html"]::after { content:""; position:absolute; height:2px; bottom:4px; left:2px; right:2px; background:var(--forest); }
.about-page main { overflow:hidden; }
.about-page .about-kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#4d7082; margin-bottom:15px; line-height:1.4; }
.about-page .about-section-title { font-family:var(--serif); font-size:clamp(31px,2.7vw,49px); line-height:1.17; color:var(--navy); font-weight:700; letter-spacing:-.02em; }
.about-page .about-body { font-size:clamp(16px,1.08vw,18px); line-height:1.67; color:var(--ink); }
.about-page .about-muted { font-size:15px; line-height:1.62; color:var(--ink-soft); }
.about-page .about-wrap { width:var(--wrap);max-width:100%;margin:0 auto; }

/* Main story / hero */
.about-page .about-hero { position:relative; isolation:isolate; background:
  radial-gradient(700px 400px at 86% 45%,rgba(210,231,212,.68),transparent 70%),
  linear-gradient(108deg,#fff 0%,#fdfefe 51%,#f4faf6 100%); }
.about-page .about-hero:before { content:"";position:absolute;pointer-events:none;z-index:-1;top:0;right:0;width:min(44%,750px);height:58%;
  background:url('assets/hero-foliage.png') no-repeat right top;background-size:100% auto;opacity:.36;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 64%),linear-gradient(180deg,#000 0%,transparent 98%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 64%); }
.about-page .about-hero-grid { display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:4.5%;align-items:center;min-height:390px;padding-top:50px;padding-bottom:53px; }
.about-page .about-hero-text { position:relative;z-index:2;max-width:770px; }
.about-page .about-hero h1 { font-family:var(--serif);font-size:clamp(40px,3.55vw,68px);line-height:1.075;letter-spacing:-.03em;color:var(--navy);margin-bottom:19px; }
.about-page .about-hero-text > p:not(.about-kicker) { max-width:630px;font-size:clamp(16px,1.1vw,19px);line-height:1.58;color:var(--ink); }
.about-page .about-hero-tag { margin-top:23px;display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:17px;font-weight:700;color:var(--navy); }
.about-page .about-hero-tag svg {flex:none;color:#2c865b;}
.about-page .about-emph {color:var(--forest);}

/* Decorative translucent report stack (deliberately contains no invented data) */
.about-page .about-report-visual {position:relative;min-height:350px;max-width:625px;justify-self:stretch;}
.about-page .about-report-orb {position:absolute;inset:30px 20px 22px 0;border-radius:50%;background:radial-gradient(ellipse,#dceee5 0%,#e8f6ed 45%,transparent 70%);filter:blur(13px);opacity:.65;}
.about-page .about-glass {position:absolute;width:64%;height:170px;border:1px solid rgba(57,124,123,.4);background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(221,241,233,.48));border-radius:16px;box-shadow:8px 17px 33px rgba(25,72,85,.11),inset 0 1px 0 #fff; transform:perspective(800px) rotateX(52deg) rotateZ(-23deg);}
.about-page .about-glass--bottom {top:160px;left:22%;border-color:#9dc3d0;background:linear-gradient(135deg,rgba(234,245,251,.89),rgba(243,251,249,.6));}
.about-page .about-glass--middle {top:105px;left:18%;}
.about-page .about-glass--top {top:49px;left:14%;border-color:#85ac9f;background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(236,249,243,.7));}
.about-page .about-visual-bars {position:absolute;left:19px;right:26px;bottom:24px;display:flex;gap:10px;align-items:flex-end;height:45px;opacity:.69;}
.about-page .about-visual-bars i {flex:1;display:block;background:linear-gradient(#79b3b0,#b4d8ca);border-radius:3px 3px 0 0;}
.about-page .about-visual-bars i:nth-child(1){height:34%;}.about-page .about-visual-bars i:nth-child(2){height:57%;}.about-page .about-visual-bars i:nth-child(3){height:46%;}.about-page .about-visual-bars i:nth-child(4){height:87%;}.about-page .about-visual-bars i:nth-child(5){height:70%;}
.about-page .about-visual-donut {width:82px;height:82px;position:absolute;top:20px;right:32px;border-radius:50%;background:conic-gradient(#387e82 0 22%,#83b9ab 22% 51%,#cfe1d9 51% 78%,#bfd2e5 78% 100%);-webkit-mask:radial-gradient(farthest-side,transparent 54%,#000 57%);mask:radial-gradient(farthest-side,transparent 54%,#000 57%);opacity:.68;}
.about-page .about-visual-row {position:absolute;left:20px;right:145px;height:10px;top:29px;background:linear-gradient(90deg,#a5c9c3 62%,transparent 62%);opacity:.6;border-radius:3px;}
.about-page .about-visual-row:after {content:"";position:absolute;top:18px;left:0;width:77%;height:8px;border-radius:3px;background:#ccdedc;}

/* Shared section rhythm */
.about-page .about-products {background:linear-gradient(#f7fafc,#f6f9fc);padding:43px 0 47px;}
.about-page .about-products-head {display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:24px;}
.about-page .about-products-head .about-muted {max-width:405px;}
.about-page .about-product-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.about-page .about-product-card {min-height:200px;padding:30px 31px;display:flex;gap:23px;align-items:flex-start;border-radius:13px;}
.about-page .about-product-card--xray {background:#eaf4fd;}
.about-page .about-product-card--pulse {background:#edf7f1;}
.about-page .about-icon-disk {flex:none;width:84px;height:84px;border:1px solid #b4d1db;border-radius:50%;display:grid;place-items:center;color:#3179b2;background:linear-gradient(145deg,#d3e6f7,#e2eff7);}
.about-page .about-product-card--pulse .about-icon-disk {background:#e2f1e7;border-color:#b2d7c6;color:var(--forest);}
.about-page .about-product-card h3 {font-family:var(--sans);font-size:clamp(22px,1.45vw,27px);font-weight:700;letter-spacing:.005em;line-height:1.2;color:var(--navy);margin-bottom:10px;}
.about-page .about-product-card--pulse h3 {color:var(--forest);}
.about-page .about-product-card p {font-size:15.5px;line-height:1.56;max-width:510px;color:var(--ink);margin-bottom:16px;}
.about-page .about-product-card a {font-size:15px;font-weight:700;text-decoration:none;color:#1668b0;}
.about-page .about-product-card--pulse a {color:#086b4c;}
.about-page .about-product-card a:hover {text-decoration:underline;}

.about-page .about-origin {background:#fff;padding:66px 0 64px;}
.about-page .about-origin-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:8%;align-items:center;}
.about-page .about-origin-copy .about-section-title {max-width:590px;margin-bottom:21px;}
.about-page .about-origin-copy .about-body {max-width:650px;margin:0 0 13px;}
.about-page .about-origin-note {color:var(--forest);font-weight:700;}
.about-page .about-layer-diagram {padding:28px 20px;display:grid;gap:15px;}
.about-page .about-diagram-step {position:relative;display:flex;align-items:center;gap:23px;}
.about-page .about-step-number {flex:none;width:71px;height:71px;border-radius:12px;transform:rotate(-7deg);background:linear-gradient(135deg,#eef7f8,#dceee9);border:1px solid #c9e1e1;box-shadow:0 8px 20px rgba(18,91,69,.06);display:grid;place-items:center;}
.about-page .about-diagram-step:nth-child(2) .about-step-number {background:linear-gradient(135deg,#dff1e9,#eff7f3);}
.about-page .about-diagram-step:nth-child(3) .about-step-number {background:linear-gradient(135deg,#e6f1fd,#e9f4f9);}
.about-page .about-step-number svg {transform:rotate(7deg);}
.about-page .about-diagram-step strong {display:block;font-weight:700;color:var(--navy);font-size:16px;margin-bottom:3px;}
.about-page .about-diagram-step p {font-size:14.5px;line-height:1.45;color:var(--ink-soft);}
.about-page .about-diagram-step:not(:last-child):before {content:"";position:absolute;left:35px;top:69px;height:26px;width:1px;background:#a6cec0;}

.about-page .about-principles {padding:54px 0 56px;background:#f7fafc;}
.about-page .about-principles .about-section-title {margin-bottom:26px;}
.about-page .about-principle-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.about-page .about-principle {display:flex;gap:19px;align-items:flex-start;padding:26px 23px;min-height:160px;background:#fff;border-radius:12px;border:1px solid #eef2f4;box-shadow:0 2px 12px rgba(10,42,65,.035);}
.about-page .about-principle-icon {flex:none;display:grid;place-items:center;width:59px;height:59px;border-radius:50%;background:#eaf4fb;color:#457ca0;}
.about-page .about-principle:nth-child(2) .about-principle-icon {background:#e9f4ef;color:var(--forest);}
.about-page .about-principle h3 {font-family:var(--serif);font-size:21px;color:var(--navy);line-height:1.2;margin:3px 0 8px;}
.about-page .about-principle p {font-size:14.5px;line-height:1.55;color:var(--ink);}

.about-page .about-independent {position:relative;padding:28px 0;background:linear-gradient(90deg,#eaf5ee 0%,#f7faf7 60%,#e8f4e9 100%);}
.about-page .about-independent-inner {display:grid;grid-template-columns:90px 1fr;gap:25px;align-items:center;}
.about-page .about-independent-mark {height:100%;min-height:100px;border-right:1px solid #9fc9af;color:var(--forest);display:grid;place-items:center;padding-right:24px;}
.about-page .about-independent h2 {font-family:var(--serif);font-size:clamp(28px,2.2vw,39px);line-height:1.2;color:var(--navy);margin-bottom:8px;}
.about-page .about-independent p {font-size:15.5px;color:var(--ink);line-height:1.6;}
.about-page .about-independent .about-fine {font-size:13.5px;margin-top:6px;color:var(--ink-soft);}
.about-page .about-independent a {font-weight:600;color:var(--forest);}

/* The risk disclosure carried over from the previous About page. It is the one
   block on this page that must not be skimmed past, so it keeps site.css's warn
   treatment rather than being restyled to blend into the band behind it. */
.about-page .about-independent-note{margin-top:22px}
.about-page .about-independent-note .callout{margin-bottom:0}
@media (max-width:767px){.about-page .about-independent-note{margin-top:18px}}

.about-page .about-finish {padding:40px 0 38px;background:#fff;}
.about-page .about-finish-inner {display:flex;align-items:center;justify-content:space-between;gap:25px;}
.about-page .about-finish .about-section-title {font-size:clamp(29px,2.4vw,42px);}
.about-page .about-contact {margin-top:9px;font-size:15px;color:var(--ink-soft);}
.about-page .about-contact a {font-weight:600;color:var(--forest);}
.about-page .about-finish-actions {display:flex;gap:13px;flex-wrap:wrap;}
.about-page .about-finish-actions .btn-outline,.about-page .about-finish-actions .btn-solid {min-width:167px;}

@media (min-width:1200px) and (max-height:920px) {
 .about-page .about-hero-grid {padding-top:35px;padding-bottom:37px;min-height:360px;}
 .about-page .about-products {padding-top:37px;padding-bottom:38px;}
}
/* Between 768 and 900 the two-column grid gave a tablet NARROWER text columns
   than a 390px phone (measured: 354px against 356px), and the desktop headline
   break was still active, producing two orphaned single-word lines. The stack
   point belongs at 900, above the genuinely phone-only rules at 767. */
@media (max-width:900px){
 .about-page .about-hero-grid{grid-template-columns:1fr;gap:0;min-height:0}
 .about-page .about-desktop-break{display:none}
 .about-page .about-report-visual{min-height:280px;max-width:560px;margin:0 auto}
 .about-page .about-how-grid{grid-template-columns:1fr;gap:26px}
 .about-page .about-origin-grid{grid-template-columns:1fr;gap:26px}
 .about-page .about-principle-grid{grid-template-columns:1fr}
 .about-page .about-product-grid{grid-template-columns:1fr}
}
@media (max-width:1100px){
 .about-page .about-hero-grid{grid-template-columns:1.02fr .98fr;gap:1%;}
 .about-page .about-hero h1{font-size:clamp(37px,4.3vw,57px);}
 .about-page .about-report-visual{min-height:315px;}
 .about-page .about-product-card{padding:23px 19px;gap:15px;}
 .about-page .about-icon-disk{width:66px;height:66px;}
 .about-page .about-principle{padding:22px 16px;gap:13px;}
}
@media (max-width:767px){
 .about-page .main-nav > a[href="about.html"]::after {display:none;}
 .about-page .about-desktop-break{display:none;}
 .about-page .about-hero-grid{grid-template-columns:1fr;padding-top:35px;padding-bottom:12px;gap:0;min-height:0;}
 .about-page .about-hero h1{font-size:clamp(37px,9.3vw,51px);margin-bottom:15px;}
 .about-page .about-hero-text > p:not(.about-kicker){font-size:16px;}
 .about-page .about-hero-tag{font-size:15px;margin-top:16px;}
  /* The rotated cards extended up to 66px past the hero's bottom edge and, because
    .about-hero sets isolation:isolate, painted OVER the products section — the
    background step ran as a hard line through a translucent card. Clip them. */
 .about-page .about-report-visual{min-height:300px;transform:scale(.81);transform-origin:center top;overflow:clip;}
 .about-page .about-products{padding:34px 0;}
 .about-page .about-products-head{display:block;margin-bottom:18px;}
 .about-page .about-products-head .about-muted{margin-top:12px;}
 .about-page .about-product-grid,.about-page .about-origin-grid,.about-page .about-principle-grid{grid-template-columns:1fr;}
 .about-page .about-product-card{min-height:0;padding:24px 21px;}
 .about-page .about-icon-disk{width:57px;height:57px;}
 .about-page .about-product-card h3{font-size:24px;}
 .about-page .about-origin{padding:38px 0;}
 .about-page .about-origin-grid{gap:8px;}
 .about-page .about-layer-diagram{padding:20px 3px 0;}
 .about-page .about-how{padding:36px 0;}
 .about-page .about-facts{grid-template-columns:1fr 1fr;}
 .about-page .about-principles{padding:38px 0;}
 .about-page .about-principle{min-height:0;}
 .about-page .about-independent-inner{grid-template-columns:55px 1fr;gap:14px;}
 .about-page .about-independent-mark{min-height:130px;padding-right:12px;}
 .about-page .about-independent h2{font-size:28px;}
 .about-page .about-finish-inner{display:block;}
 .about-page .about-finish-actions{margin-top:20px;}
}
@media (max-width:420px){
 .about-page .about-product-card{gap:12px;padding:22px 17px;}
 .about-page .about-product-card h3{font-size:23px;}
 .about-page .about-icon-disk{width:48px;height:48px;}
 .about-page .about-finish-actions .btn-outline,.about-page .about-finish-actions .btn-solid {flex:1;min-width:135px;padding:10px 11px;font-size:13px;}
}

/* ── How they work ─────────────────────────────────────────────────────────
   Added with the content rewrite. Both products have a "how it works" section
   on their own landing pages; the parent site was the only page in the family
   without one, so a prospect met the positioning before meeting the mechanism. */
.about-page .about-how{background:#fff;padding:58px 0 56px}
.about-page .about-how .about-section-title{margin-bottom:26px;max-width:760px}
.about-page .about-how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;margin-bottom:30px}
.about-page .about-how-col h3{font-family:var(--serif);font-size:20px;color:var(--navy);
  line-height:1.25;margin:0 0 11px}
.about-page .about-how-col p{font-size:15.5px;line-height:1.62;color:var(--ink);
  margin:0 0 13px;max-width:560px}
.about-page .about-how-col a{font-weight:700;font-size:15px;color:var(--xray-blue);
  text-decoration:none}
.about-page .about-how-col a:hover{text-decoration:underline}
.about-page .about-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
.about-page .about-facts div{background:#fff;padding:17px 19px}
.about-page .about-facts b{display:block;font-family:var(--serif);font-size:30px;
  font-weight:700;color:var(--navy);line-height:1;margin-bottom:5px}
.about-page .about-facts span{font-size:13.5px;color:var(--ink-soft);line-height:1.42}
.about-page .about-principle-note{margin-top:22px;font-size:15px;line-height:1.63;
  color:var(--ink-soft);max-width:900px}

/* Long tokens must wrap rather than be clipped: main carries overflow:hidden, so
   an over-wide word is silently cut off instead of producing a scrollbar. */
.about-page .about-body,.about-page .about-how-col p,.about-page .about-independent p,
.about-page .about-diagram-step p,.about-page .about-product-card p{overflow-wrap:anywhere}