/* ============================================================================ Symbio Software — shared stylesheet for the public pitch site. This file lives at /software/assets/sw.css and is deliberately addressed at that path on EVERY hostname. src/worker.js rewrites in-page /software/ links down to / on symbiosoftware.com, but it skips /software/assets/ for exactly the same reason it skips /rc/img/: the asset store resolves that path on any hostname, so rewriting it would break the stylesheet on the real domain. ========================================================================== */ *{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#123524; --navy-deep:#0b2317; --navy-lift:#1b4a30; --cream:#f5f7f4; --cream-warm:#e9efe9; --ink:#1a1a1a; --body:#36403b; --muted:#5f6b62; --gold:#5a9b70; --gold-lt:#a8d8b8; --gold-dk:#1e5c3a; --line:#d7e0d8; --paper:#fbfcfa; } html{scroll-behavior:smooth} body{ background:var(--cream);color:var(--ink); font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:300;line-height:1.62; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;display:block} svg{display:block} a{color:inherit;text-decoration:none} em{font-style:italic;color:var(--gold-dk)} .dark em{color:var(--gold-lt)} /* ── header ───────────────────────────────────────────────────────────────── */ .sw-head{ position:sticky;top:0;z-index:50; background:rgba(18,53,36,0.96); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(90,155,112,0.28); } .sw-head-in{ max-width:1180px;margin:0 auto;padding:15px 24px; display:flex;align-items:center;gap:28px; } .sw-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto} .sw-brand svg{width:29px;height:29px} .sw-brand b{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:500; font-size:19px;letter-spacing:0.17em;text-transform:uppercase;color:#f6faf6;line-height:1; } .sw-brand span{ display:block;font-size:8.5px;letter-spacing:0.36em;text-transform:uppercase; color:var(--gold);margin-top:4px;font-weight:500; } .sw-nav{display:flex;align-items:center;gap:26px;margin-left:auto;flex-wrap:wrap} .sw-nav a{ font-size:12px;letter-spacing:0.15em;text-transform:uppercase; color:#cfdfd4;font-weight:400;padding:4px 0;border-bottom:1px solid transparent; transition:color .2s ease,border-color .2s ease; } .sw-nav a:hover{color:#f6faf6;border-bottom-color:var(--gold)} .sw-nav a.on{color:var(--gold-lt);border-bottom-color:var(--gold)} .sw-nav .cta{ border:1px solid var(--gold);border-radius:22px;padding:8px 18px;color:var(--gold-lt); } .sw-nav .cta:hover{background:var(--gold);color:var(--navy-deep);border-bottom-color:var(--gold)} @media(max-width:860px){ .sw-head-in{flex-wrap:wrap;gap:14px;padding:13px 18px} .sw-nav{gap:16px;margin-left:0;width:100%} .sw-nav a{font-size:11px;letter-spacing:0.11em} } /* ── a one-row header with a menu button, wherever the nav does not fit ─────── Card #1430 backlog 12 (phones + tablets) and backlog 13 (the same wrap on a small laptop), both 2026-09-10. Backlog 12: the nav wrapped under the brand and this bar is sticky, so it held 162px at 390px (19% of an iPhone 14 screen) and 205px at 320px (24%) permanently, before the page began. Backlog 13: above the old 860px cut-off the bar stopped wrapping under the brand, but the nav went on wrapping INSIDE the row — 123px against the 74px it costs once it fits. WHERE it fits is a PER-PAGE number, because the nav is one flex row and the pages do not all carry the same links. Measured live to the pixel (navband.js, 2026-09-10): the 11 pages carrying 8 links fit from 927px up; /real-estate and /lending carry a 9th contextual link (Database Coach / Loan Coach) and only fit from 1078px up. So the cut-off is deliberately NOT a media query here — sw.js counts the links and sets .sw-navc. One global number would be wrong in one direction or the other: at 1024px the two 9-link pages were still a 123px two-row bar, and collapsing every page at 1078px would hide a nav that fits perfectly. Progressive enhancement is unchanged: .sw-navjs and .sw-navc are both added by sw.js, so with JavaScript off the header renders exactly as it always has and no link is ever unreachable. */ .sw-burger{display:none} .sw-head.sw-navjs.sw-navc .sw-head-in{flex-wrap:nowrap;gap:12px} .sw-head.sw-navjs.sw-navc .sw-burger{ display:flex;align-items:center;justify-content:center;gap:8px; margin-left:auto;flex:0 0 auto; background:transparent;border:1px solid rgba(168,216,184,0.42);border-radius:22px; padding:9px 15px;color:#e8f2ea;cursor:pointer; font-family:inherit;font-size:11px;letter-spacing:0.15em;text-transform:uppercase; } .sw-head.sw-navjs.sw-navc .sw-burger:hover{border-color:var(--gold);color:#f6faf6} .sw-head.sw-navjs.sw-navc .sw-burger .bars{display:block;width:15px;height:9px;position:relative} .sw-head.sw-navjs.sw-navc .sw-burger .bars::before, .sw-head.sw-navjs.sw-navc .sw-burger .bars::after, .sw-head.sw-navjs.sw-navc .sw-burger .bars i{ content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor; border-radius:2px;transition:transform .18s ease,opacity .18s ease; } .sw-head.sw-navjs.sw-navc .sw-burger .bars::before{top:0} .sw-head.sw-navjs.sw-navc .sw-burger .bars i{top:3.75px} .sw-head.sw-navjs.sw-navc .sw-burger .bars::after{bottom:0} .sw-head.sw-navjs.sw-navc .sw-burger[aria-expanded="true"] .bars::before{transform:translateY(3.75px) rotate(45deg)} .sw-head.sw-navjs.sw-navc .sw-burger[aria-expanded="true"] .bars i{opacity:0} .sw-head.sw-navjs.sw-navc .sw-burger[aria-expanded="true"] .bars::after{transform:translateY(-3.75px) rotate(-45deg)} .sw-head.sw-navjs.sw-navc .sw-nav{ position:absolute;left:0;right:0;top:100%; display:none;flex-direction:column;align-items:stretch;gap:0;width:auto;margin:0; padding:4px 18px 14px; background:var(--navy); border-bottom:1px solid rgba(90,155,112,0.28); box-shadow:0 18px 34px rgba(0,0,0,0.34); max-height:calc(100vh - 70px);overflow-y:auto; } .sw-head.sw-navjs.sw-navc.sw-open .sw-nav{display:flex} .sw-head.sw-navjs.sw-navc .sw-nav a{ font-size:12px;letter-spacing:0.13em;padding:14px 2px; border-bottom:1px solid rgba(90,155,112,0.16); } .sw-head.sw-navjs.sw-navc .sw-nav a:last-child{border-bottom:0} .sw-head.sw-navjs.sw-navc .sw-nav .cta{ margin-top:13px;text-align:center;padding:13px 18px; border:1px solid var(--gold);border-radius:22px; } @media(prefers-reduced-motion:reduce){ .sw-head.sw-navjs.sw-navc .sw-burger .bars::before, .sw-head.sw-navjs.sw-navc .sw-burger .bars::after, .sw-head.sw-navjs.sw-navc .sw-burger .bars i{transition:none} } /* ── hero ─────────────────────────────────────────────────────────────────── */ .sw-hero{ padding:104px 24px 96px;text-align:center;color:#f6faf6;position:relative;overflow:hidden; background:radial-gradient(120% 120% at 50% 0%,var(--navy-lift) 0%,var(--navy) 55%,var(--navy-deep) 100%); } .sw-hero-in{max-width:920px;margin:0 auto;position:relative;z-index:2} .sw-eyebrow{ font-size:11px;letter-spacing:0.32em;text-transform:uppercase; color:var(--gold-lt);font-weight:500;margin-bottom:24px; } .sw-hero h1{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400; font-size:clamp(33px,5.4vw,60px);line-height:1.08;margin-bottom:22px; } /* The colour here is NOT optional. .lede below sets a dark body colour for the cream sections, and the hero is navy — without this override the hero's own sub-line inherits dark brown on dark blue and is effectively invisible. It shipped that way once; caught in a real-Chrome screenshot, not by any HTTP or console check, because a low-contrast page is a perfectly healthy page. */ .sw-hero p.lede{ font-family:"Cormorant Garamond",Georgia,serif;font-style:italic; font-size:clamp(18px,2.4vw,25px);line-height:1.45; color:#eaf1ea;opacity:0.92; max-width:790px;margin:0 auto 30px; } .sw-rule{width:48px;height:1px;background:var(--gold);margin:0 auto 26px} .sw-badges{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:34px} .sw-badge{ font-size:10px;letter-spacing:0.13em;text-transform:uppercase;font-weight:500; color:#cfe0cf;border:1px solid rgba(96,168,120,0.55);border-radius:20px; padding:5px 14px;display:inline-flex;align-items:center;gap:7px; } .sw-badge::before{ content:"";width:6px;height:6px;border-radius:50%;background:#5fb57f; box-shadow:0 0 8px rgba(95,181,127,0.8); } @media(max-width:740px){.sw-hero{padding:74px 20px 68px}} /* ── buttons ──────────────────────────────────────────────────────────────── */ .sw-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:8px} .sw-btn{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;letter-spacing:0.15em;text-transform:uppercase;font-weight:500; padding:14px 30px;border-radius:26px;border:1px solid var(--gold-lt); background:var(--gold-lt);color:var(--navy-deep);transition:all .2s ease; } .sw-btn:hover{background:#ffffff;border-color:#ffffff} .sw-btn.ghost{background:transparent;color:var(--gold-lt)} .sw-btn.ghost:hover{background:rgba(90,155,112,0.16);color:#f6faf6} .sw-btn.ink{background:var(--navy);border-color:var(--navy);color:#f6faf6} .sw-btn.ink:hover{background:var(--navy-lift);border-color:var(--navy-lift)} /* ── sections ─────────────────────────────────────────────────────────────── */ .sec{padding:92px 24px;background:var(--cream);position:relative;overflow:hidden} .in{max-width:1120px;margin:0 auto;width:100%} .warm{background:var(--cream-warm)} .dark{background:var(--navy);color:#f6faf6} .dark-deep{background:var(--navy-deep);color:#f6faf6} @media(max-width:740px){.sec{padding:66px 20px}} .label{ font-size:11px;letter-spacing:0.3em;text-transform:uppercase; /* AA contrast: was a hardcoded #7d9686 = 2.96:1 on cream. The gold tokens are the site's accent-TEXT palette (--gold is for rules and borders); --gold-dk is 7.4:1. */ color:var(--gold-dk);margin-bottom:20px;font-weight:500; } .dark .label,.dark-deep .label{color:var(--gold-lt)} .warm .label{color:var(--gold-dk)} h2.h2{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400; font-size:clamp(29px,4.4vw,45px);line-height:1.16;margin-bottom:18px;max-width:950px; } h3.h3{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400; font-size:clamp(21px,2.7vw,29px);line-height:1.22;margin:0 0 10px; } .lede{font-size:18px;line-height:1.62;color:var(--body);font-weight:300;max-width:820px} .dark .lede,.dark-deep .lede{color:#cfdcd2} .kick{ font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:21px; color:var(--gold-dk);margin-top:26px;max-width:860px;line-height:1.45; } .dark .kick,.dark-deep .kick{color:var(--gold-lt)} /* ── cards / grids ────────────────────────────────────────────────────────── */ .grid{display:grid;gap:18px;margin-top:38px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.g3{grid-template-columns:1fr 1fr}} @media(max-width:760px){.g2,.g3{grid-template-columns:1fr}} /* A lone card in the last row of a 2- or 3-up grid left a half-width hole beside it: measured 7-item .g2 grids on home + packages at 1440, and 3-item .g3 grids on home, real-estate, lending and time-savings at 880 where .g3 drops to two columns. Span the orphan across the row - the site's own .sw-field.wide convention. At <=760px every grid is one column, so 1 / -1 spans that single column and this is a no-op. */ .g2 > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1} @media(min-width:901px){.g3 > :last-child:nth-child(3n+1):not(:first-child){grid-column:1 / -1}} @media(max-width:900px){.g3 > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1}} .card{ background:#fff;border:1px solid var(--line);border-radius:11px;padding:26px 26px; transition:transform .22s ease,box-shadow .22s ease; } .warm .card{background:var(--paper)} .dark .card,.dark-deep .card{background:rgba(255,255,255,0.05);border-color:rgba(90,155,112,0.28)} .card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(18,53,36,0.55)} .card .k{ font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase; color:var(--gold-dk);margin-bottom:11px;font-weight:600; } .dark .card .k,.dark-deep .card .k{color:var(--gold-lt)} .card h4{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:22px; line-height:1.24;margin-bottom:9px;color:var(--navy); } .dark .card h4,.dark-deep .card h4{color:#f6faf6} .card p{font-size:15.5px;color:var(--body);line-height:1.62} .dark .card p,.dark-deep .card p{color:#cbdbd0} /* Card CTA link ("where you are now" doors on home): it is a real link but on the light card it inherited plain body text, so it read as a dangling sentence fragment. Give it the card's own accent green, a little weight, an arrow and separation so it is visibly clickable. Scoped to warm-section cards so footer/contact/caption .fine links are untouched. */ .warm .card .fine{margin-top:15px;margin-bottom:0} .warm .card .fine a{ color:var(--gold-dk);font-weight:500;text-decoration:none; border-bottom:1px solid rgba(30,92,58,0.32);padding-bottom:1px; transition:color .18s ease,border-color .18s ease; } .warm .card .fine a::after{content:"\00a0\2192";font-weight:600} .warm .card .fine a:hover{color:var(--navy);border-bottom-color:rgba(18,53,36,0.65)} /* numbered feature block */ .feat{ border-top:1px solid rgba(90,155,112,0.28);padding:34px 0 6px; display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start; } .feat b.n{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:44px; line-height:0.9;color:var(--gold);opacity:0.55; font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1; } .dark .feat b.n,.dark-deep .feat b.n{color:var(--gold-lt);opacity:0.6} @media(max-width:640px){.feat{grid-template-columns:1fr;gap:6px}.feat b.n{font-size:34px}} /* bullet list */ ul.list{list-style:none;margin:22px 0 0;padding:0;max-width:880px} ul.list li{ padding:13px 0 13px 26px;position:relative;font-size:16px;color:var(--body); line-height:1.6;border-bottom:1px solid rgba(90,155,112,0.16); } .dark ul.list li,.dark-deep ul.list li{color:#cfdcd2;border-bottom-color:rgba(90,155,112,0.22)} ul.list li:last-child{border-bottom:none} ul.list li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--gold)} ul.list strong{color:var(--navy);font-weight:500} .dark ul.list strong,.dark-deep ul.list strong{color:#f6faf6} /* stat row */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px} @media(max-width:820px){.stats{grid-template-columns:1fr 1fr}} .stat{ border:1px solid rgba(90,155,112,0.32);border-radius:10px;padding:22px 18px;text-align:center; background:rgba(255,255,255,0.04); } .sec:not(.dark):not(.dark-deep) .stat{background:#fff;border-color:var(--line)} .stat b{ display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500; font-size:34px;line-height:1;color:var(--gold-dk); font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1; } .dark .stat b,.dark-deep .stat b{color:var(--gold-lt)} .stat small{ display:block;margin-top:9px;font-size:11px;letter-spacing:0.15em; text-transform:uppercase;color:var(--muted);line-height:1.5; } .dark .stat small,.dark-deep .stat small{color:#a3c0ac} /* pill row */ .pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .pill{ font-size:11.5px;letter-spacing:0.09em;text-transform:uppercase;font-weight:500; border:1px solid var(--line);border-radius:18px;padding:7px 15px;color:var(--body);background:#fff; } .dark .pill,.dark-deep .pill{border-color:rgba(90,155,112,0.3);background:rgba(255,255,255,0.05);color:#cfdcd2} /* package table */ /* Card #1430, 2026-09-13: this grid was built for THREE packages. The tiers were later cut to two, and the third track stayed behind - so on BOTH pages that use .packs (home and packages) the two cards sat in columns 1-2 and left a 379px dead column on the right, measured live at 1440. Two tracks, so the cards fill the content width they are given. align-items:start is deliberate and MUST STAY - see the hour 16 note in packages.html for why align-items:stretch was tried, looked at, and rejected. */ .packs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px;align-items:start} @media(max-width:900px){.packs{grid-template-columns:1fr}} .pack{ background:#fff;border:1px solid var(--line);border-radius:13px;padding:32px 28px; display:flex;flex-direction:column; } .pack.featured{border-color:var(--gold);box-shadow:0 26px 60px -42px rgba(18,53,36,0.6)} .pack .tier{ font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-dk); font-weight:600;margin-bottom:14px; } .pack h3{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:29px; line-height:1.15;color:var(--navy);margin-bottom:12px; } .pack p.for{font-size:15px;color:var(--muted);font-style:italic;margin-bottom:20px;line-height:1.55} .pack ul{list-style:none;margin:0 0 24px;padding:0} .pack ul li{ font-size:15px;color:var(--body);padding:9px 0 9px 22px;position:relative;line-height:1.55; border-bottom:1px solid rgba(90,155,112,0.13); } .pack ul li:last-child{border-bottom:none} .pack ul li::before{ content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--gold); } .pack .foot{margin-top:auto;padding-top:8px} .pack .quote{ font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted); margin-bottom:14px;font-weight:500; } .pack .price{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:36px; line-height:1.05;color:var(--navy);margin-bottom:4px; } .pack .price span{ font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0.02em; } .pack .usage{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px} /* tier indicator — three brand octagons, filled to show where the package sits (1/2/3) */ .pack-tier{display:flex;gap:6px;align-items:center;margin-bottom:16px} .pack-tier svg{width:19px;height:19px;display:block;flex:none} .pack-tier .oc{fill:none;stroke:var(--line);stroke-width:3.4;stroke-linejoin:round} .pack-tier .oc.on{fill:var(--gold);stroke:var(--gold-dk);stroke-width:2.4} .pack.featured .pack-tier .oc.on{fill:var(--gold-dk);stroke:var(--gold-dk)} /* quiet note box */ .note{ border:1px solid rgba(90,155,112,0.34);border-radius:11px;background:var(--paper); padding:24px 26px;margin-top:34px;max-width:920px; } .dark .note,.dark-deep .note{background:rgba(255,255,255,0.045);border-color:rgba(90,155,112,0.3)} .note p{font-size:15.5px;color:var(--body);line-height:1.62} .dark .note p,.dark-deep .note p{color:#cfdcd2} /* news list */ .news-list{margin-top:38px;border-top:1px solid rgba(90,155,112,0.24)} .news-item{ display:block;padding:26px 0;border-bottom:1px solid rgba(90,155,112,0.24); transition:padding-left .2s ease; } .news-item:hover{padding-left:10px} .news-item .meta{ font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:9px; } .news-item h3{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:26px; line-height:1.2;color:var(--navy);margin-bottom:8px; } .news-item p{font-size:15.5px;color:var(--body);max-width:820px} .news-empty{ border:1px dashed rgba(90,155,112,0.45);border-radius:11px;padding:38px 30px; text-align:center;margin-top:34px;background:var(--paper); } .news-empty p{color:var(--muted);font-size:16px;font-style:italic} /* CTA strip */ .cta-strip{ padding:86px 24px;text-align:center;color:#f6faf6; background:radial-gradient(120% 140% at 50% 0%,var(--navy-lift) 0%,var(--navy) 60%,var(--navy-deep) 100%); } .cta-strip h2{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:400; font-size:clamp(27px,4vw,42px);line-height:1.15;margin-bottom:16px; } .cta-strip p{ font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:20px; opacity:0.86;max-width:720px;margin:0 auto 30px;line-height:1.5; } /* footer */ .sw-foot{background:var(--navy-deep);color:#a3c0ac;padding:54px 24px 40px;font-size:14px} .sw-foot-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between} .sw-foot a{color:#cfdfd4} .sw-foot a:hover{color:var(--gold-lt)} .sw-foot .cols{display:flex;flex-wrap:wrap;gap:52px} .sw-foot h5{ font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold); font-weight:600;margin-bottom:13px; } .sw-foot ul{list-style:none} .sw-foot ul li{margin-bottom:8px;font-size:14px} .sw-foot .fine{ max-width:1120px;margin:38px auto 0;padding-top:22px; border-top:1px solid rgba(90,155,112,0.22);font-size:12.5px;color:#85a08d;line-height:1.7; } @media(max-width:760px){ .sw-foot ul li{margin-bottom:0} .sw-foot ul li a{display:block;padding:4px 0} } /* reveal-on-scroll */ .rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .rev.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .rev{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .card:hover{transform:none} } /* skip link — keyboard users land on the content, not the nav, on every page */ .skip{ position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy-deep); padding:10px 18px;z-index:99;font-size:13px;letter-spacing:0.1em;text-transform:uppercase; } .skip:focus{left:12px;top:12px} /* ── lead capture (card 1204) ────────────────────────────────────────────────── One form pattern used on every page. It sits on the dark navy band so it reads as the deliberate end of the page rather than a bolted-on widget, and it keeps the same gold rule / uppercase label vocabulary as the rest of the site. */ .sw-cap{ padding:86px 24px; background:radial-gradient(120% 140% at 50% 0%,var(--navy-lift) 0%,var(--navy) 60%,var(--navy-deep) 100%); color:#f6faf6; } .sw-cap-in{max-width:760px;margin:0 auto;text-align:center} .sw-cap .label{color:var(--gold-lt)} .sw-cap h2.h2{color:#f6faf6} .sw-cap .lede{color:#cfdcd2;margin:0 auto;text-align:center} .sw-cap .sw-rule{margin:20px auto 26px} .sw-form{margin-top:34px;text-align:left} .sw-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .sw-field{display:block} .sw-field.wide{grid-column:1 / -1} .sw-field > span{ display:block;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase; color:var(--gold-lt);font-weight:500;margin-bottom:7px; } .sw-field input,.sw-field textarea,.sw-field select{ width:100%;font-family:"Jost",Helvetica,Arial,sans-serif;font-size:15.5px;font-weight:300; color:#f6faf6;background:rgba(255,255,255,0.06); border:1px solid rgba(90,155,112,0.34);border-radius:9px; padding:13px 14px;transition:border-color .18s ease,background .18s ease; } .sw-field textarea{min-height:118px;resize:vertical;line-height:1.6} .sw-field input:focus,.sw-field textarea:focus,.sw-field select:focus{ outline:none;border-color:var(--gold);background:rgba(255,255,255,0.1); } .sw-field input::placeholder,.sw-field textarea::placeholder{color:#93ad9c} /* honeypot — never shown to a person, never announced to a screen reader */ .sw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sw-consent{ display:flex;align-items:flex-start;gap:11px;margin-top:18px; font-size:13.5px;line-height:1.6;color:#cbdbd0;font-weight:300; } .sw-consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--gold);flex:0 0 auto} .sw-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px} .sw-form button[type="submit"]{ font-family:"Jost",Helvetica,Arial,sans-serif; font-size:12.5px;letter-spacing:0.15em;text-transform:uppercase;font-weight:500; padding:14px 30px;border-radius:26px;border:1px solid var(--gold-lt); background:var(--gold-lt);color:var(--navy-deep);cursor:pointer;transition:all .2s ease; } .sw-form button[type="submit"]:hover{background:#ffffff;border-color:#ffffff} .sw-form button[type="submit"]:disabled{opacity:0.55;cursor:default} .sw-form-msg{font-size:14.5px;line-height:1.55;font-weight:300;min-height:1em} .sw-form-msg.ok{color:var(--gold-lt)} .sw-form-msg.err{color:#f0b7a8} .sw-form-msg.wait{color:#cbdbd0} .sw-cap .fine{ margin-top:20px;font-size:12.5px;color:#93ad9c;line-height:1.65;font-weight:300; } .sw-cap .fine a{color:#cfdfd4;border-bottom:1px solid rgba(90,155,112,0.5)} .sw-cap .fine a:hover{color:var(--gold-lt)} @media(max-width:640px){ .sw-fgrid{grid-template-columns:1fr} .sw-cap{padding:66px 20px} } /* ── real product screenshots (card 1232) ───────────────────────────────────── Every image under .shot is a real screen from the running product, framed rather than cropped, so a visitor is looking at the thing itself. */ .shot{ margin:34px 0 4px;border:1px solid var(--line);border-radius:12px;overflow:hidden; background:#fff;box-shadow:0 26px 54px -34px rgba(18,53,36,0.55); } .dark .shot,.dark-deep .shot{border-color:rgba(90,155,112,0.32);background:rgba(255,255,255,0.04)} .shot-bar{ display:flex;align-items:center;gap:7px;padding:10px 14px; background:var(--cream-warm);border-bottom:1px solid var(--line); } .dark .shot-bar,.dark-deep .shot-bar{background:rgba(255,255,255,0.06);border-bottom-color:rgba(90,155,112,0.28)} .shot-bar i{width:9px;height:9px;border-radius:50%;background:#c3d3c7;display:block;flex:0 0 auto} .shot-bar em{ margin-left:8px;font-style:normal;font-size:11px;letter-spacing:0.16em; text-transform:uppercase;color:var(--muted); } .dark .shot-bar em,.dark-deep .shot-bar em{color:#9fb6a6} /* THE MAT — card 1268, Derek: "all of these screenshots have a weird marroon orangish border around them". Six product screenshots run across this site. Three were exported with a neutral mat baked in; three are cropped hard to the captured edge, so whatever colour happened to sit at that edge became the rim inside the frame. MEASURED on the live files as edge warmth (R minus B at the midpoint of each side): shot-search left +71, right +62, bottom +25 — the map's warm sand and the panel behind the listing grid; shot-news bottom +37. The three matted PNGs measure +8 or less. So the rim is the picture's own edge, not a border anyone wrote, which is why it showed on some shots and not others and why nothing in this palette is maroon. Matting every screenshot HERE, rather than re-cutting three pictures, fixes it once and stops any FUTURE screenshot bleeding its edge colour in. box-sizing:border-box is global (top of this file), so the padding shrinks the image instead of overflowing the frame. */ .shot img{display:block;width:100%;height:auto;background:var(--cream);padding:10px;border-radius:4px} /* In a dark section the mat must follow the section, or it lights a pale rim exactly where the warm one used to be. Shots DO sit inside .dark on real-estate, platform, home, lending and about — checked in the markup, not assumed. */ .dark .shot img,.dark-deep .shot img{background:transparent} .shot figcaption{ padding:14px 17px;font-size:14px;line-height:1.58;color:var(--body); border-top:1px solid var(--line);background:var(--paper); } .dark .shot figcaption,.dark-deep .shot figcaption{ color:#cfdcd2;background:rgba(255,255,255,0.03);border-top-color:rgba(90,155,112,0.28); } /* align-items:start, or a short screen stretches to the height of a tall one beside it and hangs a band of empty card under its caption. */ .shots{display:grid;gap:20px;margin:34px 0 4px;align-items:start} /* The pair never goes two-up, at any width — hour 11, 2026-09-10, card #1430 backlog 4/9. Hour 8 collapsed it at 1000px and left the wider band alone as "a desktop choice": at a 820px viewport each frame was 688px, at 821px it dropped to 374px, and the whole tablet band sat in that hole reading a five-column listing grid at ~26% of native. MEASURED above that band, the desktop choice does not survive either. At 1440 each frame is 548px, so shot-search.jpg (1440 native) draws at 0.381x and shot-dialer.png at 0.449x, barely better than the tablet hole. AND IT NEVER IMPROVES WITH ROOM: at a 2560px viewport the frames are still 548px, because the container is capped — there is no screen a visitor can bring that makes a side-by-side frame legible, and reaching the 900px legibility floor this file already adopted for phones (.shot-sc, below) would need a ~1820px container. Stacked, the same four shots draw 0.718x–0.916x, in line with every other full-width shot on these pages (0.72–0.88x). The two-up pair was the only thing on either page halving the scale, and a screenshot nobody can read is decoration, not proof. Nothing below 1000px moves (re-measured at 390: every shot identical, page height +0). Only /home and /platform use .shots.two, two frames each. */ .shots.two{grid-template-columns:1fr} .shots .shot{margin:0} /* ── drawn diagrams (card 1236) ─────────────────────────────────────────────── Same frame as .shot above, but the figure inside is DRAWN rather than captured. This exists because the honest set of real screenshots is small: most of the remaining ones carry a real client's name, address or valuation (KB 2506) and can never go on a public page, and the lending side has no product screens of its own yet. A diagram can say what the system does without putting anybody's address on the internet — and it is still a picture, which is the actual complaint a page of solid text earns. */ .shot svg{display:block;width:100%;height:auto;background:var(--paper)} .dia .shot-bar em{color:var(--gold-dk)} .dark .dia .shot-bar em,.dark-deep .dia .shot-bar em{color:var(--gold-lt)} .dark .shot svg,.dark-deep .shot svg{background:#fbfcfa} /* ---------- MOTION: hero entrance + reveal stagger + button lift (auditor pass 1, card 6a9c1bd1, 2026-09-05) ---------- The hero carries no data-rev, so it had no motion of its own; its content now rises in on load, staggered. The existing .rev scroll-reveal (added by sw.js) is untouched — grids just cascade a touch now instead of popping in together. Everything here is off under prefers-reduced-motion, and applied only under no-preference so a hero can never be left hidden. */ @keyframes swHeroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: no-preference){ .sw-hero-in>*{opacity:0;animation:swHeroRise .8s cubic-bezier(.16,.7,.3,1) forwards;animation-delay:var(--swd,0s)} .sw-hero-in>.sw-eyebrow{--swd:.05s} .sw-hero-in>h1{--swd:.14s} .sw-hero-in>.sw-rule{--swd:.26s} .sw-hero-in>p.lede{--swd:.32s} .sw-hero-in>.sw-btns{--swd:.42s} .sw-hero-in>.sw-hero-ask{--swd:.50s} .sw-hero-in>.sw-badges{--swd:.58s} /* grid cards cascade in rather than all at once */ .grid .rev:nth-child(2){transition-delay:.08s} .grid .rev:nth-child(3){transition-delay:.16s} .grid .rev:nth-child(4){transition-delay:.24s} } /* buttons lift a touch on hover (matches the card hover already on the page) */ .sw-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(18,53,36,.75)} @media (prefers-reduced-motion: reduce){ .sw-btn:hover{transform:none;box-shadow:none} } /* ---------- MOTION: hero ambient depth (auditor pass 4, card 6a9c1bd1, 2026-09-05) ---------- The hero sits on all 8 software pages and its background was a single flat radial gradient. Two large, very soft brand-green glows now drift slowly behind the content, giving the navy real depth and a premium "alive" feel — the "lots of graphics/animations, sleek" the card asks for — without ever competing with the headline. Purely decorative: the glows sit at z-index 0 while the hero content (.sw-hero-in) is z-index 2; they animate transform/scale only (opacity is fixed, so no flicker) which keeps them on the GPU; and the drift is fully OFF under prefers-reduced-motion, where the static glow stays so the depth is there either way. .sw-hero is already position:relative + overflow:hidden, so nothing escapes the band. No HTML change — every software page gains this at once. */ .sw-hero::before,.sw-hero::after{ content:"";position:absolute;z-index:0;pointer-events:none; width:min(72vw,760px);height:min(72vw,760px);border-radius:50%; } .sw-hero::before{ top:-20%;left:-12%;opacity:.16; background:radial-gradient(circle,rgba(168,216,184,.85) 0%,rgba(168,216,184,0) 68%); } .sw-hero::after{ bottom:-26%;right:-14%;opacity:.14; background:radial-gradient(circle,rgba(95,181,127,.8) 0%,rgba(95,181,127,0) 66%); } @media (prefers-reduced-motion: no-preference){ .sw-hero::before{animation:swGlowA 16s ease-in-out infinite alternate} .sw-hero::after{animation:swGlowB 20s ease-in-out infinite alternate} } @keyframes swGlowA{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(7%,5%,0) scale(1.14)} } @keyframes swGlowB{ from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(-6%,-4%,0) scale(1)} } /* ---------- MOTION: product screenshot hover (auditor pass 5, card 6a9c1bd1, 2026-09-05) ---------- The framed product screenshots (.shot) are the proof on this site — real screens from the running product. They sat completely static. On hover the frame now lifts a touch and deepens its shadow — the exact same gesture the content cards already use, so it reads as one design language — and the real photo inside gently zooms, which makes the live-product screens feel tangible and invites a closer look. The lift applies to every .shot (photos and the drawn diagrams alike); the inner zoom is limited to .shot img so the SVG diagrams are not distorted. Desktop-only by nature (hover); touch keeps the already-good static presentation, so it is never a regression. Fully OFF under prefers-reduced-motion. One shared style — every page that shows a screenshot gains it. */ .shot{transition:transform .3s ease,box-shadow .4s ease} .shot:hover{transform:translateY(-3px);box-shadow:0 34px 66px -32px rgba(18,53,36,.6)} .shot img{transition:transform .5s cubic-bezier(.16,.7,.3,1)} .shot:hover img{transform:scale(1.03)} @media (prefers-reduced-motion: reduce){ .shot,.shot img{transition:none} .shot:hover{transform:none} .shot:hover img{transform:none} } /* ---------- editorial section-heading accent (auditor pass 6, card 6a9c1bd1, 2026-09-05) ---------- Section headings sat as plain text under a small eyebrow label, so down a long page the sections read flat and the eyebrow -> heading -> body rhythm had no visual anchor. Each section heading now carries a short brand-green rule beneath it that draws itself in as the heading scrolls into view, giving every page the same editorial finish the hero already has (its .sw-rule) and pulling the eye cleanly from one section to the next. Scoped to .sec headings only, so the already-accented centred CTA bands (.sw-cap, .cta-strip) keep their own centred rule and are untouched. One shared style -> every software page gains it at once. Pure CSS, no HTML change. Robust by design: the rule defaults to full width, so under prefers-reduced-motion (where sw.js adds no reveal class) or if the reveal script never loads, it is simply present and static; the draw-in only engages once sw.js marks the heading .rev, i.e. when motion is allowed. */ .sec .h2{position:relative} .sec .h2::after{ content:"";display:block;height:2px;width:46px;margin-top:16px;border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-dk)); } .sec.dark .h2::after,.sec.dark-deep .h2::after{ background:linear-gradient(90deg,var(--gold-lt),var(--gold)); } @media (prefers-reduced-motion: no-preference){ .sec .h2.rev::after{width:0;transition:width .85s cubic-bezier(.2,.7,.2,1) .15s} .sec .h2.rev.in::after{width:46px} } /* ---------- MOTION: word-by-word heading entrance (auditor pass 10, card 6a9c1bd1, 2026-09-05) ---------- Derek: "Animate text feel we need more animation". Section headings faded in as one block; they now arrive a word at a time, left to right, which is the single most legible way to animate text and suits a Cormorant headline. sw.js does the splitting at runtime and only for plain-text headings, so the markup and the source a search engine reads are unchanged, and the heading keeps its whole sentence as an aria-label with the word spans hidden from screen readers. Safety: the word cascade REPLACES the block fade for these headings rather than stacking on top of it, and the reveal class it hangs on is the same one sw.js guarantees within a few seconds even if the scroll observer never fires. With JavaScript off, reduced motion on, or the split skipped, the heading is simply the plain sentence it always was. */ html.swjs .h2.wdz.rev{opacity:1;transform:none;transition:none} html.swjs .h2.wdz .wd{ display:inline-block;opacity:0;transform:translateY(15px); transition:opacity .55s cubic-bezier(.2,.85,.3,1),transform .55s cubic-bezier(.2,.85,.3,1); transition-delay:var(--wd,0s); } html.swjs .h2.wdz.in .wd{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html.swjs .h2.wdz .wd{opacity:1;transform:none;transition:none} } /* ---------- drawn diagrams on a phone (auditor pass 12, card 6a9c1bd1, 2026-09-05) ---------- MEASURED at a real 390px viewport, not assumed: a .dia figure renders 348px wide for a 900-unit viewBox, so its 15px labels come out at 5.8 actual pixels. Every drawn diagram on this site was therefore unreadable on a phone — including the real-call transcript, which is some of the best proof we have. Rather than redraw them, the drawing keeps a legible minimum width and its frame scrolls sideways, which is exactly what the comparison table on the home page already does at this width. At 660px the same labels land at about 11px. Desktop is untouched: nothing here applies above 760px, and a diagram whose markup has no .dia-sc wrapper behaves exactly as it did before. */ .dia-sc{display:block} @media (max-width:760px){ .dia-sc{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch} .dia-sc svg{min-width:660px} } /* ── DEMO FILMS (card #1396, 2026-09-06) ────────────────────────────────────── Same frame as .shot above, but the media is a