/* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ html, body { margin: 0; background: #F9F9F6; font-family: "Georgia", Georgia, serif; } a { color: #191B1C; } a:hover { color: #191B1C; } /* Content frame: 1440 centred. --m is the gutter outside the frame. Type sizes are fixed; only the colour fields bleed to the edges. */ #hero { --m: max(0px, (100% - 1440px) / 2); position: relative; width: 100%; height: 658px; background: #F9F9F6; overflow: hidden; } #bar { position: absolute; top: 0; left: 0; right: 0; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--m) + 44px) 0 calc(var(--m) + 56px); box-sizing: border-box; z-index: 3; } /* tint bleeds to the left viewport edge, copy starts on the frame */ #panel { position: absolute; top: 88px; left: 0; bottom: 0; width: calc(var(--m) + 496px); background: #F0F1ED; border-right: 1px solid rgba(20,22,26,0.10); padding: 40px 56px 28px calc(var(--m) + 56px); box-sizing: border-box; display: flex; flex-direction: column; } /* graphic bleeds to the right viewport edge, its layout stays 944 wide */ #motion { position: absolute; top: 88px; left: calc(var(--m) + 496px); right: 0; bottom: 0; } #motion canvas { display: block; width: 100%; height: 100%; } #compliance { position: absolute; bottom: 20px; right: calc(var(--m) + 40px); padding: 14px 16px 12px; background: #F9F9F6; display: flex; flex-direction: column; align-items: stretch; gap: 7px; } #cta { font-family: "Inter", monospace; font-size: 13px; letter-spacing: 0.03em; background: #191B1C; color: #F9F9F6; border: 0; border-radius: 2px; padding: 17px 26px; cursor: pointer; } #cta:hover { background: #303536; } /* rows */ .menu { display: flex; align-items: center; gap: 16px; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .menu .sep { color: rgba(20,22,26,0.22); } .menu a.menu-in { margin-left: 12px; } .menu a { color: #8C857A; text-decoration: none; } .menu a:hover { color: #191B1C; } .menu a.menu-in { color: #191B1C; padding: 9px 14px; border: 1px solid rgba(31,77,58,0.35); border-radius: 2px; } .menu a.menu-in:hover { color: #F9F9F6; background: #191B1C; border-color: #191B1C; } /* Who it's for opens a sub menu on hover or keyboard focus (Robert, 2026-09-12); the pages under it */ .menu .has-sub { position: relative; } .menu .has-sub .sub { display: none; position: absolute; top: 100%; right: 0; padding-top: 12px; z-index: 6; } .menu .has-sub:hover .sub, .menu .has-sub:focus-within .sub { display: block; } .menu .sub a { display: block; padding: 11px 16px; background: #F9F9F6; border: 1px solid rgba(20,22,26,0.14); white-space: nowrap; } .menu .sub a:hover { color: #191B1C; background: #F0F1ED; } section[id] { scroll-margin-top: 24px; } html { scroll-behavior: smooth; } html { scrollbar-gutter: stable; } /* scrollbar space always reserved, so nothing shifts sideways when the page height changes (Robert, 2026-09-23) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; background: #F9F9F6; font-family: "Georgia", Georgia, serif; } a { color: #191B1C; } a:hover { color: #191B1C; } /* Row 2. Same content frame as the hero: 1440 centred, fields bleed to the edges, type sizes fixed. --m is the gutter outside the frame. */ #row2 { --m: max(0px, (100% - 1440px) / 2); background: #F9F9F6; border-bottom: 1px solid rgba(20,22,26,0.12); } /* no border-top: the line under the hero broke the design (Robert, 2026-09-04) */ #row2 .inner { padding: 80px calc(var(--m) + 56px) 0; } #row2 .head { display: grid; grid-template-columns: 1fr 397px; gap: 80px; align-items: end; padding-bottom: 46px; } /* 397: the box on the 03 column, as the brands page (Robert, 2026-09-12) */ #row2 .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 26px; } #row2 .eyebrow { display: block; margin-bottom: 18px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #row2 h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; max-width: none; text-wrap: pretty; } /* the headline takes the column, as brands (Robert, 2026-09-13: two lines) */ #row2 .note { margin: 0 0 6px; padding: 16px 18px; background: #F0F1ED; border-left: 2px solid #191B1C; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: rgba(20,22,26,0.7); } #row2 .cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(20,22,26,0.14); } #row2 .col { position: relative; min-height: 300px; display: flex; flex-direction: column; gap: 14px; padding: 32px 44px 0 0; } #row2 .col + .col { border-left: 1px solid rgba(20,22,26,0.12); padding: 32px 44px 0 44px; } #row2 .col + .col + .col { padding-right: 0; } #row2 .col + .col::before { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 16px; background: #191B1C; } #row2 .num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #F0F1ED; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.06em; color: #191B1C; } #row2 h3 { margin: 0; font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.014em; color: #191B1C; } #row2 p.body { margin: 0; font-size: 16.5px; line-height: 1.55; color: rgba(20,22,26,0.76); } #row2 .more { align-self: flex-start; font-family: "Inter", monospace; font-size: 12.5px; letter-spacing: 0.03em; color: #191B1C; text-decoration: none; border-bottom: 1px solid rgba(31,77,58,0.3); padding-bottom: 2px; } #row2 .more:hover { color: #191B1C; border-bottom-color: rgba(20,22,26,0.4); } #row2 .figures { margin-top: auto; padding: 18px 20px; background: #F0F1ED; display: flex; flex-direction: column; gap: 10px; } #row2 .fig { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 12px; align-items: center; font-family: "Inter", monospace; font-size: 12.5px; color: rgba(20,22,26,0.8); } #row2 .chip { width: 9px; height: 9px; } #row2 .count { color: #8C857A; } #row2 .share { min-width: 52px; text-align: right; } #row2 .strip { margin-top: 72px; padding: 22px calc(var(--m) + 56px); background: #F0F1ED; border-top: 1px solid rgba(20,22,26,0.1); display: flex; justify-content: space-between; align-items: center; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.06em; color: #8C857A; } /* Row A. Comment alerts: the dashboard itself, inert, real data (Robert, 2026-09-23). */ #rowa { --m: max(0px, (100% - 1440px) / 2); background: #F9F9F6; } /* no border-bottom: the frame is the divider (Robert, 2026-09-23) */ #rowa .inner { padding: 80px calc(var(--m) + 56px) 0; } /* the report row sits 90px closer (Robert, 2026-09-23) */ #rowa .head { display: grid; grid-template-columns: 1fr 397px; gap: 80px; align-items: end; padding-bottom: 46px; } #rowa .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 26px; } #rowa .eyebrow { display: block; margin-bottom: 18px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #rowa h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; max-width: none; text-wrap: pretty; } #rowa .note { margin: 0 0 6px; padding: 16px 18px; background: #F0F1ED; border-left: 2px solid #191B1C; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: rgba(20,22,26,0.7); } #rowa .dlabel { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8C857A; } #rowa .frame { border: 1px solid #E0DCD0; border-radius: 6px; background: #F9F9F6; padding: 0 32px 28px; overflow: hidden; } #rowa .frame, #rowa .frame * { box-sizing: border-box; } #rowa .dhero { display: flex; align-items: center; justify-content: space-between; gap: 35px; background: #f3f1e8; padding: 30px 32px; margin: 0 -32px 28px; } #rowa .dhero h3 { margin: 0 0 10px; font-weight: 400; font-size: 34px; line-height: 1.1; color: #191B1C; } #rowa .dhero p { margin: 0; font-size: 16px; color: #68645d; } #rowa .kpi { display: flex; align-items: stretch; gap: 0; } #rowa .kpi > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 22px; } #rowa .kpi > div:last-child { padding-right: 0; } #rowa .kpi .bar { width: 1px; background: #E0DCD0; padding: 0; } #rowa .kpi b { font-family: "Inter", monospace; font-size: 30px; font-weight: 500; color: #191B1C; white-space: nowrap; } #rowa .kpi i { font-style: normal; font-family: "Inter", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8578; white-space: nowrap; } #rowa .settings { display: grid; grid-template-columns: 2fr 1fr; gap: 22px 36px; padding: 28px; background: #FFFFFF; border: 1px solid #E0DCD0; border-radius: 6px; } #rowa .cat-setup { grid-column: 1 / -1; } #rowa .cat-heading { font: 16px/1.5 "Georgia", Georgia, serif; color: #8c857a; margin-bottom: 14px; } #rowa .cats { display: flex; flex-wrap: wrap; } #rowa .cats button { flex: 1 1 95px; min-height: 44px; border: 1px solid #ded9cd; background: white; color: #1f4d3a; padding: 12px 10px; font: 16px "Georgia", Georgia, serif; cursor: pointer; margin: 0 -1px -1px 0; } #rowa .cats button[aria-selected="true"] { background: #1f4d3a; color: white; border-color: #1f4d3a; } #rowa .cats button[aria-selected="true"] .sq { box-shadow: 0 0 0 1px #ffffff70; } #rowa .cats button::after { content: " \2022"; } #rowa .sq { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin: 0 8px 0 0; } #rowa .sq[data-category="question"] { background: #1B5FC9; } #rowa .sq[data-category="tip"] { background: #17868A; } #rowa .sq[data-category="correction"] { background: #8B3BB0; } #rowa .sq[data-category="praise"] { background: #3E8A45; } #rowa .sq[data-category="memory"] { background: #B5407F; } #rowa .sq[data-category="complaint"] { background: #D9821F; } #rowa .sq[data-category="hate"] { background: #C2352E; } #rowa .sq[data-category="other"] { background: #ADA89B; } #rowa .settings label, #rowa .topic-label { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 12px "Inter", monospace; text-transform: uppercase; color: #8c857a; } #rowa .help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid #1f4d3a; border-radius: 50%; color: #1f4d3a; font: 12px Georgia, serif; text-transform: none; } #rowa .help-pop { position: relative; flex: none; } #rowa .help-pop summary { list-style: none; cursor: pointer; } #rowa .help-pop summary::-webkit-details-marker { display: none; } #rowa .help-text { position: absolute; top: 24px; left: 0; width: 340px; max-width: 70vw; z-index: 30; padding: 16px 18px; background: #fffdf5; border: 1px solid #ded9cd; border-radius: 4px; box-shadow: 0 5px 16px #0002; font: 16px/1.5 "Georgia", Georgia, serif; color: #14161a; text-transform: none; letter-spacing: normal; } #rowa .help-text p { margin: 0; } #rowa .help-text p + p { margin-top: 12px; } #rowa .topic-label { position: relative; } #rowa .ta { height: 133px; border: 1px solid #ded9cd; border-radius: 4px; background: white; padding: 12px; font: 16px/1.5 "Georgia", Georgia, serif; color: #14161a; white-space: pre-wrap; } #rowa .select { display: block; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; height: 44px; margin-bottom: 20px; border: 1px solid #ded9cd; border-radius: 4px; background: white url("https://robandsuepartyof2.com/travel-research-assets/visual/brand/watch-select-chevron.svg") no-repeat right 14px center / 12px 8px; padding: 8px 38px 8px 12px; font: 16px/28px "Georgia", Georgia, serif; color: #14161a; } #rowa .sel .select:last-child { margin-bottom: 0; } #rowa .controls { grid-column: 1 / -1; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } #rowa .btn { font-family: "Inter", monospace; font-size: 12px; letter-spacing: 0.03em; background: #191B1C; color: #F9F9F6; border: 1px solid #191B1C; border-radius: 2px; padding: 10px 16px; } #rowa .tact { color: #1f4d3a; font: 16px/1.5 "Georgia", Georgia, serif; text-decoration: underline; text-underline-offset: 3px; } #rowa .quota { margin-left: auto; max-width: 580px; text-align: right; font: 15px/1.6 "Georgia", Georgia, serif; color: #191B1C; } #rowa .qt { font: 10px "Inter", monospace; text-transform: uppercase; letter-spacing: 0.08em; color: #8c857a; margin-bottom: 5px; } #rowa .qn strong { font-family: "Inter", monospace; font-size: 14px; } #rowa .qn > span { margin-left: 18px; } #rowa .qd { font-size: 12px; color: #68645d; } #rowa .qd u { color: #1f4d3a; text-underline-offset: 2px; } #rowa .results-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; } #rowa .results-heading h4 { margin: 0; font-weight: 400; font-size: 28px; color: #191B1C; } #rowa .results-heading p { margin: 12px 0 0; color: #68645d; font: 16px/1.5 "Georgia", Georgia, serif; } #rowa .results-heading img { flex: none; } #rowa .sents { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; border-bottom: 1px solid #ded9cd; margin: 22px 0 18px; } #rowa .sents button { font-family: inherit; background: transparent; cursor: pointer; color: var(--sentiment-color, #3f4543); padding: 10px 18px; border: 1px solid #ded9cd; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; margin-bottom: -1px; font: 16px/1.5 "Georgia", Georgia, serif; } #rowa .sents button.on { background: #fff; border-bottom-color: currentColor; color: #1f4d3a; } #rowa [data-sentiment="positive"] { --sentiment-color: #24613e; } #rowa [data-sentiment="negative"] { --sentiment-color: #a33432; } #rowa [data-sentiment="neutral"] { --sentiment-color: #454545; } #rowa [data-sentiment="unclear"] { --sentiment-color: #70508c; } #rowa .comment { background: white; border: 1px solid #ded9cd; border-radius: 5px; padding: 24px; margin: 16px 0 0; } #rowa .chead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; } #rowa .chead h5 { margin: 0; font-size: 18px; font-weight: 500; color: #191B1C; text-decoration: underline; text-underline-offset: 3px; } #rowa .chead a.link:hover { color: #191B1C; } #rowa .chead .link { flex: none; color: #1f4d3a; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; } #rowa .comment small { color: #8c857a; font-size: 14px; } #rowa .classification { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 12px 0; font: 14px/1.5 "Georgia", Georgia, serif; color: #68645d; } #rowa .classification .sq { margin: 0 7px 0 4px; } #rowa .classification > span:last-child { color: var(--sentiment-color, #68645d); } #rowa .comment p { margin: 16px 0; font-size: 16px; line-height: 1.5; color: #191B1C; white-space: pre-wrap; } #rowa .empty { padding: 45px; border: 1px solid #ded9cd; border-radius: 5px; text-align: center; background: white; color: #68645d; font-size: 16px; margin-top: 16px; } #rowa [hidden] { display: none !important; } #rowa .reply-controls { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 14px; } /* Phones. The subscription table: header on its own, each row full width with the price under the words, the two tabs stacked (Robert, 2026-09-23). */ @media (max-width: 600px) { html #row5 .body { gap: 0 !important; } html #row5 .examples { margin-top: 34px; } html #row5 .table .note, html #row5 .table > p:last-child { margin-bottom: 0; } html #row5 .ptabs { margin: 0 0 22px !important; } html #row5 .ptabs { border: 0 !important; border-radius: 0; gap: 8px; } html #row5 .ptabs button { font-size: 11px; letter-spacing: 0.08em; padding: 13px 10px; border: 1px solid rgba(20,22,26,0.22) !important; border-radius: 3px; } html #row5 .ptabs button.on { border-color: #191B1C !important; } html #row5 .unl .thead { padding-bottom: 10px; font-size: 10px; letter-spacing: 0.1em; line-height: 1.6; } html #row5 .unl .thead { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 0 14px !important; align-items: end; } html #row5 .unl .thead > span:last-child { display: none !important; } html #row5 .unl .thead .price { display: block; text-align: right; } html #row5 .mprice { display: inline; font-size: 13px; letter-spacing: 0; text-transform: none; color: #191B1C; font-weight: 500; } html #row5 .unl .band.row.on .price { display: none !important; } html #row5 .unl .band.row span:first-child { position: relative; padding-left: 18px; } html #row5 .unl .band.row span:first-child::before { content: "\2022"; position: absolute; left: 2px; top: 0; color: #191B1C; } html #row5 .unl .band.row { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 3px 0 !important; } html #row5 .unl .band.row span:last-child { display: none !important; } html #row5 .unl .band.row .price:empty { display: none !important; } html #row5 .unl .band.row .price { text-align: left; color: #191B1C; font-weight: 500; } html #row5 .unl .row { font-family: "Georgia", Georgia, serif; font-size: 16.5px; line-height: 1.45; padding: 11px 0; color: rgba(20,22,26,0.82); } html #row5 .unl .band.row .price { font-family: "Inter", monospace; font-size: 13px; } html #row5 .row.on { padding: 12px 12px !important; } html #row5 .table .flow { margin-top: 22px; } } @media (max-width: 600px) { .m-hide { display: none; } } @media (max-width: 600px) { #row3b .foot .compare { padding-top: 20px; } } /* room between the YouTube mark and Compare reports (Robert, 2026-09-23) */ /* words that only fit on a desktop line (Robert, 2026-09-23) */ /* Phones. The dashboard copy re-flows: KPIs as rows, tabs in a two-column grid, the save row stacked, sentiment tabs in a three-column grid (Robert, 2026-09-23). */ @media (max-width: 600px) { html #rowa .frame { padding: 0 12px 16px; } html #rowa .dhero { padding: 20px 14px 6px; margin: 0 -12px 16px; gap: 14px; } html #rowa .dhero h3 { font-size: 26px; margin-bottom: 6px; } html #rowa .dhero p { font-size: 15px; } html #rowa .kpi { display: flex; flex-direction: column; gap: 0; } html #rowa .kpi > div { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 1px solid #E0DCD0; } html #rowa .kpi > div:last-child { padding-right: 0; } html #rowa .kpi b { font-size: 20px; } html #rowa .kpi i { font-size: 11px; } html #rowa .settings { padding: 16px 14px 18px; gap: 18px; grid-template-columns: minmax(0, 1fr); } html #rowa .cat-heading { font-size: 14px; margin-bottom: 12px; } html #rowa .cats { display: grid; grid-template-columns: 1fr 1fr; } html #rowa .cats button { margin: 0 -1px -1px 0; padding: 11px 6px; font-size: 15px; } html #rowa .cats button:last-child { grid-column: 1 / -1; } html #rowa .help-pop { position: static; } html #rowa .help-text { left: 0; right: 0; width: auto; max-width: none; top: 28px; font-size: 15px; } html #rowa .ta { height: auto; min-height: 96px; font-size: 15px; } html #rowa .select { font-size: 15px; } html #rowa .controls { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 14px; min-width: 0; } html #rowa .controls .tact { font-size: 15px; white-space: nowrap; flex: 0 0 auto; } html #rowa .controls .btn { flex: 0 0 100%; text-align: center; padding: 12px 16px; } html #rowa .controls .quota { flex: 0 0 100%; } html #rowa .quota { font-size: 14px; line-height: 1.55; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid #E7E3D8; max-width: none; width: 100%; flex-basis: auto; text-align: left; } html #rowa .qn > span { display: block; margin-left: 0; } html #rowa .qn strong { font-size: 13px; } html #rowa .results-heading { margin-top: 28px; gap: 12px; } html #rowa .results-heading h4 { font-size: 24px; } html #rowa .results-heading p { font-size: 15px; margin-top: 8px; } html #rowa .results-heading img { width: 120px; height: auto; } html #rowa .sents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 18px 0 14px; } html #rowa .sents button { padding: 8px 4px; font-size: 15px; text-align: center; margin-bottom: 0; white-space: nowrap; } html #rowa .comment { padding: 18px 16px; margin-top: 0; } html #rowa .chead { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 10px; } html #rowa .chead h5 { font-size: 17px; } html #rowa .chead .link { font-size: 15px; } html #rowa .comment small { font-size: 13px; } html #rowa .classification { font-size: 13.5px; } html #rowa .comment p { font-size: 15.5px; } html #rowa .reply-controls { gap: 18px; } html #rowa .empty { padding: 28px 16px; font-size: 15px; } } html, body { margin: 0; background: #F9F9F6; font-family: "Georgia", Georgia, serif; } a { color: #191B1C; } a:hover { color: #191B1C; } /* Row 3. Same content frame as the hero and row 2: 1440 centred, fields bleed to the edges, type sizes fixed. --m is the gutter outside the frame. */ #row3 { --m: max(0px, (100% - 1440px) / 2); background: #F9F9F6; border-bottom: 1px solid rgba(20,22,26,0.12); } /* no border-top, as row 2 */ #row3 .inner { padding: 70px calc(var(--m) + 56px) 0; } #row3 .head { display: grid; grid-template-columns: 1fr 620px; gap: 88px; align-items: start; padding-bottom: 52px; } #row3 .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 26px; } #row3 .eyebrow { display: block; margin-bottom: 18px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #row3 h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; max-width: 600px; text-wrap: pretty; } #row3 .copy { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; } /* 4px lower, level with the lead (Robert, 2026-09-05) */ /* the lead under the headline, so the two columns are even (Robert, 2026-09-05) */ #row3 .head .lead { margin: 22px 0 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: rgba(20,22,26,0.78); } #row3 .copy p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(20,22,26,0.78); } #row3 .copy p b { font-weight: 500; color: #191B1C; } /* the example questions as a list (Robert, 2026-09-05: the paragraph was "a blob") */ #row3 .asks { list-style: none; margin: 2px 0; padding: 0; } #row3 .asks li { padding: 9px 0 9px 18px; border-top: 1px solid rgba(20,22,26,0.1); font-size: 17px; line-height: 1.45; color: #191B1C; position: relative; } #row3 .asks li:last-child { border-bottom: 1px solid rgba(20,22,26,0.1); } #row3 .asks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 1px; background: #191B1C; } #row3 .copy p.fine { font-family: "Inter", monospace; font-size: 10px; line-height: 1.7; color: #8C857A; white-space: nowrap; } /* one line, 10px: Robert, 2026-09-04. p.fine so it outranks .copy p */ #row3 .flow { display: grid; grid-template-columns: 268px 44px 292px 44px 1fr; gap: 24px; align-items: stretch; padding-top: 40px; border-top: 1px solid rgba(20,22,26,0.14); } #row3 .label { font-family: "Inter", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A9186; } #row3 .actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; } /* pictures of the report's buttons, not actions: outlined, so green stays the page's one action colour (Robert, 2026-09-05) */ #row3 .mock { display: block; font-family: "Inter", monospace; font-size: 13px; letter-spacing: 0.03em; border-radius: 2px; padding: 16px 22px; text-align: left; background: #F9F9F6; color: #191B1C; border: 1px solid rgba(20,22,26,0.22); } /* one drawing, so the head sits on the line (Robert, 2026-09-05: "this arrow head doesnt line up with the line to the left of it") */ #row3 .arrow { display: flex; align-items: center; justify-content: center; } #row3 .arrow svg { display: block; overflow: visible; } #row3 .file { text-decoration: none; color: inherit; cursor: pointer; background: #F0F1ED; border: 1px solid rgba(20,22,26,0.12); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; justify-content: center; } #row3 .file:hover { border-color: rgba(31,77,58,0.6); } #row3 .file:hover .name { color: #191B1C; } #row3 .file .top { display: flex; align-items: center; justify-content: space-between; } #row3 .chip-csv { font-family: "Inter", monospace; font-size: 9px; letter-spacing: 0.1em; background: #191B1C; color: #F9F9F6; padding: 3px 6px; } #row3 .file .name { font-family: "Inter", monospace; font-size: 13px; color: #191B1C; word-break: break-all; } #row3 .file .meta { display: flex; flex-direction: column; gap: 5px; font-family: "Inter", monospace; font-size: 11px; line-height: 1.5; color: rgba(20,22,26,0.7); } #row3 .chat { border: 1px solid rgba(20,22,26,0.14); background: #F9F9F6; display: flex; flex-direction: column; } #row3 .chat .q { padding: 18px 24px 16px; display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: baseline; border-bottom: 1px solid rgba(20,22,26,0.1); } #row3 .chat .q .text { font-size: 19px; line-height: 1.3; color: #191B1C; } #row3 .chat .a { padding: 18px 24px 22px; display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; } #row3 .chat .a .body { display: flex; flex-direction: column; gap: 14px; } #row3 .chat .a p { margin: 0; font-size: 16.5px; line-height: 1.5; color: rgba(20,22,26,0.82); } #row3 .figure { font-family: "Inter", monospace; font-size: 16px; font-weight: 500; color: #191B1C; } #row3 .excerpt { background: #F0F1ED; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } #row3 .excerpt .quote { font-style: italic; font-size: 16px; line-height: 1.4; color: #191B1C; } #row3 .excerpt .prov { display: flex; align-items: center; gap: 14px; font-family: "Inter", monospace; font-size: 10.5px; color: #8C857A; } #row3 .excerpt .prov .kind { display: flex; align-items: center; gap: 7px; } #row3 .excerpt .prov .kind span.dot { width: 8px; height: 8px; background: #C08A2E; } /* looks like the link the report has, but goes nowhere: the example is invented (Robert, 2026-09-05) */ #row3 .excerpt .prov .openlink { color: #191B1C; border-bottom: 1px solid rgba(31,77,58,0.35); } #row3 .caveat { margin: 24px 0 0; font-family: "Inter", monospace; font-size: 10.5px; color: #9A9186; } /* the exchange animates: question typed, answer typed, excerpt fades up */ #row3 .chat .q .text::after { content: ""; display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; background: #191B1C; vertical-align: -0.12em; opacity: 0; } #row3 .chat.typing-q .q .text::after { opacity: 1; animation: r3blink 0.9s steps(1) infinite; } #row3 .chat .a .body { transition: opacity 0.35s ease; } #row3 .chat .excerpt { transition: opacity 0.5s ease, transform 0.5s ease; } #row3 .chat.hide-a .a .body { opacity: 0; } #row3 .chat.hide-x .excerpt { opacity: 0; transform: translateY(6px); } @keyframes r3blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #row3 .chat .q .text::after { display: none; } #row3 .chat .a .body, #row3 .chat .excerpt { transition: none; opacity: 1 !important; transform: none !important; } } #row3 .strip .cta-btn { display: inline-block; text-decoration: none; font-family: "Inter", monospace; font-size: 13px; letter-spacing: 0.03em; background: #191B1C; color: #F9F9F6; border: 0; border-radius: 2px; padding: 13px 22px; } #row3 .strip .cta-btn:hover { background: #303536; color: #F9F9F6; } #row3 .strip { margin-top: 64px; padding: 22px calc(var(--m) + 56px); background: #F0F1ED; border-top: 1px solid rgba(20,22,26,0.1); display: flex; justify-content: space-between; align-items: center; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.06em; color: #8C857A; } html, body { margin: 0; background: #F9F9F6; font-family: "Georgia", Georgia, serif; } a { color: #191B1C; } a:hover { color: #191B1C; } /* Row 3B. Same content frame as the hero and rows 2 to 4: 1440 centred, fields bleed to the edges, type sizes fixed. Hairline below, no top border. */ #row3b { --m: max(0px, (100% - 1440px) / 2); background: #F9F9F6; border-bottom: 1px solid rgba(20,22,26,0.12); } #row3b .inner { padding: 80px calc(var(--m) + 56px) 0; } #row3b .head { display: grid; grid-template-columns: 1fr 397px; gap: 80px; align-items: end; padding-bottom: 46px; } /* 397, as row 2 */ #row3b .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 26px; } #row3b .eyebrow { display: block; margin-bottom: 18px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #row3b h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; max-width: 700px; text-wrap: pretty; } #row3b .note { margin: 0 0 6px; padding: 16px 18px; background: #F0F1ED; border-left: 2px solid #191B1C; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: rgba(20,22,26,0.7); } #row3b .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 40px; border-top: 1px solid rgba(20,22,26,0.14); } #row3b .tile .kind { font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #8C857A; margin-bottom: -12px; } #row3b .tile { border: 1px solid rgba(20,22,26,0.14); padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 20px; } #row3b h3 { margin: 0; font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.014em; color: #191B1C; } #row3b .counts { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid rgba(20,22,26,0.1); font-family: "Inter", monospace; font-size: 12.5px; } #row3b .counts div { display: flex; justify-content: space-between; } #row3b .counts .k { color: #8C857A; } #row3b .counts .v { color: #191B1C; } #row3b .open { margin-top: auto; align-self: flex-start; font-family: "Inter", monospace; font-size: 12.5px; letter-spacing: 0.03em; color: #191B1C; text-decoration: none; } #row3b .open:hover { color: #191B1C; } /* People did not know the tiles were clickable (2026-09-17). The whole tile is now the link: it lifts, its border turns green, and the open link reads as a button that fills on mouse over. */ #row3b .tile { position: relative; background: #F9F9F6; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #row3b .tile:hover { transform: translateY(-4px); border-color: #191B1C; box-shadow: 0 14px 30px -14px rgba(20,22,26,0.35); } #row3b .tile .open { display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid #191B1C; border-radius: 2px; transition: background 0.18s ease, color 0.18s ease; } #row3b .tile .open::after { content: ""; position: absolute; inset: 0; } #row3b .tile:hover .open, #row3b .tile .open:focus-visible { background: #191B1C; color: #F9F9F6; outline: none; } #row3b .tiles .tile:first-child:hover .open::before { background: #F9F9F6; box-shadow: 0 0 0 3px rgba(251,250,247,0.25); } @media (prefers-reduced-motion: reduce) { #row3b .tile, #row3b .tile .open { transition: none; } #row3b .tile:hover { transform: none; } } /* The first tile's link pulses so the eye lands on it; the other two read as the same control (Robert, 2026-09-15). */ #row3b .tiles .tile:first-child .open::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #191B1C; box-shadow: 0 0 0 3px rgba(31,77,58,0.2); vertical-align: 1px; animation: openpulse 1.6s infinite; } @keyframes openpulse { 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { #row3b .tiles .tile:first-child .open::before { animation: none; } } #row3b .foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 34px; } #row3b .foot p { margin: 0; font-family: "Inter", monospace; font-size: 11px; color: #8C857A; } #row3b .mark { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } #row3b .mark img { display: block; width: 300px; height: 39px; } #row3b .mark span { font-family: "Inter", monospace; font-size: 10px; color: rgba(20,22,26,0.8); text-align: center; } /* the compare explainer beside the mark (Robert, 2026-09-14): two thirds of the row */ #row3b .compare { max-width: 62%; margin-left: 40px; } #row3b .compare .eyebrow { display: block; margin-bottom: 10px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #row3b .compare p { margin: 0; font-family: "Georgia", Georgia, serif; font-size: 17px; line-height: 1.55; color: rgba(20,22,26,0.76); text-wrap: pretty; } #row3b .strip { margin-top: 48px; padding: 22px calc(var(--m) + 56px); background: #F0F1ED; border-top: 1px solid rgba(20,22,26,0.1); display: flex; justify-content: space-between; align-items: center; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.06em; color: #8C857A; } #row3b .lean { display: block; margin: 2px 0 -6px; } /* the svg draws at 500 wide and shows at about 360, so these land near 13 to 14px */ #row3b .lean .lb { font-family: "Inter", monospace; font-size: 18px; fill: #8C857A; } #row3b .lean .pc { font-family: "Inter", monospace; font-size: 20px; font-weight: 500; fill: #191B1C; } #row3b .lean .ct { font-family: "Inter", monospace; font-size: 17px; fill: #8C857A; } #row3b .about { font-family: "Inter", monospace; font-size: 12px; color: #9A9186; margin-top: -6px; } html, body { margin: 0; background: #F9F9F6; font-family: "Georgia", Georgia, serif; } a { color: #191B1C; } a:hover { color: #191B1C; } /* Row 5. Same content frame as the hero and rows 2 to 4: 1440 centred, fields bleed to the edges, type sizes fixed. Hairline below, no top border. */ #row5 { --m: max(0px, (100% - 1440px) / 2); background: #F9F9F6; border-bottom: 1px solid rgba(20,22,26,0.12); } #row5 .inner { padding: 80px calc(var(--m) + 56px) 72px; } #row5 .head { display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: end; padding-bottom: 46px; } #row5 .head .lead { margin: 22px 0 0; max-width: none; white-space: nowrap; font-size: 17px; line-height: 1.55; color: rgba(20,22,26,0.78); } /* one line (Robert, 2026-09-05) */ #row5 .head .lead b { font-weight: 500; color: #191B1C; } #row5 .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 26px; } #row5 .eyebrow { display: block; margin-bottom: 18px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #row5 h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; max-width: 700px; text-wrap: pretty; } #row5 .note { margin: 0 0 6px; padding: 16px 18px; background: #F0F1ED; border-left: 2px solid #191B1C; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: rgba(20,22,26,0.7); } #row5 .body { display: grid; grid-template-columns: minmax(0, 1fr) 496px; gap: 72px; align-items: start; padding-top: 40px; border-top: 1px solid rgba(20,22,26,0.14); } /* minmax(0,1fr): the left column can never grow from its content, so the right column stays put when the tabs switch (Robert, 2026-09-23) */ #row5 .body > .table { min-width: 0; } /* bands table: fixed price column so every figure lines up */ #row5 .band { display: grid; grid-template-columns: 1fr 140px 28px; gap: 0 20px; align-items: center; } #row5 .band .price { text-align: right; } /* the unlimited row: its price is words, so the column gives it the room (2026-09-14) */ #row5 .band.sub { grid-template-columns: 1fr auto 28px; } #row5 .band.sub .price { white-space: nowrap; } /* the two tabs over the price row, Single reports / Unlimited reports (2026-09-14) */ #row5 .body { gap: 0 72px; } /* the tabs are a grid row of their own: no row gap, the tabs carry their own space below */ #row5 .body > [hidden] { display: none !important; } /* the examples column has its own display rule, which beat the hidden attribute */ #row5 .ptabs { grid-column: 1 / -1; display: inline-flex; width: max-content; max-width: 100%; margin: -6px 0 28px; border: 1px solid rgba(20,22,26,0.22); border-radius: 2px; overflow: hidden; } #row5 .ptabs button { flex: 0 0 auto; white-space: nowrap; font-family: "Inter", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 22px; background: #FFFFFF; color: #191B1C; border: 0; border-right: 1px solid rgba(20,22,26,0.22); cursor: pointer; } #row5 .ptabs button:last-child { border-right: 0; } #row5 .ptabs button:hover { background: #F0F1ED; } #row5 .ptabs button.on { background: #191B1C; color: #F9F9F6; } #row5 .ptabs button:focus-visible { outline: 2px solid #191B1C; outline-offset: -2px; } /* every block pinned to its cell, so hiding the table cannot pull the three reports across (Robert, 2026-09-14) */ #row5 .body > .table, #row5 .body > .unl { grid-column: 1; grid-row: 2; } #row5 .body > .examples { grid-column: 2; grid-row: 2; } #row5 .unl-price { font-family: "Georgia", Georgia, serif; font-size: 46px; line-height: 1; color: #191B1C; } #row5 .unl-price span { font-family: "Inter", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8C857A; margin-left: 10px; } #row5 .unl-lead { margin: 12px 0 20px; font-size: 17px; line-height: 1.55; color: rgba(20,22,26,0.78); } #row5 .unl-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } #row5 .unl-lines li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.55; color: rgba(20,22,26,0.76); } #row5 .unl-lines li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 2px; background: #191B1C; } #row5 .unl .cta-btn { margin-top: 24px; } #row5 .unl .gst { margin-top: 18px; } #row5 .unl .band span:first-child { white-space: nowrap; } #row5 .unl .price { white-space: nowrap; } #row5 .mprice { display: none; } /* the $29 p/m beside the header is phones only (Robert, 2026-09-23) */ #row5 .unl .cta { margin-top: 22px; } #row5 .table .flow { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } #row5 .table .flow li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: rgba(20,22,26,0.78); } #row5 .table .flow li:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 36px; right: -8px; height: 1px; background: rgba(20,22,26,0.28); } #row5 .table .flow li:not(:last-child)::before { content: ""; position: absolute; top: 11px; right: -8px; width: 6px; height: 6px; border-top: 1px solid rgba(20,22,26,0.45); border-right: 1px solid rgba(20,22,26,0.45); transform: rotate(45deg); } #row5 .table .flow .n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "Georgia", Georgia, serif; font-size: 15px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; padding-top: 1px; color: #191B1C; background: #EBF1ED; border: 1px solid #D9D4C7; flex: none; } /* The four steps draw themselves once, in order, when they scroll into view: the number lights, the line grows to the next one, the arrow appears. About a second and a half, then still. Nothing loops. (Robert, 2026-09-23.) Off for anyone who asked for reduced motion. */ #row5 .table .flow.armed .n { transition: background .35s ease, color .35s ease, border-color .35s ease; } #row5 .table .flow.armed li:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform .38s ease; } #row5 .table .flow.armed li:not(:last-child)::before { opacity: 0; transition: opacity .2s ease; } #row5 .table .flow.play li.lit .n { background: #191B1C; color: #F9F9F6; border-color: #191B1C; } #row5 .table .flow.play li.lit:not(:last-child)::after { transform: scaleX(1); } #row5 .table .flow.play li.lit:not(:last-child)::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { #row5 .table .flow.armed .n, #row5 .table .flow.armed li::after, #row5 .table .flow.armed li::before { transition: none; } } @media (max-width: 640px) { #row5 .table .flow { grid-template-columns: 1fr; gap: 12px; } #row5 .table .flow li { flex-direction: row; align-items: center; } #row5 .table .flow li::before, #row5 .table .flow li::after { display: none; } } #row5 .thead { padding-bottom: 12px; border-bottom: 1px solid rgba(20,22,26,0.2); font-family: "Inter", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A9186; } #row5 .row { padding: 13px 0; border-bottom: 1px solid rgba(20,22,26,0.08); font-family: "Inter", monospace; font-size: 13.5px; color: rgba(20,22,26,0.82); } #row5 .row:last-child { border-bottom-color: rgba(20,22,26,0.14); } /* the band you fall in, marked as the checkout marks it */ #row5 .row.on { padding: 13px 16px 13px 14px; margin: 0 -16px 0 -14px; background: #F0F1ED; border-left: 2px solid #191B1C; font-weight: 500; color: #191B1C; } #row5 .row .mark { text-align: right; color: #191B1C; } #row5 .examples { display: flex; flex-direction: column; gap: 18px; } #row5 .label { font-family: "Inter", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A9186; } #row5 .ex { background: #F0F1ED; border-left: 2px solid #191B1C; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } /* the three cards flip in as the row arrives, one after another (Robert, 2026-09-05: "too static at the bottom of the page") */ #row5 .examples { perspective: 900px; } #row5 .examples.arm .ex { opacity: 0; transform: rotateX(-72deg); transform-origin: top center; } #row5 .examples.arm .ex.in { opacity: 1; transform: none; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease; } @media (prefers-reduced-motion: reduce) { #row5 .examples.arm .ex { opacity: 1; transform: none; transition: none; } } /* the cards open their reports (Robert, 2026-09-05: "do you think that the reports on the rhs should be clickable?") */ #row5 a.ex:hover { background: #EDE9DF; border-left-color: #303536; } #row5 a.ex:hover h3 { color: #191B1C; } #row5 .ex h3 { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.012em; color: #191B1C; } #row5 .ex .line { display: flex; align-items: baseline; justify-content: space-between; font-family: "Inter", monospace; } #row5 .ex .count { font-size: 12.5px; color: #8C857A; } #row5 .ex .amount { font-size: 20px; font-weight: 500; color: #191B1C; } #row5 .cta { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } #row5 .cta-btn { display: inline-block; text-decoration: none; font-family: "Inter", monospace; font-size: 13px; letter-spacing: 0.03em; background: #191B1C; color: #F9F9F6; border: 0; border-radius: 2px; padding: 17px 26px; cursor: pointer; } #row5 .cta-btn:hover { background: #303536; color: #F9F9F6; } #row5 .fine { font-family: "Inter", monospace; font-size: 11px; color: #8C857A; } #row5 .gst { margin: 14px 0 0; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.04em; color: #8C857A; } html, body { margin: 0; background: #F9F9F6; font-family: "Georgia", Georgia, serif; } a { color: #191B1C; } a:hover { color: #191B1C; } /* Footer. Same content frame as every row: 1440 centred, fields bleed to the edges, type sizes fixed. No top border, since the price strip closes row 5. */ #foot { --m: max(0px, (100% - 1440px) / 2); background: #F0F1ED; border-top: 1px solid rgba(20,22,26,0.12); } /* the panel tint, so it reads as a footer (Robert, 2026-09-05) */ #foot .inner { padding: 76px calc(var(--m) + 56px) 0; } #foot .top { display: grid; grid-template-columns: 360px 1fr; gap: 88px; align-items: start; padding-bottom: 56px; } #foot .wordmark { display: flex; align-items: baseline; gap: 3px; margin-bottom: 18px; text-decoration: none; } #foot .wordmark .name { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: #191B1C; } #foot .wordmark .tld { font-family: "Inter", monospace; font-size: 13px; color: #191B1C; } #foot .top p { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.5; color: rgba(20,22,26,0.76); } #foot .cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } #foot .cta-btn { display: inline-block; text-decoration: none; font-family: "Inter", monospace; font-size: 13px; letter-spacing: 0.03em; background: #191B1C; color: #F9F9F6; border: 0; border-radius: 2px; padding: 17px 26px; cursor: pointer; } #foot .cta-btn:hover { background: #303536; color: #F9F9F6; } #foot .fine { font-family: "Inter", monospace; font-size: 11px; line-height: 1.6; color: #8C857A; } #foot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 6px 0 0; } #foot .col { display: flex; flex-direction: column; gap: 14px; } #foot .label { font-family: "Inter", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A9186; } #foot .col a { font-size: 16px; color: rgba(20,22,26,0.82); text-decoration: none; } #foot .col a:hover { color: #191B1C; } #foot .col a.mono { font-family: "Inter", monospace; font-size: 13px; color: #191B1C; border-bottom: 1px solid rgba(31,77,58,0.3); padding-bottom: 2px; align-self: flex-start; } #foot .col a.mono:hover { color: #191B1C; border-bottom-color: rgba(20,22,26,0.4); } #foot .col p { margin: 4px 0 0; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: #8C857A; } #foot .strip { padding: 20px calc(var(--m) + 56px); background: #E2DDD0; border-top: 1px solid rgba(20,22,26,0.14); display: flex; justify-content: space-between; align-items: center; gap: 40px; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.04em; color: #8C857A; } #foot .strip .set { display: flex; align-items: center; gap: 22px; } #foot .strip .sep { width: 1px; height: 12px; background: rgba(20,22,26,0.18); } /* the phone bar is one line: nothing in it wraps */ @media (max-width: 900px) { .sitebar > :first-child, #bar > :first-child, .sitebar .menu, #bar .menu, .menu-in { white-space: nowrap; } .sitebar .menu, #bar .menu { flex-shrink: 0; } } /* the narrowest phones: Sign out beside the hamburger ran 6px past 320 */ @media (max-width: 360px) { .sitebar, #bar { padding-left: 14px !important; padding-right: 14px !important; } .menu-in { padding-left: 10px !important; padding-right: 10px !important; } .burger { margin-right: 4px; margin-left: 10px; } .sitebar .n, #bar .n, #bar .name { font-size: 18px !important; } /* room between .app and the hamburger */ } /* the phone menu (Robert, 2026-09-06: signed in on his phone there was no way back to the home page). Below 900 the section links are hidden and a hamburger beside the button opens them, with Home first, as a panel under the bar. Built by chrome.js on every page with a site bar. */ .burger { display: none; width: 40px; height: 40px; margin-right: 6px; padding: 0; border: 1px solid rgba(20,22,26,0.18); border-radius: 2px; background: #F9F9F6; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .burger span { display: block; width: 18px; height: 2px; background: #191B1C; } .burger[aria-expanded="true"] { border-color: #191B1C; } .mnav { display: none; flex-direction: column; background: #F0F1ED; border-bottom: 1px solid rgba(20,22,26,0.12); } .mnav.open { display: flex; } .mnav a { padding: 14px 20px; font-family: "Georgia", Georgia, serif; font-size: 18px; color: #191B1C; text-decoration: none; border-top: 1px solid rgba(20,22,26,0.1); } .mnav a:first-child { border-top: 0; } .mnav a:hover { color: #191B1C; } @media (max-width: 900px) { .burger { display: inline-flex !important; } /* the home page's own menu rules set its children to block */ /* on this page the bar is absolute inside the hero, so the panel is too: under the bar, over the hero, not in the hero's flow above the bar (Robert's phone, 2026-09-06) */ #hero .mnav { position: absolute; top: 88px; left: 0; right: 0; z-index: 5; } } @media (max-width: 900px) and (max-height: 500px) { #hero .mnav { top: 64px; } } .sin-scrim { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,22,26,0.34); } .sin-scrim.on { display: flex; } .sin { position: relative; width: min(520px, 100%); background: #F9F9F6; border: 1px solid rgba(20,22,26,0.14); padding: 40px 44px 36px; box-sizing: border-box; } .sin .x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; background: none; font: 22px/1 "Georgia", serif; color: #8C857A; cursor: pointer; } .sin .x:hover { color: #191B1C; } .sin .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 22px; } .sin .eyebrow { display: block; margin-bottom: 14px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } .sin h2 { margin: 0 0 24px; font-family: "Georgia", serif; font-weight: 400; font-size: 32px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; } .sin ol { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; } .sin li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(20,22,26,0.1); font-family: "Georgia", serif; font-size: 17.5px; line-height: 1.45; color: rgba(20,22,26,0.82); } .sin li:last-child { border-bottom: 1px solid rgba(20,22,26,0.1); } .sin li .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #F0F1ED; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.06em; color: #191B1C; } .sin li.now .n { background: #191B1C; color: #F9F9F6; } .sin li .s { display: block; font-family: "Inter", monospace; font-size: 11px; letter-spacing: 0.04em; color: #8C857A; margin-top: 2px; } .sin .gbtn { min-height: 44px; margin: 0 0 14px 46px; } /* on the step-text edge (Robert, 2026-09-05) */ .sin .consent, .sin .msg { margin: 0 0 0 46px; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: #8C857A; } .sin .consent a { color: #191B1C; text-decoration: none; border-bottom: 1px solid rgba(31,77,58,0.35); } .sin .msg { color: #A8482A; margin-top: 10px; } .sin .msg:empty { display: none; } /* the readable anchors sit at the very top of their section, so a menu click lands on the section's edge, not part-way into it */ /* ------------------------------------------------------ row 6, the questions */ #row6 { --m: max(0px, (100% - 1440px) / 2); background: #F9F9F6; border-bottom: 1px solid rgba(20,22,26,0.12); position: relative; } #row6 .inner { padding: 80px calc(var(--m) + 56px) 72px; } #row6 .head { padding-bottom: 34px; } #row6 .rule { display: block; width: 88px; height: 3px; background: #191B1C; margin-bottom: 26px; } #row6 .eyebrow { display: block; margin-bottom: 18px; font-family: "Inter", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #191B1C; } #row6 h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.017em; color: #191B1C; max-width: 700px; text-wrap: pretty; } #row6 .body { display: grid; grid-template-columns: 1fr 397px; gap: 80px; align-items: start; } #row6 .faqs { border-top: 1px solid rgba(20,22,26,0.14); min-width: 0; } #row6 .side { padding-top: 22px; } #row6 .side .mark { margin: 0 0 26px; } #row6 .note { margin: 0; padding: 16px 18px; background: #F0F1ED; border-left: 2px solid #191B1C; font-family: "Inter", monospace; font-size: 11px; line-height: 1.7; color: rgba(20,22,26,0.7); } #row6 .note b { color: #191B1C; font-weight: 500; } #row6 .cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } #row6 .cta-btn { display: inline-block; text-decoration: none; font-family: "Inter", monospace; font-size: 13px; letter-spacing: 0.03em; background: #191B1C; color: #F9F9F6; border: 0; border-radius: 2px; padding: 17px 26px; cursor: pointer; } #row6 .cta-btn:hover { background: #303536; color: #F9F9F6; } #row6 .fine { font-family: "Inter", monospace; font-size: 11px; color: #8C857A; } #row6 .faq { border-bottom: 1px solid rgba(20,22,26,0.14); } #row6 .faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: "Georgia", Georgia, serif; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: #191B1C; } #row6 .faq summary::-webkit-details-marker { display: none; } #row6 .faq summary:hover { color: #191B1C; } #row6 .faq summary .mark { flex: none; width: 14px; height: 14px; position: relative; top: 1px; } #row6 .faq summary .mark::before, #row6 .faq summary .mark::after { content: ""; position: absolute; background: #191B1C; left: 0; top: 6px; width: 14px; height: 2px; } #row6 .faq summary .mark::after { transform: rotate(90deg); transition: transform 0.2s ease; } #row6 .faq[open] summary .mark::after { transform: rotate(0deg); } #row6 .faq .answer { padding: 0 48px 26px 0; max-width: 820px; } #row6 .faq .answer p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: rgba(20,22,26,0.76); } #row6 .faq .answer p:last-child { margin-bottom: 0; } #row2, #row3, #row3b, #row5 { position: relative; } .anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; } /* ---- phones and small tablets (2026-09-05). The rows were drawn at 1440 with fixed columns; below 900px they stack, the hero's panel and graphic stack, the header keeps the wordmark and Sign in, and nothing is wider than the screen. Measured at 320, 360, 375, 390, 414, 430, 768 and 1024 in the emulator. */ /* tablets and small laptops (901 to 1200): row 3's five-column flow needs about 1150px, so it stacks; row 5's example cards go under the table */ @media (max-width: 1200px) { #row3 .flow { grid-template-columns: 1fr !important; gap: 18px !important; } #row3 .arrow { justify-content: flex-start !important; } #row3 .arrow svg { display: none; } #row3 .arrow::after { content: "↓"; display: block; margin-left: 14px; font-family: "Inter", monospace; font-size: 22px; line-height: 1; color: #191B1C; } #row3 .flow > * { min-width: 0; } #row5 .body { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; } #row5 .body > .table { min-width: 0; } #row5 .ptabs { display: flex !important; flex-direction: column; width: 100% !important; max-width: none; } #row5 .ptabs button { white-space: normal; text-align: center; border-right: 0; border-bottom: 1px solid rgba(20,22,26,0.22); padding: 12px 14px; } #row5 .ptabs button:last-child { border-bottom: 0; } #row5 .unl .band span:first-child { white-space: normal; } #row5 .body > .table, #row5 .body > .unl, #row5 .body > .examples { grid-column: 1 !important; grid-row: auto !important; } /* one column: the pins come off */ #row5 .body > .ptabs { order: -2; } #row5 .body > .unl { order: -1; } /* tabs, then the unlimited block, then the three reports */ #row5 .head .lead { white-space: normal !important; } #row2 .head, #row3 .head, #row3b .head, #row5 .head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; } #row2 .cols { grid-template-columns: 1fr !important; } #row2 .col, #row2 .col + .col { padding: 24px 0 8px !important; border-left: 0 !important; border-top: 1px solid rgba(20,22,26,0.12); min-height: 0 !important; } #row2 .col + .col::before { display: none; } #row3 .head .lead { max-width: none !important; } #row3 .copy p.fine { white-space: normal !important; } #row2 .head > *, #row3 .head > *, #row3b .head > *, #row5 .head > * { min-width: 0; } #foot .cols { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } #foot .col a.mono { word-break: break-all; } } @media (max-width: 900px) { .menu a:not(.menu-in), .menu .sep { display: none; } #bar { padding: 0 20px !important; } #hero { height: auto !important; min-height: 0 !important; max-height: none !important; } #panel { position: static !important; width: auto !important; padding: 116px 20px 32px !important; border-right: 0 !important; } #panel h1 { font-size: 36px !important; } /* the loop draws its own phone layout (home-1.js, phone tier) in a 420px canvas, and the mark sits under it instead of over it */ #motion { position: relative !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important; height: auto !important; } #motion canvas { height: 420px !important; } #compliance { position: static !important; align-items: center !important; padding: 4px 20px 24px !important; } #compliance img { width: 300px !important; max-width: calc(100vw - 64px); } #row2 .inner, #row3 .inner, #row3b .inner, #row5 .inner { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; } #row2 h2, #row3 h2, #row3b h2, #row5 h2 { font-size: 32px !important; max-width: none !important; } #row6 .inner { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; } #row6 h2 { font-size: 32px !important; } #row6 .faq summary { font-size: 20px; padding: 18px 0; } #row6 .faq .answer { padding-right: 0; } #row6 .body { grid-template-columns: 1fr !important; gap: 36px !important; } #row6 .side { padding-top: 0; } #row2 .figures { margin-top: 14px !important; } #rowa .head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; } #rowa .head > * { min-width: 0; } #rowa .inner { padding: 56px 20px 56px !important; } #rowa h2 { font-size: 32px !important; } #rowa .frame { padding: 0 16px 20px; } #rowa .dhero { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 16px; margin: 0 -16px 20px; } #rowa .dhero h3 { font-size: 28px; } #rowa .kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } #rowa .kpi .bar { display: none; } #rowa .kpi > div { padding: 0 6px; } #rowa .kpi b { font-size: 22px; } #rowa .kpi i { font-size: 10px; } #rowa .settings { grid-template-columns: 1fr; padding: 18px; } #rowa .results-heading { flex-direction: column; align-items: flex-start; } #rowa .quota { flex-basis: 100%; margin-left: 0; text-align: left; max-width: none; } #rowa .qn > span { display: block; margin-left: 0; } #rowa .chead { flex-wrap: wrap; } #rowa .dlabel { flex-direction: column; align-items: flex-start; gap: 6px; } #row3 .head > *, #row3 .flow > *, #row3 .chat .q > *, #row3 .chat .a > * { min-width: 0; } #row3 .chat .q, #row3 .chat .a { grid-template-columns: 72px 1fr !important; gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; } #row3 .excerpt .prov { flex-wrap: wrap; gap: 6px 14px !important; } #row3 .excerpt .prov .openlink { white-space: nowrap; } #row3 .flow { grid-template-columns: 1fr !important; gap: 18px !important; } #row3 .arrow { justify-content: flex-start !important; } #row3 .arrow svg { display: none; } #row3 .arrow::after { content: "↓"; display: block; margin-left: 14px; font-family: "Inter", monospace; font-size: 22px; line-height: 1; color: #191B1C; } #row3 .strip, #row2 .strip, #row3b .strip { flex-direction: column; align-items: flex-start !important; gap: 12px; padding-left: 20px !important; padding-right: 20px !important; } #row3b .tiles { grid-template-columns: 1fr !important; } #row3b .foot { flex-direction: column; align-items: flex-start; gap: 16px; } #row3b .mark img { width: 300px !important; max-width: calc(100vw - 40px); } #row3b .compare { max-width: none; margin-left: 0; } #row5 .body { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; } #row5 .body > .table { min-width: 0; } #row5 .ptabs { display: flex !important; flex-direction: column; width: 100% !important; max-width: none; } #row5 .ptabs button { white-space: normal; text-align: center; border-right: 0; border-bottom: 1px solid rgba(20,22,26,0.22); padding: 12px 14px; } #row5 .ptabs button:last-child { border-bottom: 0; } #row5 .unl .band span:first-child { white-space: normal; } #row5 .body > .table, #row5 .body > .unl, #row5 .body > .examples { grid-column: 1 !important; grid-row: auto !important; } /* one column: the pins come off */ #row5 .body > .ptabs { order: -2; } #row5 .body > .unl { order: -1; } /* tabs, then the unlimited block, then the three reports */ #row5 .head .lead { white-space: normal !important; } #row5 .row.on { margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; } #foot .inner { padding: 48px 20px 0 !important; } #foot .top { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 40px !important; } #foot .cols { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } #foot .strip { flex-direction: column; align-items: flex-start !important; gap: 10px; padding-left: 20px !important; padding-right: 20px !important; } #foot .strip .set { flex-wrap: wrap; gap: 10px 14px; } #foot .strip .sep { display: none; } /* taller than a 320x568 screen: the scrim scrolls, the card starts at the top (red team round 2) */ .sin-scrim { padding: 12px !important; align-items: flex-start !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sin { padding: 28px 22px 24px !important; } .sin h2 { font-size: 26px !important; } .sin .gbtn, .sin .consent, .sin .msg { margin-left: 0 !important; } .sin .gbtn { max-width: 100%; overflow: hidden; } .menu a.menu-in { padding: 12px 14px !important; } #foot .col a { padding: 5px 0; } #foot .col { gap: 8px !important; } } /* phones held sideways: a shorter bar (red team, 2026-09-05) */ @media (max-width: 900px) and (max-height: 500px) { #bar { height: 64px !important; } #panel { padding-top: 88px !important; } } @media (max-width: 480px) { #panel h1 { font-size: 32px !important; } #foot .cols { grid-template-columns: 1fr !important; } #row5 .band { grid-template-columns: 1fr 90px 20px !important; } #row5 .band.sub { grid-template-columns: 1fr auto 20px !important; } #row5 .band.sub .price { white-space: normal; } } @media (max-width: 360px) { #bar { padding: 0 14px !important; } #bar > :first-child > span:first-child { font-size: 18px !important; } #bar .menu-in { padding-left: 10px !important; padding-right: 10px !important; } }