:root { --navy:#203d5b; --ink:#172535; --gold:#c6a15b; --pale:#f5f7f8; --line:#dce3e9; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:"Microsoft YaHei", "Yu Gothic", system-ui, sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
.site-header { height:94px; padding:14px clamp(22px,5vw,84px); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.96); }
.brand img { display:block; width:min(440px,59vw); height:64px; object-fit:contain; object-position:left center; }
.header-link { color:var(--navy); font-weight:700; white-space:nowrap; }
.hero { min-height:600px; padding:90px clamp(22px,9vw,150px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:clamp(42px,8vw,130px); align-items:center; background:linear-gradient(117deg,#f6f8fa 0%,#fff 68%); }
.eyebrow { color:var(--gold); font-weight:800; font-size:.78rem; letter-spacing:.16em; margin:0 0 13px; }
h1,h2,h3,p { margin-top:0; } h1 { color:var(--navy); font-size:clamp(2.2rem,5vw,4.25rem); line-height:1.23; letter-spacing:.02em; margin-bottom:22px; } h2 { color:var(--navy); font-size:clamp(1.75rem,3vw,2.65rem); line-height:1.32; }
.lead { font-size:1.06rem; max-width:630px; color:#4e5e6d; }.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:0 24px; border:1px solid transparent; border-radius:2px; font:inherit; font-weight:800; cursor:pointer; transition:.2s ease; }.button:hover { transform:translateY(-1px); }.primary { background:var(--navy); color:#fff; }.secondary { border-color:var(--navy); color:var(--navy); background:#fff; }.light { background:#fff; color:var(--navy); }.full { width:100%; }.small-note { font-size:.82rem; color:#75818d; margin:18px 0 0; }
.hero-card { max-width:420px; width:100%; justify-self:end; padding:26px; border-top:4px solid var(--gold); box-shadow:0 18px 55px rgba(27,49,72,.13); background:#fff; }.card-top,.card-line,.delivery-status { display:flex; justify-content:space-between; align-items:center; }.card-top { color:#7a8792; font-size:.88rem; border-bottom:1px solid var(--line); padding-bottom:17px; }.live-dot { color:#3a7454; font-weight:700; }.tracking-number { font-size:1.45rem; letter-spacing:.07em; font-weight:800; color:var(--navy); margin:25px 0 12px; }.delivery-status { justify-content:flex-start; gap:8px; margin-bottom:25px; font-size:1.15rem; }.status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#56a479; }.card-line { border-top:1px solid var(--line); padding:13px 0 0; margin-top:12px; color:#75818d; font-size:.9rem; }.card-line b { color:var(--ink); }
.store-downloads { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px; padding:22px clamp(22px,9vw,150px); background:#fff; border-top:1px solid var(--line); }.store-downloads a,.store-downloads span { display:block; line-height:0; }.store-downloads img { display:block; width:250px; max-width:calc(100vw - 44px); height:auto; border-radius:10px; }.store-downloads a { transition:transform .18s ease,filter .18s ease; }.store-downloads a:hover { transform:translateY(-2px); filter:drop-shadow(0 8px 10px rgba(24,44,65,.16)); }.store-downloads span { opacity:.62; cursor:default; }
.trust-row { padding:22px clamp(22px,9vw,150px); display:flex; gap:clamp(18px,4vw,64px); flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#61707d; }.trust-row span { font-size:.82rem; color:#89949d; }.trust-row b { color:var(--navy); }.section { padding:100px clamp(22px,9vw,150px); }.section h2 { max-width:670px; }.feature-grid { margin-top:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.feature-grid article { padding:28px; background:var(--pale); border-bottom:2px solid transparent; }.feature-grid article:hover { border-bottom-color:var(--gold); }.feature-number { color:var(--gold); font-weight:800; letter-spacing:.08em; }.feature-grid h3 { color:var(--navy); font-size:1.25rem; margin:18px 0 8px; }.feature-grid p { color:#5c6874; font-size:.93rem; margin-bottom:0; }.callout { padding:72px clamp(22px,9vw,150px); display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--navy); }.callout h2 { color:#fff; margin-bottom:0; }.callout .eyebrow { color:#e2c985; } footer { padding:30px clamp(22px,5vw,84px); color:#6c7883; font-size:.82rem; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; } footer p { margin:0; } footer a { color:var(--navy); font-weight:800; }
.assurance-section { padding:82px clamp(22px,9vw,150px); display:grid; grid-template-columns:1fr 1fr; gap:60px; background:#ecf1f5; }.assurance-section h2 { margin-bottom:0; }.assurance-copy { max-width:580px; color:#4e5f6e; }.assurance-copy ul { margin:22px 0 0; padding:0; list-style:none; }.assurance-copy li { padding:12px 0 12px 28px; border-top:1px solid #cfd9e0; position:relative; }.assurance-copy li::before { content:"✓"; position:absolute; left:2px; color:var(--gold); font-weight:900; }.download-section { background:#fff; }.download-intro { max-width:670px; color:#596875; }.platform-grid { margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.platform-card { padding:25px 20px; border:1px solid var(--line); background:#fafbfd; }.platform-card.available { border-top:3px solid var(--gold); background:#fff; box-shadow:0 10px 25px rgba(30,50,70,.08); }.platform-mark { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; }.platform-card h3 { color:var(--navy); margin:16px 0 0; }.platform-card p { color:#71808c; font-size:.88rem; margin:2px 0 18px; }.coming-soon { color:#a5afb7; font-size:.72rem; font-weight:800; letter-spacing:.1em; }
.portal-body { background:var(--pale); }.compact { background:#fff; }.portal-main { min-height:calc(100vh - 170px); padding:70px 22px; }.auth-card { max-width:480px; padding:38px; margin:0 auto; background:#fff; border-top:4px solid var(--gold); box-shadow:0 15px 50px rgba(26,47,67,.12); }.auth-card h1,.dashboard h1 { font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:7px; }.auth-card label { display:block; color:var(--navy); font-size:.9rem; font-weight:800; margin:17px 0 0; }.auth-card label span { color:#7b8791; font-size:.73rem; font-weight:400; }.auth-card input { width:100%; height:45px; margin-top:5px; padding:8px 10px; border:1px solid #bdc8d1; border-radius:2px; font:inherit; }.auth-card input:focus { border-color:var(--navy); outline:2px solid rgba(32,61,91,.12); }.form-error { min-height:24px; color:#b44236; font-size:.86rem; margin:10px 0 0; }.text-button { display:block; border:0; background:transparent; padding:15px 0 0; color:var(--navy); text-decoration:underline; cursor:pointer; font:inherit; font-size:.9rem; }.dashboard { max-width:900px; margin:0 auto; }.dashboard-head { display:flex; justify-content:space-between; align-items:center; gap:22px; }.button-reset { border:0; background:none; cursor:pointer; font:inherit; }.dashboard-note { border-left:3px solid var(--gold); padding:9px 14px; background:#fff; color:#596673; }.item-list { display:grid; gap:12px; margin-top:24px; }.tracking-item { display:grid; grid-template-columns:1fr auto; gap:12px; padding:20px; background:#fff; border-left:3px solid var(--navy); box-shadow:0 3px 12px rgba(25,44,64,.05); }.tracking-no { color:var(--navy); font-weight:800; letter-spacing:.04em; margin-bottom:2px; }.carrier { color:#70808e; font-size:.85rem; margin-bottom:0; }.item-status { text-align:right; }.item-status strong { display:block; color:#286545; }.item-status span,.item-meta { color:#70808e; font-size:.82rem; }.item-meta { grid-column:1/-1; margin:0; padding-top:10px; border-top:1px solid var(--line); }.empty-state { padding:40px; text-align:center; color:#6b7782; background:#fff; }
.dashboard-actions { display:flex; gap:16px; }.profile-panel { margin:18px 0; padding:22px; border-left:3px solid var(--gold); background:#fff; }.profile-panel h2 { font-size:1.2rem; margin-bottom:6px; }.profile-panel p { color:#64727d; font-size:.87rem; }.profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 18px; max-width:760px; }.profile-panel label { display:block; color:var(--navy); font-size:.87rem; font-weight:800; }.profile-panel input { width:100%; height:42px; margin-top:5px; padding:8px; border:1px solid #bdc8d1; font:inherit; }.profile-panel .button { margin-top:8px; min-height:42px; }.inline { display:inline-block; margin-left:14px; }.item-summary { display:flex; gap:12px; align-items:flex-start; }.expand-button { display:none; }.tracking-link { text-decoration:underline; text-underline-offset:3px; }.delete-button { align-self:start; width:28px; height:28px; border:0; padding:4px; color:transparent; background:transparent; cursor:pointer; }.delete-button svg { display:block; width:20px; height:20px; fill:none; stroke:#8a3d37; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.item-details,.item-details[hidden] { grid-column:1/-1; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; padding:14px 0 0; border-top:1px solid var(--line); }.item-details div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; color:#677684; font-size:.84rem; }.item-details b { color:var(--ink); font-weight:600; text-align:right; }
.tracker-scroller { overflow-x:auto; background:#fff; border:1px solid #cbd4db; }.tracker-table { width:100%; min-width:1120px; border-collapse:collapse; font-size:.88rem; }.tracker-table th { padding:11px 12px; background:var(--navy); color:#fff; text-align:left; white-space:nowrap; font-weight:700; }.tracker-table td { padding:11px 12px; border-top:1px solid #d8e0e5; color:#34495a; white-space:nowrap; vertical-align:middle; }.tracker-table tbody tr:nth-child(even) { background:#f8fafb; }.tracker-table .tracking-link { color:var(--navy); font-weight:800; }.table-delete { width:28px; height:28px; padding:0; border:0; background:transparent; font-size:16px; cursor:pointer; opacity:.78; }.table-delete:hover { opacity:1; transform:scale(1.08); }
.web-actions { display:flex; gap:10px; margin:18px 0; }.web-actions .button { min-height:40px; padding:0 15px; font-size:.88rem; }.web-editor { display:flex; align-items:end; gap:12px; margin:0 0 16px; padding:15px; background:#fff; border-left:3px solid var(--gold); }.web-editor label { flex:1; color:var(--navy); font-size:.84rem; font-weight:700; }.web-editor input,.web-editor textarea { display:block; width:100%; margin-top:5px; padding:8px; border:1px solid #bdc8d1; font:inherit; }.web-editor textarea { resize:vertical; }.web-editor .button { min-height:40px; padding:0 16px; white-space:nowrap; }.tracking-card-list { display:grid; gap:14px; }.tracking-card { background:#fff; border-left:3px solid var(--navy); box-shadow:0 3px 12px rgba(25,44,64,.06); }.tracking-card-head { display:grid; grid-template-columns:minmax(0,1fr) auto 40px; gap:18px; align-items:center; padding:18px 18px 14px; }.tracking-card-number { display:block; color:var(--navy); font-size:1.08rem; font-weight:800; letter-spacing:.03em; }.tracking-card-number[href] { text-decoration:underline; text-underline-offset:3px; }.tracking-card-carrier { display:block; margin-top:4px; color:#41566b; font-size:.88rem; font-weight:700; }.tracking-card-current { text-align:right; }.tracking-card-current strong { display:block; color:#286545; }.tracking-card-current span { display:block; color:#70808e; font-size:.8rem; }.card-delete { width:38px; height:38px; padding:0; border:0; background:transparent; font-size:22px; cursor:pointer; opacity:.82; }.card-delete:hover { opacity:1; transform:scale(1.1); }.tracking-card-details { margin:0; padding:0 18px 15px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; border-top:1px solid var(--line); }.tracking-card-details div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #edf1f3; font-size:.84rem; }.tracking-card-details dt { color:#788691; }.tracking-card-details dd { margin:0; color:var(--ink); text-align:right; font-weight:600; }.inline-edit { width:58%; min-width:110px; padding:5px 7px; border:1px solid #cbd4db; font:inherit; text-align:right; }.inline-edit:focus { border-color:var(--navy); outline:2px solid rgba(32,61,91,.12); }
@media (max-width:720px) { .site-header { height:76px; padding:8px 18px; }.brand img { height:52px; width:250px; max-width:66vw; }.hero { min-height:auto; padding:64px 24px; grid-template-columns:1fr; }.hero-card { justify-self:start; }.store-downloads { gap:11px; padding:18px; }.store-downloads img { width:min(250px,100%); }.feature-grid,.platform-grid { grid-template-columns:1fr; }.assurance-section { padding:62px 24px; grid-template-columns:1fr; gap:24px; }.section { padding:70px 24px; }.callout { padding:52px 24px; display:block; }.callout .button { margin-top:25px; }.trust-row { padding:17px 24px; gap:15px; }.portal-main { padding:36px 16px; }.auth-card { padding:27px 22px; }.dashboard-head { align-items:flex-start; }.dashboard-actions { gap:10px; }.profile-fields { grid-template-columns:1fr; }.tracking-item { grid-template-columns:1fr auto; }.item-status { text-align:left; grid-column:1; }.delete-button { grid-column:2; grid-row:1; }.item-details { grid-template-columns:1fr; padding-left:0; }.web-editor { display:block; }.web-editor .button { margin-top:10px; }.tracking-card-head { grid-template-columns:minmax(0,1fr) 38px; gap:9px; }.tracking-card-current { grid-column:1; grid-row:2; text-align:left; display:flex; gap:10px; align-items:baseline; }.tracking-card-current span { display:inline; }.tracking-card-details { grid-template-columns:1fr; padding:0 14px 13px; }.tracking-card-details div { padding:8px 0; }.header-link { font-size:.83rem; } }

/* Landing page: HOKUTO POSTAL TRACKER */
.site-nav { display:flex; align-items:center; gap:22px; color:#526475; font-size:.87rem; font-weight:700; }.site-nav .header-link { color:var(--navy); }.tracker-hero { min-height:650px; }.hero-demo { width:min(470px,100%); justify-self:end; padding:22px; background:#fff; border-top:4px solid var(--gold); box-shadow:0 20px 54px rgba(27,49,72,.13); }.demo-label { display:flex; justify-content:space-between; padding:0 2px 14px; color:#75818d; font-size:.76rem; font-weight:800; letter-spacing:.11em; }.demo-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; margin:10px 0; padding:15px; border:1px solid var(--line); border-left:3px solid var(--navy); background:#fbfcfd; }.demo-card div { min-width:0; }.demo-card b,.demo-card span { display:block; }.demo-card b { color:var(--navy); letter-spacing:.04em; }.demo-card span,.demo-card small { color:#627282; font-size:.78rem; }.demo-card strong { color:#286545; font-size:.88rem; text-align:right; }.demo-card small { text-align:right; }.demo-card-a { animation:demo-focus 8s ease-in-out infinite; }.demo-card-b { animation:demo-focus 8s ease-in-out 2.66s infinite; }.demo-card-c { animation:demo-focus 8s ease-in-out 5.33s infinite; }.demo-note { margin:16px 2px 1px; color:#526475; font-size:.82rem; font-weight:700; }@keyframes demo-focus { 0%,100% { border-left-color:var(--navy); background:#fbfcfd; } 20%,45% { border-left-color:var(--gold); background:#fffaf0; } }
.carrier-section,.story-section { padding:92px clamp(22px,9vw,150px); display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.86fr); gap:72px; align-items:center; background:#ecf1f5; }.carrier-section h2,.story-section h2 { margin-bottom:0; }.carrier-copy,.story-copy { color:#536473; }.carrier-names { color:var(--navy); font-weight:800; font-size:1.04rem; }.feature-grid-four { grid-template-columns:repeat(4,1fr); }.section-lead { max-width:730px; color:#5a6976; margin:0 0 36px; }.feature-section { background:#fff; }.story-section { background:#fff; }.story-copy p { margin-bottom:19px; }.story-copy .story-emphasis { color:var(--navy); font-weight:800; font-size:1.18rem; }.use-section { background:#ecf1f5; }.industry-tags { display:flex; flex-wrap:wrap; gap:10px; max-width:850px; }.industry-tags span { padding:7px 14px; border:1px solid #bfcbd4; color:var(--navy); background:#fff; font-size:.83rem; font-weight:700; }.callout p:not(.eyebrow) { max-width:650px; margin:16px 0 0; color:#dfe7ee; }
@media (max-width:900px) { .feature-grid-four { grid-template-columns:repeat(2,1fr); }.carrier-section,.story-section { grid-template-columns:1fr; gap:28px; } }
@media (max-width:720px) { .site-nav { gap:11px; font-size:.78rem; }.site-nav a:not(.header-link) { display:none; }.tracker-hero { min-height:auto; }.hero-demo { justify-self:stretch; }.demo-card strong,.demo-card small { text-align:left; grid-column:1; }.feature-grid-four { grid-template-columns:1fr; }.carrier-section,.story-section { padding:62px 24px; }.carrier-names { line-height:2; }.industry-tags { gap:8px; }.industry-tags span { padding:6px 10px; } }
.auth-intro { color:#657481; font-size:.9rem; margin:0 0 10px; }

/* Refined demo rotation and consistent store badges */
.hero-demo { position:relative; min-height:360px; }.hero-demo .demo-card { position:absolute; top:62px; left:22px; right:22px; opacity:0; transform:translateY(10px); pointer-events:none; animation:demo-card-rotate 12s ease-in-out infinite; }.hero-demo .demo-card-a { animation-delay:0s; }.hero-demo .demo-card-b { animation-delay:4s; }.hero-demo .demo-card-c { animation-delay:8s; }.hero-demo .demo-note { position:absolute; right:22px; bottom:18px; left:22px; }.demo-card-a,.demo-card-b,.demo-card-c { animation-name:demo-card-rotate; }@keyframes demo-card-rotate { 0%,4% { opacity:0; transform:translateY(10px); } 9%,29% { opacity:1; transform:translateY(0); } 34%,100% { opacity:0; transform:translateY(-8px); } }.store-downloads { gap:20px; }.store-downloads a,.store-downloads span { display:flex; align-items:center; justify-content:center; width:268px; height:92px; }.store-downloads img { width:100%; height:100%; object-fit:fill; max-width:none; }.store-downloads a img { width:108%; }
@media (max-width:720px) { .hero-demo { min-height:350px; }.hero-demo .demo-card { left:14px; right:14px; }.hero-demo .demo-note { right:14px; left:14px; }.store-downloads a,.store-downloads span { width:250px; height:86px; }.store-downloads a img { width:108%; } }

/* Keep the main content compact on very wide displays. */
.tracker-hero { min-height:560px; padding:68px 32px; grid-template-columns:minmax(0,650px) minmax(390px,470px); justify-content:center; gap:clamp(52px,6vw,110px); }.hero-copy .lead { margin-bottom:12px; }.hero-support { max-width:630px; color:#536473; font-size:.94rem; margin:0 0 12px; }.hero-assurance { max-width:630px; color:var(--navy); font-size:.92rem; font-weight:800; margin:0; }.hero-copy .actions { margin-top:26px; }.hero-demo { min-height:385px; }.hero-demo .demo-card { top:55px; padding:14px 15px 12px; }.hero-demo .demo-card dl { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line); }.hero-demo .demo-card dl div { min-width:0; }.hero-demo .demo-card dt { color:#748290; font-size:.67rem; }.hero-demo .demo-card dd { margin:1px 0 0; color:#354b5e; font-size:.71rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.hero-demo .demo-note { bottom:14px; }.store-downloads { gap:24px; }.store-downloads a,.store-downloads span { width:280px; height:96px; }.store-downloads img,.store-downloads a img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:980px) { .tracker-hero { grid-template-columns:minmax(0,1fr) minmax(340px,420px); gap:42px; } }
@media (max-width:720px) { .tracker-hero { min-height:auto; padding:62px 24px; grid-template-columns:1fr; }.hero-demo { min-height:385px; }.hero-demo .demo-card dl { grid-template-columns:1fr 1fr; }.hero-demo .demo-card dl div:last-child { grid-column:1 / -1; }.store-downloads a,.store-downloads span { width:280px; height:96px; }.store-downloads img,.store-downloads a img { width:auto; height:auto; } }
@keyframes demo-card-rotate { 0%,29% { opacity:1; transform:translateY(0); } 34%,96% { opacity:0; transform:translateY(-8px); } 100% { opacity:1; transform:translateY(0); } }

/* Fixed-width two-column rhythm, so ultra-wide displays do not stretch the layout. */
.tracker-hero { grid-template-columns:minmax(0,600px) minmax(390px,440px); gap:clamp(72px,11vw,220px); }.carrier-section,.story-section { grid-template-columns:minmax(0,600px) minmax(380px,470px); justify-content:center; gap:clamp(72px,11vw,220px); }.hero-demo { min-height:355px; }.hero-demo .demo-card { top:54px; }.hero-demo .demo-card dl { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:10px; }.hero-demo .demo-note { top:260px; bottom:auto; }
@media (max-width:1300px) { .tracker-hero { grid-template-columns:minmax(0,560px) minmax(360px,420px); gap:clamp(48px,7vw,110px); }.carrier-section,.story-section { grid-template-columns:minmax(0,560px) minmax(350px,420px); gap:clamp(48px,7vw,110px); } }
@media (max-width:720px) { .tracker-hero,.carrier-section,.story-section { grid-template-columns:1fr; gap:28px; }.hero-demo { min-height:395px; }.hero-demo .demo-card dl { grid-template-columns:1fr 1fr; }.hero-demo .demo-note { top:310px; } }

/* Shared maximum content width for a stable full-screen composition. */
.feature-section,.use-section { display:flex; flex-direction:column; align-items:center; }.feature-section > .eyebrow,.feature-section > h2,.feature-section > .section-lead,.feature-section > .feature-grid,.use-section > .eyebrow,.use-section > h2,.use-section > .section-lead,.use-section > .industry-tags { width:min(1320px,100%); }.feature-section > .section-lead,.use-section > .section-lead { max-width:1320px; }.feature-grid-four { gap:18px; }.callout { display:grid; grid-template-columns:minmax(0,680px) max-content; justify-content:center; column-gap:clamp(60px,10vw,180px); }.store-downloads span { width:210px; height:72px; }.store-downloads span img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:720px) { .feature-section > .eyebrow,.feature-section > h2,.feature-section > .section-lead,.feature-section > .feature-grid,.use-section > .eyebrow,.use-section > h2,.use-section > .section-lead,.use-section > .industry-tags { width:100%; }.callout { display:block; }.store-downloads span { width:220px; height:76px; } }
.store-downloads .beta-note { flex-basis:100%; margin:0; color:#657686; font-size:.84rem; line-height:1.55; text-align:center; }
.dashboard-actions button:disabled { cursor:wait; opacity:.55; }

/* Feature section matches the narrative two-column rhythm used by WHY WE BUILT IT. */
.feature-section > .feature-intro,.feature-section > .feature-grid { width:min(1320px,100%); }.feature-intro { display:grid; grid-template-columns:minmax(0,600px) minmax(380px,470px); justify-content:center; gap:clamp(72px,11vw,220px); align-items:start; margin-bottom:44px; }.feature-intro h2 { margin-bottom:0; }.feature-copy { color:#536473; }.feature-copy p { margin:0 0 18px; }.feature-copy p:last-child { margin-bottom:0; }.hero-demo .demo-card { animation-duration:18s; animation-timing-function:ease-in-out; }.hero-demo .demo-card-a { animation-delay:0s; }.hero-demo .demo-card-b { animation-delay:6s; }.hero-demo .demo-card-c { animation-delay:12s; }.hero-demo .demo-card strong.status-delivered { color:#286545; }.hero-demo .demo-card strong.status-transit { color:#9a6a11; }.hero-demo .demo-card strong.status-alert { color:#b44236; }@keyframes demo-card-rotate { 0% { opacity:0; transform:translateY(10px); } 7% { opacity:1; transform:translateY(0); } 27% { opacity:1; transform:translateY(0); } 34% { opacity:0; transform:translateY(-10px); } 93% { opacity:0; transform:translateY(10px); } 100% { opacity:0; transform:translateY(10px); } }
@media (max-width:1300px) { .feature-intro { grid-template-columns:minmax(0,560px) minmax(350px,420px); gap:clamp(48px,7vw,110px); } }
@media (max-width:720px) { .feature-section > .feature-intro,.feature-section > .feature-grid { width:100%; }.feature-intro { grid-template-columns:1fr; gap:24px; margin-bottom:30px; } }

/* Final unified narrative layout and a fade-only demo transition. */
.hero-demo .demo-card { animation-name:demo-card-fade !important; animation-duration:18s !important; transform:none !important; }.hero-demo .demo-card-a { animation-delay:0s !important; }.hero-demo .demo-card-b { animation-delay:6s !important; }.hero-demo .demo-card-c { animation-delay:12s !important; }.hero-demo .demo-card strong.status-delivered { color:#286545 !important; }.hero-demo .demo-card strong.status-transit { color:#9a6a11 !important; }.hero-demo .demo-card strong.status-alert { color:#b44236 !important; }@keyframes demo-card-fade { 0% { opacity:0; } 10% { opacity:1; } 27% { opacity:1; } 38% { opacity:0; } 100% { opacity:0; } }
.feature-intro,.use-intro,.callout-inner { width:min(1320px,100%); display:grid; grid-template-columns:minmax(0,600px) minmax(380px,470px); justify-content:center; align-items:start; gap:clamp(72px,11vw,220px); }.use-intro h2 { margin-bottom:0; }.use-copy { color:#536473; }.use-copy > p { margin:0 0 24px; }.use-copy .industry-tags { max-width:none; }.callout { display:block; }.callout-inner { margin:0 auto; align-items:center; }.callout-inner .button { justify-self:start; }.feature-section > .feature-intro,.feature-section > .feature-grid { width:min(1320px,100%); }
@media (max-width:1300px) { .feature-intro,.use-intro,.callout-inner { grid-template-columns:minmax(0,560px) minmax(350px,420px); gap:clamp(48px,7vw,110px); } }
@media (max-width:720px) { .feature-intro,.use-intro,.callout-inner { width:100%; grid-template-columns:1fr; gap:25px; }.use-copy .industry-tags { margin-top:20px; }.callout-inner .button { margin-top:0; } }

/* Mobile demo: reserve its own space for the explanatory line, below every card. */
.tracking-card-current.status-tone-complete strong { color:#286545; }.tracking-card-current.status-tone-transit strong { color:#9a6a11; }.tracking-card-current.status-tone-alert strong { color:#b44236; }
@media (max-width:720px) { .hero-demo { min-height:620px; }.hero-demo .demo-note { top:540px; right:14px; left:14px; line-height:1.6; } }
.tracking-card-number { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:720px) {
  .hero-demo { min-height:0; padding-bottom:18px; }
  .hero-demo .demo-card { position:relative; top:auto; left:auto; right:auto; margin:0; animation:none !important; opacity:1; transform:none; }
  .hero-demo .demo-card:not(.demo-card-a) { display:none; }
  .hero-demo .demo-note { position:static; margin:14px 0 0; line-height:1.6; }
}

/* A single desktop content width gives every top-level section the same visual edges. */
:root { --site-content:1320px; --site-gutter:max(28px,calc((100vw - var(--site-content)) / 2)); }
.tracker-hero,.carrier-section,.story-section { padding-left:var(--site-gutter); padding-right:var(--site-gutter); grid-template-columns:minmax(0,1.18fr) minmax(340px,.72fr); gap:clamp(52px,7vw,120px); }
.section,.callout,.store-downloads,.trust-row { padding-left:var(--site-gutter); padding-right:var(--site-gutter); }
.feature-intro,.use-intro,.callout-inner,.feature-section > .feature-grid { width:100%; max-width:var(--site-content); }
.client-link-card { width:min(100%,330px); min-height:112px; justify-self:start; display:flex; align-items:center; gap:15px; padding:18px 20px; border:1px solid rgba(255,255,255,.52); background:rgba(255,255,255,.1); color:#fff; box-shadow:0 12px 28px rgba(7,26,45,.18); }
.client-link-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border:1px solid rgba(255,255,255,.7); border-radius:50%; font-size:1.75rem; line-height:1; color:#efd783; }
.client-link-card strong,.client-link-card span { display:block; }.client-link-card strong { font-size:1rem; letter-spacing:.04em; }.client-link-card span { margin-top:7px; color:#e3ebf1; font-size:.8rem; line-height:1.65; }
@media (max-width:720px) { :root { --site-gutter:20px; }.tracker-hero,.carrier-section,.story-section { padding-left:var(--site-gutter); padding-right:var(--site-gutter); }.section,.callout,.store-downloads,.trust-row { padding-left:var(--site-gutter); padding-right:var(--site-gutter); }.client-link-card { width:100%; margin-top:4px; } }
.tracker-hero { grid-template-columns:minmax(0,720px) minmax(390px,440px); gap:clamp(110px,13vw,270px); }
.carrier-section,.story-section { grid-template-columns:minmax(0,720px) minmax(380px,470px); gap:clamp(110px,13vw,270px); }
.tracker-hero .hero-copy h1 { max-width:none; white-space:nowrap; font-size:clamp(3rem,3.1vw,3.75rem); letter-spacing:-.035em; }
@media (max-width:720px) { .tracker-hero,.carrier-section,.story-section { grid-template-columns:1fr; gap:28px; } }

/* Phone layout: keep both the public site and the logged-in tracker comfortably readable. */
@media (max-width:720px) {
  html,body { width:100%; max-width:100%; overflow-x:hidden; }
  .site-header { height:auto; min-height:68px; padding:9px 16px; gap:10px; }
  .brand { min-width:0; flex:1; }
  .brand img { width:min(250px,64vw); max-width:100%; height:auto; max-height:48px; }
  .site-nav { gap:9px; white-space:nowrap; }
  .site-nav a:not(.header-link) { display:none; }
  .tracker-hero,.hero { display:block; min-height:auto; padding:42px 20px; }
  .tracker-hero .hero-copy h1,.hero-copy h1 { max-width:100%; white-space:normal; font-size:clamp(2rem,10vw,2.85rem); line-height:1.28; letter-spacing:-.025em; overflow-wrap:anywhere; }
  .hero-copy .lead,.hero-support,.hero-assurance { max-width:100%; font-size:.96rem; line-height:1.85; overflow-wrap:anywhere; }
  .hero-copy .actions,.actions { display:flex; flex-direction:column; gap:12px; }
  .actions .button { width:100%; min-height:54px; }
  .hero-demo { width:100%; min-height:auto; margin-top:30px; padding:14px; }
  .hero-demo .demo-card { position:static; margin:9px 0; padding:13px; }
  .hero-demo .demo-card dl { grid-template-columns:1fr; }
  .hero-demo .demo-card dl div:last-child { grid-column:auto; }
  .hero-demo .demo-note { position:static; margin:14px 2px 2px; }
  .portal-main { padding:28px 14px; }
  .dashboard { max-width:100%; }
  .dashboard-head { display:block; }
  .dashboard-head h1 { font-size:clamp(1.55rem,8vw,2.1rem); line-height:1.35; word-break:normal; overflow-wrap:normal; }
  .dashboard-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:4px 15px; margin-top:12px; }
  .dashboard-actions .header-link { padding:7px 0; font-size:.83rem; }
  .web-editor { padding:16px; }
  .web-editor .button { width:100%; min-height:46px; }
  .dashboard-note { font-size:.84rem; line-height:1.65; }
  .tracking-card,.tracking-item { padding:15px 14px; }
  .tracking-card-details,.item-details { padding-left:0; }
}

/* Desktop sections share one content frame instead of gradually narrowing. */
@media (min-width:721px) {
  .tracker-hero,.carrier-section,.story-section {
    padding-left:var(--site-gutter); padding-right:var(--site-gutter);
    grid-template-columns:minmax(0,1.18fr) minmax(340px,.72fr);
    gap:clamp(52px,7vw,120px);
  }
  .feature-intro,.use-intro,.callout-inner {
    width:100%; max-width:var(--site-content);
    grid-template-columns:minmax(0,1.18fr) minmax(340px,.72fr);
    gap:clamp(52px,7vw,120px);
  }
}