/* What2Pack public pages — from the 2026-09 HTML concept. Fonts: Barlow Condensed + DM Sans via Google Fonts. */
*,::before,::after{box-sizing:border-box;border:0 solid}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font:inherit;color:inherit;margin:0;padding:0;background:transparent}button{cursor:pointer}img,svg,video,canvas{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none!important}

:root{--background:#fffdf5;--foreground:#233526;--primary:#205b39;--primary-foreground:#fffdf5;--muted:#eee9da;--muted-foreground:#58614f;--border:#d8d9c8;--ring:#bd7100;--green:#205b39;--gold:#ffbe00;--paper:#fffdf5;--ink:#233526;--radius:.5rem}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #b46600;outline-offset:5px}h1,h2,h3,h4,p{margin:0}h1,h2,.brand,.question-row h3,.question-ribbon{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif}h1,h2{font-weight:800;line-height:.94;letter-spacing:-.02em}p{max-width:65ch}svg{flex-shrink:0}.wrap{max-width:1312px;margin:auto;padding-left:48px;padding-right:48px}.site-header{display:flex;justify-content:space-between;align-items:center;height:104px}.brand{font-weight:800;font-size:29px;display:flex;align-items:center;gap:10px;line-height:1}.brand img{border-radius:8px}.brand-two{color:#b87800}nav{display:flex;gap:33px;align-items:center;font-size:14px;font-weight:600}.login{display:flex;align-items:center;gap:8px;border-left:1px solid var(--border);padding-left:30px}.hero{display:grid;grid-template-columns:1fr 1.04fr;gap:60px;padding-top:34px;padding-bottom:66px}.intro{font-size:15px;font-weight:600;margin-bottom:23px;color:var(--green)}h1{font-size:clamp(64px,6.5vw,94px);color:var(--green)}.hero-description{font-size:18px;line-height:1.65;max-width:390px;margin:27px 0}.button{display:inline-flex;gap:24px;align-items:center;justify-content:center;background:var(--gold);color:var(--ink);padding:16px 22px;border-radius:6px;font-size:15px;font-weight:700;transition:background .15s}.button:hover{background:#f2ad00}.platforms{font-size:13px;color:#65705f;margin-top:17px}.hero-art{min-height:580px;position:relative;background:#112e25;border-radius:140px 7px 7px 7px;overflow:hidden}.night{position:absolute;height:100%;width:100%;object-fit:cover;object-position:46% center;opacity:.75}.giant-question{position:absolute;top:-45px;right:42px;color:var(--gold);font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:530px;line-height:1;text-shadow:0 6px 35px #10291c22;transform:rotate(8deg)}.photo-note{position:absolute;left:35px;bottom:66px;color:white}.photo-note>span{font-size:13px;color:#ffd253}.photo-note p{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;font-size:33px;line-height:1.15;margin-top:8px}.image-caption{position:absolute;bottom:22px;left:35px;color:#e1e5d8;font-size:12px}.question-ribbon{background:var(--green);color:var(--paper)}.question-ribbon>.wrap{display:flex;justify-content:space-between;gap:15px;align-items:center;min-height:88px;font-size:31px;font-weight:700}.question-ribbon a:last-child{color:var(--gold);display:flex;align-items:center;gap:20px}.question-ribbon a:hover{color:var(--gold)}.story{padding-top:102px;padding-bottom:98px}.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px}h2{font-size:61px;color:var(--green)}.section-intro>p{max-width:400px;color:#58614f;padding-bottom:4px;font-size:17px}.question-row{display:grid;grid-template-columns:165px 1fr 265px;gap:36px;border-top:1px solid var(--border);padding:32px 0;align-items:center;scroll-margin-top:20px}.question-row:last-child{border-bottom:1px solid var(--border)}.question-row h3{font-size:65px;color:var(--green);font-weight:700;line-height:1}.question-row h4{font-size:21px;font-weight:600;margin-bottom:9px}.question-row p{font-size:16px;color:#58614f;max-width:510px}.example{display:flex;align-items:center;gap:14px;color:var(--green);font-size:14px;padding-left:24px;border-left:2px solid var(--gold)}.how{background:#eee9d8;padding:88px 0}.how-features{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.how-features svg{color:var(--green);margin-bottom:15px}.how-features h3{font-size:19px;font-weight:700;margin-bottom:6px}.how-features p{color:#58614f}.closing{text-align:center;padding-top:95px;padding-bottom:94px}.closing>img{margin:0 auto 25px;border-radius:15px;width:70px;height:70px}.closing>p{margin:0 auto 22px;max-width:640px}.closing>p:first-of-type{font-size:14px;color:var(--green);font-weight:600}.closing h2{font-size:76px;margin-bottom:26px}.closing .button{margin-top:12px}footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding-top:30px;padding-bottom:35px;font-size:13px}footer .brand{font-size:21px}footer>a:last-child{display:flex;gap:8px;align-items:center}.skip{position:fixed;top:10px;left:10px;transform:translateY(-200%);background:var(--gold);padding:12px;z-index:50}.skip:focus{transform:translateY(0)}
@media(min-width:1500px){.hero{padding-top:50px;padding-bottom:80px}.hero-art{min-height:625px}.giant-question{font-size:570px}}
@media(max-width:1000px){.wrap{padding-left:30px;padding-right:30px}.hero{gap:30px}h1{font-size:73px}.hero-art{min-height:540px}.giant-question{font-size:470px;right:10px;top:-10px}.question-row{grid-template-columns:125px 1fr;gap:22px}.example{grid-column:2;margin-top:0;width:100%}.question-row h3{align-self:start;font-size:57px}.section-intro>p{max-width:320px}.how-features{grid-template-columns:repeat(2,1fr)}h2{font-size:53px}}
@media(max-width:680px){.wrap{padding-left:22px;padding-right:22px}.site-header{height:82px}.brand{font-size:25px}.brand img{width:35px;height:35px}nav{gap:0}nav>a:not(.login){display:none}.login{padding-left:15px;border:0}.hero{grid-template-columns:1fr;gap:35px;padding-top:23px;padding-bottom:35px}h1{font-size:clamp(64px,14vw,88px)}.intro{margin-bottom:18px}.hero-description{max-width:440px;margin:24px 0}.hero-art{min-height:380px;border-top-left-radius:90px}.giant-question{font-size:400px;right:26px;top:-39px}.photo-note{left:25px;bottom:50px}.photo-note p{font-size:27px}.image-caption{left:25px;bottom:17px}.question-ribbon>.wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 25px;padding-top:20px;padding-bottom:20px;font-size:27px}.question-ribbon a:last-child{gap:9px;white-space:nowrap}.question-ribbon a:last-child svg{width:16px}.story{padding-top:60px;padding-bottom:60px}.section-intro{display:block;margin-bottom:30px}.section-intro>p{margin-top:23px}h2{font-size:50px}.question-row{grid-template-columns:1fr;gap:13px;padding:28px 0}.question-row h3{font-size:52px}.question-row h4{font-size:20px}.example{grid-column:1;margin-top:8px;padding-left:15px}.how{padding:55px 0}.how-features{gap:29px 20px}.how-features h3{font-size:18px}.how-features p{font-size:15px}.closing{padding-top:65px;padding-bottom:65px}.closing h2{font-size:59px}.closing>p br{display:none}.closing .button{gap:15px}footer{flex-wrap:wrap;gap:24px}footer>p{order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.campout-demo{gap:30px}.demo-tabs[data-slot="tabs-list"]{height:auto;width:max-content;max-width:100%;padding:5px;background:#dfddcd;gap:4px;border-radius:7px}.demo-tab[data-slot="tabs-trigger"]{font-family:'DM Sans',sans-serif;font-size:15px;padding:12px 22px;gap:9px;min-height:47px;color:var(--green);border-radius:4px}.demo-tab[data-active]{background:var(--green)!important;color:var(--paper)!important;box-shadow:none!important}.demo-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center;min-height:330px}.demo-panel[hidden]{display:none}.demo-explanation h3{font-family:'Barlow Condensed',Impact,sans-serif;color:var(--green);font-size:42px;font-weight:700;line-height:1.07;max-width:350px;margin-bottom:20px}.demo-explanation p{font-size:17px;color:#58614f;line-height:1.7}.demo-explanation>span{display:block;margin-top:28px;font-size:13px;font-weight:600;color:var(--green)}.sample-app{background:var(--paper);border:1px solid #ccd2bc;border-radius:9px;overflow:hidden;box-shadow:0 12px 22px #2436270b}.sample-top{background:var(--green);color:var(--paper);display:flex;gap:9px;align-items:center;padding:13px 19px}.sample-top>strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:20px}.sample-top>span{margin-left:auto;font-size:12px;color:#e1e8d9}.sample-title{padding:21px 23px 19px;border-bottom:1px solid var(--border)}.sample-title h4{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px;color:var(--green);font-weight:700;line-height:1.1}.sample-title p{display:flex;align-items:center;gap:7px;color:#62705a;font-size:12px;margin-top:10px}.sample-title p svg:nth-of-type(2){margin-left:12px}.sample-content{padding:19px 23px 8px}.sample-content h5{font-size:14px;font-weight:700;margin-bottom:13px}.sample-row{display:grid;grid-template-columns:20px 90px 1fr;align-items:center;gap:8px;padding:12px 0;border-top:1px solid #e5e4d9;font-size:13px}.sample-row>span:nth-child(2){color:#626b5b}.sample-row>strong{font-weight:500}.check-circle{background:var(--green);color:white;border-radius:50%;height:16px;width:16px;display:grid;place-items:center}.sample-foot{font-size:12px;color:#6a725e;border-top:1px solid #e5e4d9;padding:14px 0 10px}
@media(max-width:1000px){.demo-panel{gap:30px;grid-template-columns:.8fr 1.2fr}.sample-row{grid-template-columns:18px 70px 1fr;gap:6px}.sample-content,.sample-title{padding-left:17px;padding-right:17px}.demo-explanation h3{font-size:36px}}
@media(max-width:680px){.campout-demo{gap:27px}.demo-tabs[data-slot="tabs-list"]{width:100%;gap:1px}.demo-tab[data-slot="tabs-trigger"]{font-size:14px;padding:10px 8px;gap:5px}.demo-tab svg{width:15px}.demo-panel{grid-template-columns:1fr;gap:27px}.demo-explanation h3{font-size:36px}.demo-explanation>span{margin-top:17px}.sample-title h4{font-size:27px}.sample-top{padding:12px 15px}.sample-top>span{font-size:12px}.sample-row{font-size:12px;grid-template-columns:17px 71px 1fr;gap:5px}.sample-content{padding-left:15px;padding-right:15px}.sample-foot{font-size:12px}}

/* Native HTML tabs replace the React tab component. */
.campout-demo{display:flex;flex-direction:column}.demo-tabs{display:inline-flex;align-items:center;justify-content:center}.demo-tab{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:1;border:1px solid transparent}.demo-tab:focus-visible,.demo-panel:focus-visible{outline:3px solid #b46600;outline-offset:4px}
/* additions for the live site */
.demo-tab i { font-size: 15px; margin-right: 9px; }
.guide-shot { margin: 0; border: 1px solid #ccd2bc; border-radius: 9px; overflow: hidden; box-shadow: 0 12px 22px #2436270b; background: var(--paper); }
.guide-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .wrap { padding-left: 20px; padding-right: 20px; } .site-header { height: 76px; } nav a:not(.login) { display: none; } .hero { grid-template-columns: 1fr; padding-top: 10px; } .hero-art { min-height: 360px; border-radius: 40px 7px 7px 7px; } .giant-question { font-size: 300px; top: -20px; right: 10px; } h1 { font-size: clamp(44px, 12vw, 64px); } h2 { font-size: 40px; } .question-ribbon > .wrap { flex-wrap: wrap; font-size: 20px; min-height: 0; padding: 14px 20px; } .section-intro { flex-direction: column; align-items: flex-start; } .question-row { grid-template-columns: 1fr; gap: 12px; } .question-row h3 { font-size: 40px; } .how-features { grid-template-columns: 1fr 1fr; } .demo-panel { grid-template-columns: 1fr; gap: 24px; } .closing h2 { font-size: 44px; } footer { flex-direction: column; gap: 10px; text-align: center; } }

/* Hero plate: a topographic map of the South Spring River valley at Kia Kima, in one
   ink, behind the top of the page. The side and bottom falloff is baked into the PNG's
   alpha, so the plate dissolves into the paper on its own. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  top: -46px; bottom: 0; left: -48px; right: -48px;
  z-index: -1;
  background: url('/bgimages/kia-kima-map.png') no-repeat center top;
  background-size: 100% auto;
  opacity: .55;
  pointer-events: none;
}
.map-credit { grid-column: 1 / -1; margin-top: 26px; font-size: 11px; color: #8a9080; letter-spacing: .01em; }
/* The wordmark carries the unit colours: forest green with a gold 2. */
.brand { color: var(--green); }
.brand-two { color: #c98a00; }
@media (max-width: 900px) {
  .hero::before { top: -24px; left: -20px; right: -20px; opacity: .42; }
  .map-credit { margin-top: 18px; }
}