/* darch.cloud shared styles. Brand: emerald and gold from the arch logo, olive and wood as support, white paper.
   No JavaScript and no outside requests: Public Sans is served from /assets/fonts (SIL Open Font License, see OFL.txt). */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#fefefc;--soft:#f5f2e9;--card:#ffffff;--ink:#2b2118;--mute:#665a4d;--line:#e6dfd0;
  --green:#145c45;--deep:#0b3327;--deep2:#0f4435;--olive:#6f7d3c;--gold:#b8892a;--goldhi:#dcb458;--wood:#8a5a2b;
  --ongreen:#f4f7f2;--ongreenmute:#b9cdc3;--ok:#1d7a55;--bad:#a8321a;
  --shadow:0 1px 2px rgba(43,33,24,.06),0 8px 24px rgba(43,33,24,.06);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12110d;--soft:#1b1914;--card:#1f1c16;--ink:#f3efe6;--mute:#b6ab9b;--line:#363026;
  --green:#63c39a;--deep:#0a2a20;--deep2:#0d382c;--olive:#a7b866;--gold:#d9ae4c;--goldhi:#e7c477;--wood:#c9966a;
  --ongreen:#f4f7f2;--ongreenmute:#a9c2b6;--ok:#63c39a;--bad:#ff8c72;--shadow:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{
  --bg:#12110d;--soft:#1b1914;--card:#1f1c16;--ink:#f3efe6;--mute:#b6ab9b;--line:#363026;
  --green:#63c39a;--deep:#0a2a20;--deep2:#0d382c;--olive:#a7b866;--gold:#d9ae4c;--goldhi:#e7c477;--wood:#c9966a;
  --ongreen:#f4f7f2;--ongreenmute:#a9c2b6;--ok:#63c39a;--bad:#ff8c72;--shadow:0 1px 2px rgba(0,0,0,.4)}
*{box-sizing:border-box}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6}
a{color:var(--green);text-underline-offset:3px}
a:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1b1408;padding:10px 16px;font-weight:700;z-index:30}
.skip:focus{left:12px;top:12px}
.grain{height:6px;background:repeating-linear-gradient(90deg,#a8774a 0 38px,#b98657 38px 71px,#9a6a40 71px 120px,#b07f50 120px 150px)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green);font-weight:700;letter-spacing:.16em;font-size:19px}
.brand svg{width:34px;height:34px;flex:none}
.nav{display:flex;gap:4px 6px;flex-wrap:wrap;align-items:center;margin-left:auto}
.nav a{color:var(--mute);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:4px}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold);border-radius:0}
.top .go{padding:9px 16px;font-size:15px}

/* type */
h1{font-size:clamp(36px,5.6vw,60px);line-height:1.06;letter-spacing:-.022em;margin:0 0 20px;font-weight:650}
h1.page{font-size:clamp(32px,4.6vw,48px)}
h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.012em;margin:0 0 10px;font-weight:650}
h3{font-size:18px;line-height:1.3;margin:0 0 6px;font-weight:650}
p{margin:0 0 16px;max-width:70ch}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin:0 0 14px}
.lead{font-size:19px;color:var(--mute);max-width:62ch;margin:0 0 28px}
.sub{color:var(--mute);margin:0 0 30px;max-width:64ch}
section{padding:84px 0 0}
section.tight{padding-top:56px}
.band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:76px 0;margin-top:84px}
.band>section,.band section{padding-top:0}

/* buttons */
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;background:var(--gold);color:#1b1408;text-decoration:none;padding:13px 22px;border-radius:4px;font-weight:650;font-size:16px;border:2px solid var(--gold);cursor:pointer;font-family:inherit;line-height:1.3}
.btn:hover{background:var(--goldhi);border-color:var(--goldhi)}
.btn.line{background:transparent;color:var(--green);border-color:var(--green)}
.btn.line:hover{background:var(--soft)}
.more{font-weight:650;text-decoration:none}
.more::after{content:" →"}
.more:hover{text-decoration:underline}

/* hero */
.hero{background:radial-gradient(900px 500px at 88% 10%,rgba(184,137,42,.22),transparent 60%),linear-gradient(155deg,var(--deep) 0%,var(--deep2) 100%);color:var(--ongreen)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding-top:76px;padding-bottom:84px}
.hero .eyebrow{color:var(--goldhi)}
.hero .lead{color:#dbe7e0}
.hero .btn.line{color:var(--ongreen);border-color:rgba(244,247,242,.55)}
.hero .btn.line:hover{background:rgba(255,255,255,.08)}
.watch{background:rgba(255,255,255,.06);border:1px solid rgba(220,180,88,.4);border-radius:8px;padding:22px 24px 10px}
.watch h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--goldhi);margin:0 0 6px;font-weight:700}
.watch ul{list-style:none;margin:0;padding:0}
.watch li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:16px}
.watch li span:last-child{color:var(--ongreenmute);font-size:14px;text-align:right;white-space:nowrap}
.watch li span:first-child::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#6fd0a3;margin-right:10px;vertical-align:1px}
.watch p{font-size:13px;color:var(--ongreenmute);margin:10px 0 6px}

/* trust strip */
.trust{border-bottom:1px solid var(--line);background:var(--card)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust li{padding:22px 20px;border-left:1px solid var(--line)}
.trust li:first-child{border-left:0;padding-left:0}
.trust b{display:block;font-size:22px;font-weight:650;color:var(--green);line-height:1.2;letter-spacing:-.01em}
.trust span{display:block;color:var(--mute);font-size:14.5px;line-height:1.4;margin-top:4px}

/* cards and tiles */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:26px 26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card.top-green{border-top:4px solid var(--green)}.card.top-olive{border-top:4px solid var(--olive)}.card.top-gold{border-top:4px solid var(--gold)}.card.top-wood{border-top:4px solid var(--wood)}
.card p{color:var(--mute);font-size:16px;margin:0 0 14px}
.card ul{margin:0 0 16px;padding-left:20px;color:var(--mute);font-size:16px}
.card li{margin:0 0 5px}
.card .from{margin-top:auto;color:var(--ink);font-size:15.5px}
.card .from strong{color:var(--green);font-size:20px}
.tile h3{display:flex;align-items:center;gap:10px}
.tile h3::before{content:"";width:10px;height:10px;background:var(--gold);border-radius:2px;flex:none;transform:rotate(45deg)}
.tile p{color:var(--mute);font-size:16px;margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px}

/* switchboard diagram */
.panel{border:1px solid var(--line);border-radius:8px;padding:22px 24px;background:var(--card);box-shadow:var(--shadow)}
.scroll{overflow-x:auto}
.board{min-width:600px;width:100%;height:auto;display:block}
.board .node{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.board .you{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.board .hub{fill:var(--green);stroke:none}
.board .busy{stroke:var(--gold);stroke-width:2;fill:none}
.board .calm{stroke:var(--green);stroke-width:2;fill:none}
.board .only{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 5;fill:none}
.board text{fill:var(--ink);font-family:inherit;font-size:12.5px;text-anchor:middle}
.board .t{font-size:15px;font-weight:650;text-anchor:start}
.board .cap{fill:var(--mute);font-size:13px;text-anchor:start}
.board .hubt{fill:#fff;font-weight:650;font-size:13px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .board .hubt{fill:#0f1a14}}
.board .youx{font-weight:650}
.board .sep{stroke:var(--line);stroke-width:1.5}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:flex;width:34px;height:34px;border-radius:50%;background:var(--green);color:var(--bg);align-items:center;justify-content:center;font-weight:650;margin-bottom:12px}
.steps p{margin:0;font-size:16px;color:var(--mute)}

/* plan tiers */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.tier{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px 22px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tier.pick{border:2px solid var(--gold);position:relative}
.tier.pick::before{content:attr(data-flag);position:absolute;top:-12px;left:20px;background:var(--gold);color:#1b1408;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:3px}
.tier h3{font-size:19px;margin-bottom:4px}
.tier .for{color:var(--mute);font-size:15px;margin:0 0 16px;min-height:3.1em}
.tier .price{font-size:34px;font-weight:650;letter-spacing:-.02em;color:var(--green);line-height:1.1;margin:0}
.tier .price small{font-size:15px;font-weight:500;color:var(--mute);letter-spacing:0}
.tier .per{color:var(--mute);font-size:14.5px;margin:2px 0 16px}
.tier ul{list-style:none;margin:0 0 20px;padding:0;font-size:15.5px}
.tier li{padding:7px 0 7px 24px;border-top:1px solid var(--line);position:relative;color:var(--ink)}
.tier li::before{content:"";position:absolute;left:3px;top:14px;width:10px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.tier .btn{margin-top:auto;text-align:center}

/* price tables */
.tablewrap{overflow-x:auto;border-top:2px solid var(--gold)}
table.prices{width:100%;border-collapse:collapse;min-width:560px}
.prices th,.prices td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.prices th{font-size:14px;color:var(--mute);font-weight:650}
.prices td:first-child{width:26%;font-weight:650}
.prices td:last-child{white-space:nowrap;text-align:right;padding-right:0;font-weight:650;color:var(--green)}
.prices th:last-child{text-align:right;padding-right:0}
.prices .what{color:var(--mute);font-size:16px}
dl.terms{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:12px 24px;margin:0}
dl.terms dt{font-weight:650}
dl.terms dd{margin:0;color:var(--mute)}

/* work page */
.case{border-left:3px solid var(--green);padding-left:22px}
.case h3{margin-top:22px}
.case ul{color:var(--mute);padding-left:20px}
.history{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.history li{position:relative;padding:0 0 18px 22px}
.history li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.history time{display:block;font-size:14px;color:var(--mute)}
.spec{width:100%;border-collapse:collapse;font-size:16px}
.spec th,.spec td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.spec th{width:30%;font-weight:650}
.spec td{color:var(--mute)}
.prose h2{margin-top:44px}
.prose h2:first-child{margin-top:0}
.prose ul{color:var(--mute);padding-left:20px;max-width:70ch}
.prose li{margin:0 0 6px}

/* form */
.formgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;align-items:start}
form.ask{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:var(--shadow)}
.ask fieldset{border:0;margin:0 0 22px;padding:0}
.ask legend{font-weight:650;font-size:18px;padding:0;margin-bottom:12px}
.ask label{display:block;font-weight:600;font-size:15.5px;margin:0 0 6px}
.ask .hint{font-weight:400;color:var(--mute);font-size:14.5px}
.ask input[type=text],.ask input[type=email],.ask input[type=tel],.ask select,.ask textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid #b9ae9b;border-radius:4px;padding:11px 12px}
.ask textarea{min-height:150px;resize:vertical}
.ask .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.ask .field{margin-bottom:16px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice>span{display:block;height:100%;border:1px solid var(--line);border-radius:6px;padding:11px 14px;background:var(--bg);font-size:15.5px;line-height:1.35}
.choice>span b{display:block;font-weight:650}
.choice>span small{color:var(--mute);font-size:14px}
.choice input:checked+span{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--soft)}
.choice input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--mute);margin:4px 0 20px}
.check input{margin-top:4px;width:18px;height:18px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aside{border-left:3px solid var(--gold);padding-left:22px}
.aside ol{padding-left:20px;color:var(--mute);margin:0 0 20px}
.aside li{margin:0 0 10px}
.notice{border-left:4px solid var(--olive);background:var(--soft);padding:16px 20px;border-radius:0 6px 6px 0;max-width:70ch}

/* call to action + footer */
.cta{margin:88px 0 0;background:linear-gradient(155deg,var(--deep) 0%,var(--deep2) 100%);color:var(--ongreen);border-radius:8px;padding:40px 44px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.cta h2{margin:0 0 6px}.cta p{margin:0;color:#dbe7e0}
footer{margin-top:88px;background:#1d1610;color:#c9bca9;font-size:14.5px;border-top:3px solid var(--gold)}
footer .wrap{padding-top:36px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr));gap:28px}
footer a{color:#e9dfcf;text-decoration:none}
footer a:hover{text-decoration:underline}
footer h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--goldhi);margin:0 0 10px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 6px}
footer p{margin:0 0 8px;max-width:46ch}
footer .brand{color:#f3efe6;margin-bottom:12px}

@media (max-width:980px){
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier .for{min-height:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formgrid{grid-template-columns:1fr}
}
@media (max-width:820px){
  body{font-size:16.5px}
  section{padding-top:64px}
  .band{margin-top:64px;padding:60px 0}
  .hero .wrap{grid-template-columns:1fr;padding-top:52px;padding-bottom:56px;gap:36px}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust li{border-left:0;border-top:1px solid var(--line);padding:16px 14px 16px 0}
  .trust li:nth-child(-n+2){border-top:0}
  .grid3,.grid2{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .cta{padding:32px 26px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .top .wrap{padding-top:10px;padding-bottom:6px}
  .top .go{margin-left:auto;order:2;padding:8px 14px}
  .nav{order:3;width:100%;margin:0 -8px;gap:0 2px}
  .nav a{white-space:nowrap;padding:8px 8px;font-size:14.5px}
  html{scroll-padding-top:110px}
  .tiers,.tiles{grid-template-columns:1fr}
  dl.terms{grid-template-columns:1fr}dl.terms dd{margin-bottom:10px}
  .ask .row,.choices{grid-template-columns:1fr}
  form.ask{padding:20px 18px}
  .actions .btn{flex:1 1 auto;text-align:center}
  .watch li{flex-direction:column;gap:0}.watch li span:last-child{text-align:left;padding-left:19px}
}
@media print{.top{position:static}.hero,.cta,footer{background:#fff!important;color:#000!important}}
